npx skills add ...
npx skills add auth0/agent-skills --skill auth0-vue
npx skills add auth0/agent-skills --skill auth0-vue
Use when adding Auth0 login, logout, protected routes, or user sessions to a Vue 3 SPA. Integrates @auth0/auth0-vue — use even if the user says "add login to my Vue app" or "protect my Vue routes" without naming the SDK.
Add authentication to Vue.js 3 single-page applications using @auth0/auth0-vue.
auth0-quickstart skill firstFor automated setup with Auth0 CLI, see Setup Guide [blocked] for complete scripts.
For manual setup:
Create .env file:
Update src/main.ts:
Create a login component:
Start your dev server and test the login flow:
| Mistake | Fix |
|---|---|
| Forgot to add redirect URI in Auth0 Dashboard | Add your application URL (e.g., http://localhost:3000, https://app.example.com) to Allowed Callback URLs in Auth0 Dashboard |
| Using wrong env var prefix | Vite requires VITE_ prefix, Vue CLI uses VUE_APP_ |
| Not handling loading state | Always check isLoading before rendering auth-dependent UI |
| Storing tokens in localStorage | Never manually store tokens - SDK handles secure storage automatically |
| Missing createAuth0 plugin registration | Must call app.use(createAuth0({...})) before mounting app |
| Accessing auth before plugin loads | Wrap auth-dependent code in v-if="!isLoading" |
auth0-quickstart - Basic Auth0 setupauth0-migration - Migrate from another auth providerauth0-mfa - Add Multi-Factor Authenticationauth0-dpop - Add DPoP device-bound token bindingauth0-cli - Manage Auth0 resources from the terminalCore Composables:
useAuth0() - Main authentication composableisAuthenticated - Reactive check if user is logged inuser - Reactive user profile informationloginWithRedirect() - Initiate loginlogout() - Log out usergetAccessTokenSilently() - Get access token for API callsDPoP Composables (requires useDpop: true in createAuth0 config — see auth0-dpop):
createFetcher(config) - Returns a DPoP-aware fetch-compatible functiongenerateDpopProof(params) - Manually generate a DPoP proof JWTgetDpopNonce(id?) - Get the current stored DPoP noncesetDpopNonce(nonce, id?) - Store a server-issued DPoP nonceCommon Use Cases:
<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';
const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();
</script>
<template>
<div>
<div v-if="isLoading">Loading...</div>
<div v-else-if="isAuthenticated">
<img :src="user?.picture" :alt="user?.name" />
<span>Welcome, {{ user?.name }}</span>
<button @click="logout({ logoutParams: { returnTo: window.location.origin }})">
Logout
</button>
</div>
<button v-else @click="loginWithRedirect()">
Login
</button>
</div>
</template>npm run dev