Aller au contenu

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.

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

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

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

Fenêtre de terminal
npx astro add auth-astro

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

Fenêtre de terminal
npm install 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()],
});

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>

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>

Better Auth est un framework indépendant d’authentification (et d’autorisation) pour TypeScript. Il fournit un ensemble complet de fonctionnalités prêtes à l’emploi et comprend un écosystème de plugins qui simplifie l’ajout de fonctionnalités avancées.

Il prend en charge Astro dès le départ et vous pouvez l’utiliser pour ajouter une authentification à votre projet Astro.

Fenêtre de terminal
npm install better-auth

Pour des instructions de configuration détaillées, consultez le Guide d’installation de Better Auth.

Configurez votre table de base de données pour stocker les données utilisateur et vos méthodes d’authentification préférées comme décrit dans le Guide d’installation de Better Auth. Ensuite, vous devrez monter le gestionnaire Better Auth dans votre projet Astro.

page/api/auth/[...all].ts
import { auth } from "../../../lib/auth"; // importe votre instance Better Auth
import type { APIRoute } from "astro";
export const ALL: APIRoute = async (ctx) => {
return auth.handler(ctx.request);
};

Suivez le guide Astro de Better Auth pour en savoir plus.

Better Auth propose un assistant createAuthClient pour divers frameworks, dont Vanilla JS, React, Vue, Svelte et Solid.

Par exemple, pour créer un client pour React, importez l’assistant depuis 'better-auth/react' :

src/lib/auth-client.ts
import { createAuthClient } from 'better-auth/react';
export const authClient = createAuthClient();
export const { signIn, signOut } = authClient;

Une fois votre client configuré, vous pouvez l’utiliser pour authentifier les utilisateurs dans vos composants Astro ou dans tout fichier spécifique au framework. L’exemple suivant ajoute la possibilité de se connecter ou de se déconnecter avec vos fonctions configurées signIn() et signOut().

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("./lib/auth-client")
document.querySelector("#login").onclick = () => signIn.social({
provider: "github",
callbackURL: "/dashboard",
})
document.querySelector("#logout").onclick = () => signOut()
</script>
</Layout>

Vous pouvez ensuite utiliser l’objet auth pour obtenir les données de session de l’utilisateur dans votre code côté serveur. L’exemple suivant personnalise le contenu de la page en affichant le nom d’un utilisateur authentifié :

src/pages/index.astro
---
import { auth } from "../../../lib/auth"; // importe votre instance Better Auth
const session = await auth.api.getSession({
headers: Astro.request.headers,
});
---
<p>{session.user?.name}</p>

Vous pouvez également utiliser l’objet auth pour protéger vos routes à l’aide d’un middleware. L’exemple suivant vérifie si un utilisateur essayant d’accéder à une route du tableau de bord protégée est authentifié et le redirige vers la page d’accueil dans le cas contraire.

src/middleware.ts
import { auth } from "../../../auth"; // importe votre instance Better Auth
import { defineMiddleware } from "astro:middleware";
export const onRequest = defineMiddleware(async (context, next) => {
const isAuthed = await auth.api
.getSession({
headers: context.request.headers,
})
if (context.url.pathname === "/dashboard" && !isAuthed) {
return context.redirect("/");
}
return next();
});

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.

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

Fenêtre de terminal
npm install @clerk/astro

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

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

Lucia est une ressource permettant d’implémenter l’authentification basée sur la session dans un certain nombre de frameworks, notamment Astro.

  1. Créez une API de sessions de base avec la base de données de votre choix.
  2. Ajoutez des cookies de session à l’aide de points de terminaison et de middleware.
  3. Implémentez GitHub OAuth à l’aide des API que vous avez implémentées.
Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté