Add Login to Your Vue Application

Use AI to integrate Auth0

If you use an AI coding assistant like Claude Code, Cursor, or GitHub Copilot, you can add Auth0 authentication automatically in minutes using agent skills.Install:

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-vue

Then ask your AI assistant:

Add Auth0 authentication to my Vue app

Your AI assistant will automatically create your Auth0 application, fetch credentials, install @auth0/auth0-vue, create the authentication plugin, and configure your routes. Full agent skills documentation →

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+

Verify installation: node --version && npm --versionVue Version Compatibility: This quickstart works with Vue 3.x and newer.

Get Started

This quickstart demonstrates how to integrate Auth0 authentication into a Vue.js 3 application. You’ll build a responsive single-page app with secure user authentication using Vue’s composition API and the Auth0 Vue SDK.

Create a new project

Create a new Vue 3 project for this Quickstart

npm create vue@latest auth0-vue -- --typescript --router --pinia

Open the project

cd auth0-vue

Install the Auth0 Vue SDK

npm add @auth0/auth0-vue && npm install

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 have three options to set up your Auth0 app: use the Quick Setup tool (recommended), run a CLI command, or configure manually via the Dashboard:

Quick Setup (recommended)
CLI
Dashboard

Create an Auth0 App and copy the pre-filled .env file with the right configuration values.

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

# Install Auth0 CLI (if not already installed)
brew tap auth0/auth0-cli && brew install auth0

# Set up Auth0 app and generate .env file
auth0 qs setup --app --type spa --framework vue --build-tool vite --name "My App" --port 5173

# Install Auth0 CLI (if not already installed)
scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
scoop install auth0

# Set up Auth0 app and generate .env file
auth0 qs setup --app --type spa --framework vue --build-tool vite --name "My App" --port 5173

This command will:

Check if you’re authenticated (and prompt for login if needed)
Create an Auth0 Single Page Application configured for http://localhost:5173
Generate a .env file with VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID

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

.env

VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID

Head to the Auth0 Dashboard
Click on Applications > Applications > Create Application
In the popup, enter a name for your app, select Single Page Web Application as the app type and click Create
Switch to the Settings tab on the Application Details page
Replace YOUR_AUTH0_APP_DOMAIN and YOUR_AUTH0_APP_CLIENT_ID on the .env file with the Domain and Client ID values from the dashboard

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

http://localhost:5173

Allowed Logout URLs:

http://localhost:5173

Allowed Web Origins:

http://localhost:5173

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.

Verify your .env file exists: cat .env (Mac/Linux) or type .env (Windows)

Configure the Auth0 Plugin

src/main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import { createAuth0 } from '@auth0/auth0-vue'

import App from './App.vue'

const app = createApp(App)

app.use(createAuth0({
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
  authorizationParams: {
    redirect_uri: window.location.origin
  }
}))

app.use(createPinia())
app.use(router)

app.mount('#app')

Create Authentication Components

Create component files

touch src/components/LoginButton.vue && touch src/components/LogoutButton.vue && touch src/components/UserProfile.vue

New-Item -ItemType File -Path src/components/LoginButton.vue
New-Item -ItemType File -Path src/components/LogoutButton.vue
New-Item -ItemType File -Path src/components/UserProfile.vue

And add the following code snippets

Run your app

npm run dev

If port 5173 is in use, run: npm run dev -- --port 5174 and update your Auth0 app’s callback URLs to http://localhost:5174

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

Advanced Usage

Protecting Routes with Vue Router

Use Vue Router’s navigation guards to protect specific routes:

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { authGuard } from '@auth0/auth0-vue'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
import Dashboard from '../views/Dashboard.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    beforeEnter: authGuard
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    beforeEnter: authGuard
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Calling Protected APIs

Configure your Auth0 plugin to include an API audience and make authenticated requests:

src/main.ts

import { createAuth0 } from '@auth0/auth0-vue'

const app = createApp(App)

app.use(
  createAuth0({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    authorizationParams: {
      redirect_uri: window.location.origin,
      audience: "YOUR_API_IDENTIFIER"
    }
  })
)

Then make authenticated API calls in your components:

src/components/ApiCall.vue

<template>
  <div>
    <button @click="callProtectedApi" :disabled="isLoading">
      Call Protected API
    </button>
    <pre v-if="apiResponse">{{ JSON.stringify(apiResponse, null, 2) }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'

const { getAccessTokenSilently } = useAuth0()
const apiResponse = ref(null)
const isLoading = ref(false)

const callProtectedApi = async () => {
  try {
    isLoading.value = true
    const token = await getAccessTokenSilently()
    
    const response = await fetch('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    
    apiResponse.value = await response.json()
  } catch (error) {
    console.error('API call failed:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

Using Composables for Authentication Logic

Create reusable composables for common authentication patterns:

src/composables/useAuthenticatedUser.ts

import { computed, ref, watchEffect } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'

export function useAuthenticatedUser() {
  const { user, isAuthenticated, isLoading, getAccessTokenSilently } = useAuth0()
  const accessToken = ref<string | null>(null)

  watchEffect(async () => {
    if (isAuthenticated.value && !isLoading.value) {
      try {
        accessToken.value = await getAccessTokenSilently()
      } catch (error) {
        console.error('Failed to get access token:', error)
      }
    }
  })

  return {
    user: computed(() => user.value),
    accessToken: computed(() => accessToken.value),
    isAuthenticated: computed(() => isAuthenticated.value),
    isLoading: computed(() => isLoading.value)
  }
}

Usage in components:

src/components/UserDashboard.vue

<template>
  <div v-if="!isLoading">
    <h1>Welcome, {{ user?.name }}</h1>
    <p>Access Token: {{ accessToken ? 'Available' : 'Not available' }}</p>
  </div>
  <div v-else>Loading...</div>
</template>

<script setup lang="ts">
import { useAuthenticatedUser } from '../composables/useAuthenticatedUser'

const { user, accessToken, isLoading } = useAuthenticatedUser()
</script>

​Get Started

​Advanced Usage

Get Started

Advanced Usage