Skip to main content

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: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.
1

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
2

Install the Auth0 Vue SDK

npm add @auth0/auth0-vue && 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 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:
Verify your .env file exists: cat .env (Mac/Linux) or type .env (Windows)
4

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')
5

Create Authentication Components

Create component files
touch src/components/LoginButton.vue && touch src/components/LogoutButton.vue && touch src/components/UserProfile.vue
And add the following code snippets
6

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

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
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>
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>