Auth0 Vue

Auth0 Vue.js Integration

Add authentication to Vue.js 3 single-page applications using @auth0/auth0-vue.

Prerequisites

When NOT to Use

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-vue

2. Configure Environment

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.

For manual setup:

Create .env file:

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id

3. Configure Auth0 Plugin

Update src/main.ts:

import { createApp } from 'vue';
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.mount('#app');

4. Add Authentication UI

Create a login component:

5. Test Authentication

Start your dev server and test the login flow:

npm run dev

Detailed Documentation

Common Mistakes

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

Related Skills

Quick Reference

Core Composables:

Common Use Cases:

References