Passer au contenu principal
Ce Démarrage rapide est actuellement en bêta. Nous aimerions recevoir vos commentaires!
Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :
  • Node.js 20 LTS ou plus récent
  • npm 10+ ou yarn 1.22+ ou pnpm 8+
  • jq – requis pour la configuration d’Auth0 CLI
Compatibilité des versions Nuxt : Ce Démarrage rapide fonctionne avec Nuxt 3.x prêt à l’emploi. Pour Nuxt 4.x, assurez-vous d’utiliser Nuxt 4.2+.

​
Mise en route

Ce démarrage rapide montre comment ajouter l’authentification Auth0 à une application Nuxt.js. Vous allez créer une application monopage sécurisée avec des fonctionnalités de connexion, de déconnexion et de profil utilisateur à l’aide de la trousse de développement logiciel (SDK) Auth0 pour Nuxt.js.
1

Créer un projet

Créez un nouveau projet Nuxt pour ce démarrage rapide
npx nuxi@latest init auth0-nuxt-app
Ouvrez le projet
cd auth0-nuxt-app
2

Installez la trousse de développement logiciel (SDK) Auth0 pour Nuxt

npm add @auth0/auth0-nuxt && npm install
3

Configurez votre application Auth0

Ensuite, vous devez créer une nouvelle application sur votre locataire Auth0 et ajouter les variables d’environnement à votre projet.Vous pouvez choisir de le faire automatiquement en exécutant une commande CLI ou manuellement via le tableau de bord :
Exécutez la commande shell suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env :
AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env
4

Configurer le module Auth0 pour Nuxt

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@auth0/auth0-nuxt'],
  runtimeConfig: {
    auth0: {
      domain: process.env.NUXT_AUTH0_DOMAIN,
      clientId: process.env.NUXT_AUTH0_CLIENT_ID,
      clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET,
      sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET,
      appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL,
    },
  },
})
5

Créer les composants Login, Logout et Profile

Créer des fichiers
mkdir -p app/components && touch app/components/LoginButton.vue && touch app/components/LogoutButton.vue && touch app/components/UserProfile.vue
Et ajoutez les extraits de code suivants
<template>
 <a 
    href="/auth/login" 
    class="button login"
  >
    Se connecter
  </a>
</template>

<style scoped>
.button {
  padding: 1.1rem 2.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}

.button:focus {
  box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
}

.button.login {
  background-color: #63b3ed;
  color: #1a1e27;
}

.button.login:hover:not(:disabled) {
  background-color: #4299e1;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
</style>
6

Lancer votre application

npm run dev
Point de contrôleVous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle, accessible à partir de votre localhost.