Ajouter l’authentification à votre application Vue

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les renseignements du profil utilisateur dans n’importe quelle application Vue à l’aide du SDK Auth0 pour Vue.

Utilisez l’IA pour intégrer Auth0

Si vous utilisez un assistant de codage IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes à l’aide des compétences d’agent.

Installation :

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

Ensuite, demandez à votre assistant IA :

Add Auth0 authentication to my Vue app

Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera @auth0/auth0-vue, créera le plugin d’authentification et configurera vos routes. Documentation complète sur les compétences d’agent →

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• Node.js 20 LTS ou une version plus récente
• npm 10+ ou yarn 1.22+ ou pnpm 8+

Vérifiez l’installation : node --version && npm --version

Compatibilité des versions de Vue : Ce guide de démarrage rapide fonctionne avec Vue 3.x et les versions ultérieures.

​

Pour commencer

Ce guide de démarrage rapide montre comment intégrer l’authentification Auth0 à une application Vue.js 3. Vous créerez une application monopage adaptative avec une authentification utilisateur sécurisée à l’aide de l’API de composition de Vue et du SDK Auth0 pour Vue.

1. Créer un nouveau projet

   Créez un nouveau projet Vue 3 pour ce guide de démarrage rapide

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

   Ouvrez le projet

   cd auth0-vue
   
2. Installer le SDK Auth0 pour Vue

   npm add @auth0/auth0-vue && npm install
   
3. Configurez votre application Auth0

   La prochaine étape consiste à créer une nouvelle application dans votre tenant Auth0 et à ajouter les variables d’environnement à votre projet.

   Vous avez trois options pour configurer votre application Auth0 : utiliser l’outil de configuration rapide (recommandé), exécuter une commande CLI ou faire la configuration manuellement dans le Dashboard :

   Configuration rapide (recommandée)

   Créez une application Auth0 et copiez le fichier .env prérempli avec les bonnes valeurs de configuration.

   CLI

   Exécutez la commande suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env :

   Mac

   # Installer Auth0 CLI (si ce n’est pas déjà fait)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurer l’application Auth0 et générer le fichier .env
   auth0 qs setup --app --type spa --framework vue --build-tool vite --name "My App" --port 5173
   

   Cette commande permet de :

   1. Vérifier si vous êtes authentifié(e) (et demander une connexion au besoin)
   2. Créer une application monopage Auth0 configurée pour http://localhost:5173
   3. Générer un fichier .env contenant VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID

   Dashboard

   Avant de commencer, créez un fichier .env à la racine de votre projet

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Accédez au Dashboard Auth0
   2. Cliquez sur Applications > Applications > Create Application
   3. Dans la fenêtre contextuelle, entrez un nom pour votre application, sélectionnez Single Page Web Application comme type d’application, puis cliquez sur Create
   4. Ouvrez l’onglet Settings sur la page des détails de l’application
   5. Remplacez YOUR_AUTH0_APP_DOMAIN et YOUR_AUTH0_APP_CLIENT_ID dans le fichier .env par les valeurs Domain et Client ID du dashboard

   Enfin, dans l’onglet Settings de la page des détails de votre application, configurez les URL suivantes :

   URL de rappel autorisées :

   http://localhost:5173
   

   URL de déconnexion autorisées :

   http://localhost:5173
   

   Origines Web autorisées :

   http://localhost:5173
   

   Les URL de rappel autorisées constituent une mesure de sécurité essentielle pour s’assurer que les utilisateurs sont redirigés de façon sécuritaire vers votre application après l’authentification. Sans URL correspondante, le processus de connexion échouera et les utilisateurs se retrouveront sur une page d’erreur Auth0 au lieu d’accéder à votre application.

   Les URL de déconnexion autorisées sont essentielles pour offrir une expérience utilisateur fluide lors de la déconnexion. Sans URL correspondante, les utilisateurs ne seront pas redirigés vers votre application après la déconnexion et resteront plutôt sur une page Auth0 générique.

   Les origines Web autorisées sont essentielles au fonctionnement de l’authentification silencieuse. Sans elles, les utilisateurs seront déconnectés lorsqu’ils actualiseront la page ou reviendront plus tard dans votre application.

   Vérifiez que votre fichier .env existe : cat .env (Mac/Linux) ou type .env (Windows)

4. Configurer le plugin Auth0

   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. Créer des composants d’authentification

   Créer des fichiers de composants

   Mac/Linux

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

   Et ajoutez les extraits de code suivants

6. Lancez votre application

   npm run dev
   

   Si le port 5173 est déjà pris, exécutez : npm run dev -- --port 5174 et mettez à jour les URL de rappel de votre application Auth0 vers http://localhost:5174

Vérification

Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle sur votre localhost

---

​

Utilisation avancée

Protéger certaines routes avec Vue Router

Utilisez les gardes de navigation de Vue Router pour protéger des routes spécifiques :

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

Appeler des API protégées

Configurez votre plugin Auth0 pour inclure l’audience de votre API et effectuer des requêtes authentifiées :

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

Ensuite, effectuez des appels à l’API authentifiés dans vos composants :

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>

Utiliser des composables pour la logique d’authentification

Créez des composables réutilisables pour les cas d’usage d’authentification courants :

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

Utilisation dans les composants :

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>