Intégration de Clerk avec Next.js 15 . Dans cet article, nous allons plonger en profondeur dans l’intégration de Clerk, une solution d’authentification, avec Next.js. Nous aborderons chaque étape, depuis l’installation jusqu’à la gestion des utilisateurs, en veillant à fournir des explications détaillées et des exemples pratiques.
Qu’est-ce que Clerk ?
Clerk est une plateforme d’authentification qui simplifie le processus de gestion des utilisateurs dans vos applications. Elle fournit des API et des composants React préconçus, vous permettant de vous concentrer sur le développement de votre application plutôt que sur l’implémentation des mécanismes d’authentification. Clerk offre également des fonctionnalités avancées telles que la gestion des sessions, l’authentification multifactorielle, et bien plus encore. Grâce à ces outils, vous pouvez assurer la sécurité et la fluidité de l’expérience utilisateur.
Configuration Initiale
Pour commencer, vous devez installer le SDK Clerk pour Next.js. Exécutez la commande suivante dans votre terminal :
npm install @clerk/nextjsCette commande téléchargera le paquet nécessaire à l’utilisation de Clerk dans votre projet Next.js. Ce SDK vous permettra d’utiliser les composants et les API fournis par Clerk pour gérer l’authentification des utilisateurs.
Étape 2 : Configuration des Variables d’Environnement
Une fois le SDK installé, vous devez configurer vos variables d’environnement. Créez un fichier .env.local à la racine de votre projet Next.js et ajoutez les lignes suivantes :
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_KEY
CLERK_SECRET_KEY=YOUR_SECRET
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/dashboard
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/Il est crucial de remplacer YOUR_KEY et YOUR_SECRET par vos propres clés d’API fournies par Clerk. Ces clés sont sensibles et doivent être protégées, car elles donnent accès à votre compte Clerk et à vos données utilisateurs. Les variables NEXT_PUBLIC_* sont accessibles côté client, tandis que CLERK_SECRET_KEY doit rester confidentielle. Ensuite à la racine de votre application créer le fichier middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)'])export default clerkMiddleware(async (auth, request) => {
if (!isPublicRoute(request)) {
await auth.protect()
}
})export const config = {
matcher: [
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
'/(api|trpc)(.*)',
],
}Étape 3 : Configuration de ClerkProvider
La dernière étape de la configuration initiale consiste à envelopper votre application avec ClerkProvider. Modifiez le fichier app/layout.tsx pour inclure le provider :
import { ClerkProvider } from '@clerk/nextjs';
import './globals.css';
import Nav from './components/Nav';export default function RootLayout({ children }) {
return (
<ClerkProvider>
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
</ClerkProvider>
);
}En utilisant ClerkProvider, vous assurez que tous les composants enfants ont accès aux fonctionnalités d’authentification, ce qui facilite la gestion de l’état de l’utilisateur dans votre application.
Création des Pages d’Authentification
Pour permettre aux utilisateurs de se connecter à votre application, vous devez créer une page de connexion. Utilisez le composant SignIn fourni par Clerk. Créez un fichier app/sign-in/[[...sign-in]]/page.tsx et ajoutez-y le code suivant :
import { SignIn } from '@clerk/nextjs';export default function SignInPage() {
return (
<section className='w-full h-screen flex items-center justify-center'>
<SignIn />
</section>
);
}
Dans ce code, nous créons une interface simple pour la connexion des utilisateurs. Clerk s’occupe du reste, en fournissant une interface utilisateur professionnelle et fonctionnelle, ainsi qu’une gestion des erreurs intégrée.
De manière similaire, créez une page d’inscription en utilisant le composant SignUp. Créez un fichier app/sign-up/[[...sign-up]]/page.tsx et ajoutez-y le code suivant :
import { SignUp } from '@clerk/nextjs';export default function SignUpPage() {
return (
<section className='w-full h-screen flex items-center justify-center'>
<SignUp />
</section>
);
}Cette page permet aux nouveaux utilisateurs de s’inscrire facilement. Encore une fois, Clerk gère tout le processus, y compris les validations de formulaire et la gestion des erreurs.
Gestion des Utilisateurs
Pour afficher les informations de l’utilisateur connecté, vous utiliserez la fonction currentUser de Clerk. Créez une page de tableau de bord en ajoutant un fichier app/dashboard/page.tsx :
import { auth, currentUser } from '@clerk/nextjs/server';
import Image from 'next/image';export default async function DashboardPage() {
const { userId } = await auth();if (!userId) {
// Redirigez vers la page de connexion si l'utilisateur n'est pas authentifié.
// Logique de redirection à ajouter ici.
}const user = await currentUser();return (
<section className='w-full h-screen flex items-center flex-col pt-6'>
<div className='mb-4 border p-3 rounded-md'>
<Image src={user?.imageUrl} alt={user?.fullName} width={100} height={100} />
<h1>Bienvenue {user?.fullName}</h1>
<p>{user?.emailAddresses[0].emailAddress}</p>
</div>
</section>
);
}Dans ce code, nous récupérons les données de l’utilisateur et les affichons de manière conviviale. Il est important d’ajouter une logique de redirection si l’utilisateur n’est pas authentifié, afin de garantir la sécurité de votre application.
Utilisation des Hooks d’Authentification
Clerk propose deux hooks principaux pour gérer l’état d’authentification et récupérer des informations sur l’utilisateur : useAuth et useUser.
useAuth
Le hook useAuth permet d’accéder à l’état d’authentification de l’utilisateur. Voici un exemple d’utilisation :
'use client';
import { useAuth } from '@clerk/nextjs';export default function AuthStatus() {
const { isLoaded, userId, sessionId } = useAuth();if (!isLoaded) {
return <div>Chargement...</div>; // Affiche un message de chargement pendant le chargement des données.
}return userId ? (
<div>
Bonjour, votre ID utilisateur est {userId}. Votre session active est {sessionId}.
</div>
) : (
<div>Vous n'êtes pas connecté.</div>
);
}Dans cet exemple, le composant vérifie si les données d’authentification sont chargées. Une fois chargées, il affiche l’ID utilisateur et l’ID de session, ou un message indiquant que l’utilisateur n’est pas connecté.
useUser
Le hook useUser vous permet de récupérer des informations détaillées sur l’utilisateur connecté. Voici comment vous pouvez l’utiliser :
'use client';
import { useUser } from '@clerk/nextjs';export default function UserProfile() {
const { isLoaded, isSignedIn, user } = useUser();if (!isLoaded) {
return <div>Chargement des informations utilisateur...</div>; // Affiche un message de chargement.
}if (!isSignedIn) {
return <div>Veuillez vous connecter pour voir votre profil.</div>;
}return (
<div>
Bonjour, {user.firstName} ! Bienvenue sur notre site.
</div>
);
}Dans cet exemple, le composant vérifie d’abord si les informations utilisateur sont chargées. Ensuite, il détermine si l’utilisateur est connecté avant d’afficher son prénom. Cela contribue à créer une expérience utilisateur personnalisée et accueillante.
API de Gestion des Utilisateurs
Pour gérer l’authentification côté serveur, vous pouvez créer une API Next.js. Cela peut être utile si vous souhaitez protéger certaines routes ou effectuer des vérifications supplémentaires. Créez un fichier pages/api/auth.ts :
import type { NextApiRequest, NextApiResponse } from 'next';
import { getAuth } from '@clerk/nextjs/server';export default function handler(req: NextApiRequest, res: NextApiResponse) {
const { userId } = getAuth(req);if (!userId) {
return res.status(401).json({ error: 'Unauthorized' });
}res.status(200).json({}); // Retourne une réponse vide si l'utilisateur est authentifié.
}Dans ce fichier, nous vérifions si l’utilisateur est authentifié avant de lui permettre d’accéder à l’API. Cela renforce la sécurité de votre application en s’assurant que seules les requêtes authentifiées sont traitées.
Conclusion
En suivant ce guide détaillé, vous avez intégré avec succès Clerk dans votre application Next.js 15. Vous avez appris à configurer des pages d’authentification, à gérer les utilisateurs et à afficher des informations pertinentes.
Clerk simplifie considérablement le processus d’authentification, vous permettant de vous concentrer sur le développement des fonctionnalités de votre application plutôt que sur la gestion des utilisateurs. N’hésitez pas à explorer les fonctionnalités avancées de Clerk, comme la gestion des rôles ou l’authentification multifactorielle, pour enrichir votre application.
En résumé, l’intégration de Clerk dans votre projet Next.js vous permet de créer une expérience utilisateur sécurisée et fluide, essentielle pour le succès de toute application web moderne. Profitez de cette capacité à gérer facilement l’authentification et à construire des applications robustes et engageantes ! Pour approfondir vos connaissances en Next JS et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à Next JS, où vous apprendrez à créer des applications performantes et réactives.
je pense que la partie redux manque de TP
Merci beaucoup pour la formation c'est top
Bonjour certaines sections sont en cours d'écriture bien à vous Jonathan
Hello Gregory, Merci pour ton retour et ton soutien, Pour répondre à t'as question, non tu peut utiliser Yup sans…
Excellent Article mais est-on "obligé" d'utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en…