Intégration Auth0 Vue.js

Ajoutez l'authentification aux applications monopage Vue.js 3 en utilisant @auth0/auth0-vue.

Prérequis

Application Vue 3+ (Vite ou Vue CLI)
Compte Auth0 et application configurée
Si vous n'avez pas encore Auth0 configuré, utilisez d'abord la skill auth0-quickstart

Quand NE PAS l'utiliser

Applications Vue rendues côté serveur - Consultez le guide Auth0 Nuxt.js pour les patterns SSR
Applications Vue 2 - Ce SDK nécessite Vue 3+, utilisez le wrapper legacy @auth0/auth0-spa-js
Connexion intégrée - Ce SDK utilise Auth0 Universal Login (basé sur redirection)
Authentification API backend - Utilisez express-openid-connect ou validation JWT à la place

Workflow de démarrage rapide

1. Installer le SDK

npm install @auth0/auth0-vue

2. Configurer l'environnement

Pour la configuration automatisée avec Auth0 CLI, consultez le Guide de configuration pour les scripts complets.

Pour la configuration manuelle :

Créez un fichier .env :

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

3. Configurer le plugin Auth0

Mettez à jour 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. Ajouter l'interface d'authentification

Créez un composant de connexion :

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

5. Tester l'authentification

Lancez votre serveur de développement et testez le flux de connexion :

npm run dev

Documentation détaillée

Guide de configuration - Scripts de configuration automatisée (Bash/PowerShell), commandes CLI, configuration manuelle
Guide d'intégration - Routes protégées, appels API, gestion des erreurs, composables
Référence API - API SDK complète, options de configuration, référence des composables, stratégies de test

Erreurs courantes

Erreur	Solution
Oubli d'ajouter l'URI de redirection dans le tableau de bord Auth0	Ajoutez l'URL de votre application (par ex. `http://localhost:3000`, `https://app.example.com`) aux URLs de rappel autorisées dans le tableau de bord Auth0
Utilisation du mauvais préfixe de variable d'environnement	Vite nécessite le préfixe `VITE_`, Vue CLI utilise `VUE_APP_`
Non-gestion de l'état de chargement	Vérifiez toujours `isLoading` avant de rendre l'interface dépendante de l'authentification
Stockage des tokens dans localStorage	Ne stockez jamais manuellement les tokens - le SDK gère le stockage sécurisé automatiquement
Enregistrement du plugin createAuth0 manquant	Vous devez appeler `app.use(createAuth0({...}))` avant de monter l'application
Accès à l'authentification avant le chargement du plugin	Enveloppez le code dépendant de l'authentification dans `v-if="!isLoading"`

Skills connexes

auth0-quickstart - Configuration Auth0 de base
auth0-migration - Migration depuis un autre fournisseur d'authentification
auth0-mfa - Ajouter l'authentification multi-facteurs

Référence rapide

Composables principaux :

useAuth0() - Composable d'authentification principal
isAuthenticated - Vérification réactive si l'utilisateur est connecté
user - Informations de profil utilisateur réactives
loginWithRedirect() - Initier la connexion
logout() - Déconnecter l'utilisateur
getAccessTokenSilently() - Obtenir le token d'accès pour les appels API

Cas d'usage courants :

Boutons de connexion/déconnexion → Voir l'étape 4 ci-dessus
Routes protégées avec guards de navigation → Guide d'intégration
Appels API avec tokens → Guide d'intégration
Gestion des erreurs → Guide d'intégration

auth0-vue