Authentification

L’authentification et l’autorisation sont deux processus de sécurité qui gèrent l’accès à votre site web ou à votre application. L’authentification permet de vérifier l’identité d’un visiteur, tandis que l’autorisation permet d’accéder à des zones et des ressources protégées.

L’authentification vous permet de personnaliser les zones de votre site pour les personnes connectées et offre la meilleure protection pour les informations personnelles ou privées. Les bibliothèques d’authentification (par exemple Lucia Auth, Auth.js, Clerk) fournissent des utilitaires pour plusieurs méthodes d’authentification telles que la connexion par e-mail et les fournisseurs OAuth.

Astuce

Il n’y a pas de solution d’authentification officielle pour Astro, mais vous pouvez trouver dans les intégrations de la communauté en recherchant “auth”.

Voir comment ajouter une authentification avec Supabase ou ajouter une authentification avec Firebase dans nos guides dédiés à ces services backend.

Lucia

Titre de la section Lucia

Lucia est une bibliothèque d’authentification spécialisée sur le framework, une bibliothèque d’authentification basée sur la session avec un excellent support Astro.

Installation

Titre de la section Installation

Installez Lucia en utilisant le gestionnaire de paquets de votre choix.

npm

npm install lucia

pnpm

pnpm add lucia

Yarn

yarn add lucia

Configuration

Titre de la section Configuration

Utilisez le guide “Démarrer avec Astro” pour initialiser Lucia avec un adaptateur et configurer une base de données pour stocker les utilisateurs et les sessions.

Utilisation

Titre de la section Utilisation

Astuce

Suivez l’un des tutoriels Astro complets de Lucia pour ajouter l’authentification par nom d’utilisateur et mot de passe ou GitHub OAuth à votre projet Astro.

Prochaines étapes

Titre de la section Prochaines étapes

• Exemple Astro + Projet OAuth Lucia
• Exemple Astro + Projet de nom d’utilisateur et de mot de passe Lucia

Auth.js

Titre de la section Auth.js

Auth.js est une solution d’authentification indépendante du framework. Un adaptateur de framework communautaire auth-astro est disponible pour Astro.

Installation

Titre de la section Installation

Utilisez la commande astro add de votre gestionnaire de paquets préféré pour ajouter l’intégration auth-astro.

npm

npx astro add auth-astro

pnpm

pnpm astro add auth-astro

Yarn

yarn astro add auth-astro

Installation manuelle

Titre de la section Installation manuelle

Pour installer auth-astro manuellement, installez le paquet requis pour votre gestionnaire de paquets :

npm

npm install auth-astro

pnpm

pnpm add auth-astro @auth/core

Yarn

yarn add auth-astro

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

astro.config.mjs

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

Configuration

Titre de la section Configuration

Créez un fichier auth.config.mjs dans le répertoire racine de votre projet. Ajoutez tous les providers ou méthodes d’authentification que vous souhaitez supporter, ainsi que toutes les variables d’environnement qu’ils requièrent.

auth.config.mjs

import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';

export default defineConfig({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

Créez un fichier .env à la racine de votre projet s’il n’existe pas déjà. Ajoutez les deux variables d’environnement suivantes. AUTH_SECRET doit être une chaîne privée avec un minimum de 32 caractères.

.env

AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

Utilisation

Titre de la section Utilisation

Vous pouvez ajouter des boutons de connexion et de déconnexion en utilisant le module auth-astro/client dans une balise de script ou un composant de framework côté client.

src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Se connecter</button>
  <button id="logout">Se déconnecter</button>

  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

Vous pouvez récupérer la session de l’utilisateur en utilisant la méthode getSession.

src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>Bienvenue {session.user?.name}</p>
    ) : (
      <p>Non connecté</p>
    )
  }
</Layout>

Prochaines étapes

Titre de la section Prochaines étapes

• auth-astro sur GitHub
• Documentation Auth.js

Clerk

Titre de la section Clerk

Clerk est une suite complète d’interfaces utilisateur intégrables, d’API flexibles et de tableaux de bord d’administration pour authentifier et gérer vos utilisateurs. Clerk propose un kit de développement logiciel (SDK) officiel pour Astro.

Installation

Titre de la section Installation

Installez @clerk/astro en utilisant le gestionnaire de paquets de votre choix.

npm

npm install @clerk/astro

pnpm

pnpm add @clerk/astro

Yarn

yarn add @clerk/astro

Configuration

Titre de la section Configuration

Suivez le guide de démarrage rapide Astro de Clerk pour configurer l’intégration et le middleware de Clerk dans votre projet Astro.

Utilisation

Titre de la section Utilisation

Clerk fournit des composants qui vous permettent de contrôler la visibilité des pages en fonction de l’état d’authentification de votre utilisateur. Affichez aux utilisateurs déconnectés un bouton de connexion au lieu du contenu disponible pour les utilisateurs connectés :

src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
---

<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>

Clerk vous permet également de protéger les routes sur le serveur à l’aide d’un middleware. Spécifiez les routes protégées et invitez les utilisateurs non authentifiés à se connecter :

src/middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)',
]);

export const onRequest = clerkMiddleware((auth, context) => {
  if (!auth().userId && isProtectedRoute(context.request)) {
    return auth().redirectToSignIn();
  }
});

Prochaines étapes

Titre de la section Prochaines étapes

• Lisez la documentation officielle de @clerk/astro
• Commencez à partir d’un modèle avec le projet de démarrage rapide Clerk + Astro

Ressources communautaires

Titre de la section Ressources communautaires

• Utilisation de Microsoft Entra Id EasyAuth avec Astro et Azure Static Web App