Dans une application Next.js moderne, la gestion de l’authentification utilisateur est souvent centralisée autour de NextAuth, un outil puissant et flexible qui permet d’intégrer rapidement différents fournisseurs d’authentification comme GitHub et Google. Cependant, pour rendre votre application encore plus dynamique et personnalisée, il est essentiel de savoir comment récupérer l’ID utilisateur à partir de la session. Dans cet article, nous allons donc vous guider à travers la configuration complète pour y parvenir, en utilisant Prisma comme ORM pour interagir avec la base de données.
Voici ce que nous allons explorer ensemble :
- Configuration des options d’authentification (
authOptions) pour NextAuth. - Extension de l’interface
Sessionavec TypeScript. - Mise en place d’une fonction pour récupérer l’utilisateur connecté.
1. Configurer les authOptions pour NextAuth et Next.js
Tout d’abord, pour bien débuter, la première chose à faire est de configurer NextAuth dans votre application en définissant correctement les options d’authentification, appelées authOptions. Ces options sont cruciales car elles spécifient les fournisseurs d’authentification que vous souhaitez utiliser, ainsi que la manière dont les sessions sont gérées dans l’application.
Voici un exemple de configuration :
import { NextAuthOptions } from "next-auth";
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "@/lib/db";export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma),
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
}),
],
callbacks: {
session: async ({ session, user }) => {
if (session.user) {
session.user.id = user.id;
}
return session;
},
},
};Décryptons ce code pour mieux comprendre son fonctionnement :
- PrismaAdapter(prisma) : D’une part, cette ligne permet d’intégrer Prisma à NextAuth afin de gérer les utilisateurs, les sessions et d’autres entités directement dans la base de données.
- Fournisseurs d’authentification : D’autre part, ici, vous voyez deux fournisseurs d’authentification configurés, GitHub et Google. Bien entendu, vous pouvez ajouter d’autres fournisseurs si nécessaire, en fonction des besoins de votre application.
- Callback de session : Ensuite, la fonction de rappel
sessionmodifie la session pour y ajouter l’ID utilisateur. De ce fait, chaque fois qu’une session est créée ou accédée, l’ID de l’utilisateur est disponible dans l’objet session, ce qui simplifie la gestion des utilisateurs dans l’application.
2. Étendre l’interface Session avec TypeScript
Ensuite, sachez que par défaut, NextAuth ne propose pas directement l’ID utilisateur dans l’objet Session. C’est pourquoi, si vous avez besoin d’accéder à cette information de manière fluide dans votre code, il est nécessaire d’étendre l’interface Session de NextAuth avec TypeScript. Cela permet, non seulement de rendre l’ID accessible, mais aussi de garantir la compatibilité avec les types dans toute votre application.
import { DefaultSession, DefaultUser } from "next-auth";declare module "next-auth" {
interface Session extends DefaultSession {
user: DefaultUser & {
id: string;
};
}
}Pourquoi est-ce une étape cruciale ?
- Extensibilité : Grâce à TypeScript, vous pouvez déclarer des modules personnalisés, ce qui signifie que vous avez la possibilité de modifier les types par défaut de NextAuth pour inclure des propriétés supplémentaires. Dans ce cas précis, nous ajoutons l’ID utilisateur (id) à l’interface
Session, afin que cette information soit disponible de manière simple et rapide. - Sécurité accrue : De plus, en ajoutant explicitement l’ID utilisateur à l’interface
Session, vous vous assurez que cette donnée sera toujours présente et correctement typée. Cela permet de réduire les risques d’erreurs liées à l’absence ou à l’inexactitude des types dans votre code.
3. Récupérer l’utilisateur connecté avec Prisma
Après cela, une fois que vous avez configuré les authOptions et étendu l’interface Session, l’étape suivante consiste à récupérer les informations de l’utilisateur connecté. Généralement, cette opération s’effectue dans une fonction serveur qui utilise Prisma pour interroger la base de données en fonction de l’ID utilisateur stocké dans la session.
Voici comment vous pourriez implémenter cette fonction :
"use server";import { prisma } from "@/lib/db";
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/authOptions";export const getUser = async () => {
const session = await getServerSession(authOptions);if (!session || !session.user || !session.user.id) {
redirect("../");
}const id = session.user.id as string;const user = await prisma.user.findUnique({
where: { id },
});return user;
};Fonctionnement du Code :
- Récupération de la session : Tout d’abord, avec
getServerSession(authOptions), nous récupérons la session actuelle sur le serveur, qui inclut maintenant l’ID utilisateur grâce à la configuration que nous avons effectuée précédemment. - Vérification de la session : Ensuite, avant d’aller plus loin, il est crucial de vérifier si la session et l’ID utilisateur existent bien. Dans le cas contraire, l’utilisateur est automatiquement redirigé.
- Interrogation de la base de données : Enfin, Prisma est utilisé pour interroger la base de données et récupérer les informations de l’utilisateur correspondant à l’ID présent dans la session.
Gestion des erreurs
En outre, il est essentiel de gérer les cas d’erreurs, notamment si l’utilisateur n’est pas trouvé dans la base de données, même si un ID valide est présent dans la session. Cela peut arriver par exemple si l’utilisateur a été supprimé ou si la session est corrompue. Dans ce cas, voici comment gérer ce genre de situation :
if (!user) {
// Rediriger l'utilisateur ou renvoyer une réponse d'erreur
redirect("/user-not-found");
}Cette gestion des erreurs garantit que votre application reste robuste et continue de fonctionner correctement, même en cas de problème avec les données utilisateur.
Conclusion
En résumé, vous avez désormais tous les éléments pour configurer NextAuth afin de récupérer efficacement l’ID utilisateur dans une application Next.js utilisant Prisma. Grâce à l’extension de l’interface Session avec TypeScript et une configuration bien pensée des authOptions, vous vous assurez que l’ID utilisateur est toujours accessible, ce qui permet à votre application de fonctionner de manière fluide et sécurisée.
En adoptant cette approche, vous améliorez non seulement l’expérience utilisateur, mais aussi la maintenabilité et la clarté de votre code. De plus, vous pouvez facilement étendre cette configuration pour intégrer d’autres fonctionnalités avancées de NextAuth, comme la gestion des autorisations ou la personnalisation des pages de connexion.
super
Hello, je prend note pour la prochaine MAJ, merci à toi pour ton retour bien à toi, Jonathan
Bonjour, Pour le vidéo est-il possible d'ajouter Quantité (HD ou 4k, etc.....)comme ça on pourra choisir le format qui nous…
bien 10/10
Hello, oui il y a un petit soucis avec les quizs je vais régler sa rapidement