Integrating Auth0 with Nuxt.js can significantly enhance your application's authentication capabilities, providing users with a seamless login experience. This step-by-step tutorial guides you through the process of setting up Auth0 in a Nuxt.js project, ensuring secure and efficient user authentication.

Prerequisites

  • Basic knowledge of Nuxt.js and Vue.js
  • Node.js and npm installed on your machine
  • An Auth0 account (sign up at auth0.com)
  • A code editor like VS Code

Step 1: Create an Auth0 Application

Log in to your Auth0 dashboard and create a new application. Choose Single Page Application as the application type. Note down the Domain and Client ID as you will need these later.

Step 2: Set Up Your Nuxt.js Project

If you haven't already, create a new Nuxt.js project using the following commands:

npx create-nuxt-app auth0-nuxt

Navigate into your project directory:

cd auth0-nuxt

Step 3: Install Auth0 SDK

Install the Auth0 JavaScript SDK using npm:

npm install @auth0/auth0-spa-js

Step 4: Configure Auth0 in Nuxt.js

Create a new plugin file to initialize Auth0. In your project, create plugins/auth0.js and add the following code:

import { createAuth0Client } from '@auth0/auth0-spa-js';

export default async ({ app }, inject) => {
  const auth0 = await createAuth0Client({
    domain: 'YOUR_AUTH0_DOMAIN',
    client_id: 'YOUR_AUTH0_CLIENT_ID',
    redirect_uri: window.location.origin
  });
  inject('auth0', auth0);
};

Step 5: Add Authentication Methods

In your components or pages, you can now use the injected $auth0 object to handle login, logout, and user information.

Login Method

Implement a login function:

async login() {
  await this.$auth0.loginWithRedirect();
}

Handle Redirect Callback

In your mounted lifecycle or asyncData, handle the redirect:

async mounted() {
  const query = window.location.search;
  if (query.includes('code=') && query.includes('state=')) {
    await this.$auth0.handleRedirectCallback();
    const user = await this.$auth0.getUser();
    this.user = user;
    window.history.replaceState({}, document.title, '/');
  }
}

Step 6: Display User Info and Logout

Show user information and provide a logout button:

<template>
  <div>
    <div v-if="user">
      <p>Welcome, {{ user.name }}</p>
      <button @click="logout">Logout</button>
    </div>
    <div v-else>
      <button @click="login">Login</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null
    };
  },
  async mounted() {
    this.user = await this.$auth0.getUser();
  },
  methods: {
    async login() {
      await this.$auth0.loginWithRedirect();
    },
    async logout() {
      await this.$auth0.logout({ returnTo: window.location.origin });
      this.user = null;
    }
  }
};
</script>

Conclusion

Integrating Auth0 with Nuxt.js enables secure and user-friendly authentication. By following these steps, you can implement login, handle redirects, and display user information seamlessly in your application. Remember to replace placeholder values with your actual Auth0 domain and client ID.