Add Login to Your Nuxt.js Application

This Quickstart is currently in Beta. We’d love to hear your feedback!

Prerequisites: Before you begin, ensure you have the following installed:

• Node.js 20 LTS or newer
• npm 10+ or yarn 1.22+ or pnpm 8+
• jq - Required for Auth0 CLI setup

Nuxt Version Compatibility: This quickstart works with Nuxt 3.x out of the box. For Nuxt 4.x, ensure you’re using Nuxt 4.2+.

Get Started

This quickstart demonstrates how to add Auth0 authentication to a Nuxt.js application. You’ll build a secure single-page app with login, logout, and user profile features using the Auth0 Nuxt SDK.

1. Create a new project

   Create a new Nuxt project for this Quickstart

   npx nuxi@latest init auth0-nuxt-app
   

   Open the project

   cd auth0-nuxt-app
   
2. Install the Auth0 Nuxt SDK

   npm add @auth0/auth0-nuxt && npm install
   
3. Setup your Auth0 App

   Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project.

   You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:

   CLI

   Run the following shell command on your project’s root directory to create an Auth0 app and generate a .env file:

   Mac

   AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env
   

   Dashboard

   Before you start, create a .env file on your project’s root directory

   .env

   NUXT_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   NUXT_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   NUXT_AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET
   NUXT_AUTH0_SESSION_SECRET=YOUR_SESSION_SECRET
   NUXT_AUTH0_APP_BASE_URL=http://localhost:3000
   

   1. Head to the Auth0 Dashboard
   2. Click on Applications > Applications > Create Application
   3. In the popup, enter a name for your app, select Regular Web Application as the app type and click Create
   4. Switch to the Settings tab on the Application Details page
   5. Replace the values in the .env file with the Domain, Client ID, and Client Secret values from the dashboard
   6. Generate a session secret by running: openssl rand -hex 64 and use it for NUXT_AUTH0_SESSION_SECRET

   Finally, on the Settings tab of your Application Details page, configure the following URLs:

   Allowed Callback URLs:

   http://localhost:3000/auth/callback
   

   Allowed Logout URLs:

   http://localhost:3000
   

   Allowed Web Origins:

   http://localhost:3000
   

   Allowed Callback URLs are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail, and users will be blocked by an Auth0 error page instead of accessing your app.
   
   Allowed Logout URLs are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout and will instead be left on a generic Auth0 page.

   Allowed Web Origins is critical for silent authentication. Without it, users will be logged out when they refresh the page or return to your app later.

4. Configure the Auth0 Nuxt module

   nuxt.config.ts

   export default defineNuxtConfig({
     devtools: { enabled: true },
     modules: ['@auth0/auth0-nuxt'],
     runtimeConfig: {
       auth0: {
         domain: process.env.NUXT_AUTH0_DOMAIN,
         clientId: process.env.NUXT_AUTH0_CLIENT_ID,
         clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET,
         sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET,
         appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL,
       },
     },
   })
   

5. Create Login, Logout and Profile Components

   Create files

   mkdir -p app/components && touch app/components/LoginButton.vue && touch app/components/LogoutButton.vue && touch app/components/UserProfile.vue
   

   And add the following code snippets

   app/components/LoginButton.vue

   <template>
    <a 
       href="/auth/login" 
       class="button login"
     >
       Log In
     </a>
   </template>
   
   <style scoped>
   .button {
     padding: 1.1rem 2.8rem;
     font-size: 1.2rem;
     font-weight: 600;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     outline: none;
   }
   
   .button:focus {
     box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
   }
   
   .button.login {
     background-color: #63b3ed;
     color: #1a1e27;
   }
   
   .button.login:hover:not(:disabled) {
     background-color: #4299e1;
     transform: translateY(-5px) scale(1.03);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
   }
   
   .button:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
   }
   </style>
   
6. Run your app

   npm run dev
   

Checkpoint

You should now have a fully functional Auth0 login page running on your localhost