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
   

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