Authentification Next.js avec Clerk

Clerk est une puissante plateforme de gestion de l'authentification et des utilisateurs conçue pour simplifier l'authentification dans les applications Next.js et Reactjs, offrant une expérience de développement exceptionnelle et une sécurité utilisateur robuste.

··5 min. read

Share on TwitterShare on Linkedin

Nous allons vous guider dans l'utilisation de Clerk et Next.js pour établir l'authentification dans vos applications en ligne grâce à ce guide étape par étape. Clerk offre une expérience de développement rationalisée ainsi qu'une sécurité utilisateur renforcée. Vous pouvez rapidement construire des systèmes d'authentification sécurisés et conviviaux en combinant la flexibilité et l'efficacité de Next.js.

Avec Clerk, vous pouvez :

Permettre aux utilisateurs de s'inscrire en utilisant leurs comptes Google, GitHub ou d'autres réseaux sociaux existants.
Autoriser les utilisateurs à se connecter sans mot de passe en utilisant un code à usage unique (OTP) envoyé sur leur téléphone.
Gérer les comptes d'utilisateurs, les rôles et les autorisations à partir d'un seul tableau de bord.
Sécuriser votre application en utilisant les fonctionnalités intégrées de Clerk telles que la gestion de sessions et la sécurité des mots de passe.

Mise en place de votre application Next.js

Tout d'abord, créons un nouveau projet Next.js en exécutant les commandes suivantes dans votre terminal :

npx create-next-app my-clerk-app
cd my-clerk-app

La première étape consiste à créer un compte Clerk. Vous pouvez le faire en visitant clerk.dev et en vous inscrivant pour un compte gratuit.

Après vous être connecté, cliquez sur le bouton "Ajouter une application". Donnez un nom à votre application et sélectionnez toutes les options d'authentification sociale que vous souhaitez que vos utilisateurs utilisent.

Installation de Clerk dans l'application Next.js

Après avoir installé Clerk, nous devons ajouter notre clé d'API à notre projet. Cela peut être fait en plaçant un fichier .env.local à la racine de votre projet Next.js. Les paramètres suivants doivent être inclus dans le fichier .env.local :

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<votre clé publique Clerk>
CLERK_SECRET_KEY=<votre clé secrète Clerk>

Pour obtenir les clés publique et secrète de Clerk, rendez-vous sur le tableau de bord de Clerk.

Accédez au répertoire de votre projet Next.js et exécutez la commande suivante pour installer Clerk :

yarn add @clerk/nextjs

Ajout du fournisseur d'authentification Clerk

// app/layout.jsx
import { ClerkProvider } from "@clerk/nextjs"

const Layout = ({ children }) => {
  return (
    <ClerkProvider>
      <html lang="fr">
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  )
}

export default Layout

Protection de vos routes d'application

Une fois que vous avez intégré Clerk dans votre application, la prochaine étape consiste à déterminer quelles pages doivent être accessibles au public et lesquelles nécessitent une authentification utilisateur. Cela est accompli en créant un fichier middleware.js à la racine du projet et en spécifiant quelles routes sont publiques et lesquelles sont privées. Dans notre scénario spécifique, nous voulons que seule la page d'accueil soit accessible au public, tandis que les autres pages doivent rester cachées jusqu'à ce que l'utilisateur se connecte à l'application. Vous pouvez y parvenir en mettant en œuvre le code suivant :

// Protège l'accès à toutes les pages sauf la page d'accueil

import { authMiddleware } from "@clerk/nextjs"

export default authMiddleware({
  publicRoutes: ["/"],
})

export const config = {
  matcher: ["/((?!.*..*|_next).*)", "/", "/(api|trpc)(.*)"],
}

Inscription et Connexion de l'Utilisateur

Clerk propose une gamme de composants pré-construits qui simplifient l'intégration de la connexion, de l'inscription et d'autres fonctionnalités de gestion des utilisateurs dans votre application Next.js.

Pour ce faire, accédez au dossier "app" de votre projet et créez deux nouveaux répertoires nommés "sign-up" et "sign-in". Dans chacun de ces répertoires, vous devez insérer le code correspondant aux fonctionnalités d'inscription et de connexion.

Connexion

// app/sign-in/pages.js

import { SignIn } from "@clerk/nextjs"

const signIn = () => {
  return (
    <div>
      <SignIn />
    </div>
  )
}

export default signIn

Inscription

// app/sign-in/pages.js

// app/sign-up/pages.js

import { SignUp } from "@clerk/nextjs"

const signUp = () => {
  return (
    <div>
      <SignUp />
    </div>
  )
}

export default signUp

Pour accéder à la page de connexion de Clerk à l'adresse http://localhost:3000/sign-in, assurez-vous d'avoir correctement configuré votre application Next.js avec Clerk et que les routes sont correctement configurées.

Assurez-vous des étapes suivantes :

Vérifiez que Clerk a été intégré dans votre application Next.js.
Assurez-vous d'avoir une route ou une page configurée pour /sign-in dans votre application Next.js.
Vérifiez que les composants de connexion de Clerk sont correctement importés et rendus sur la page /sign-in.

Si toutes ces étapes ont été réalisées avec succès, en visitant http://localhost:3000/sign-in dans votre navigateur web, vous devriez charger la page de connexion de Clerk comme prévu.

Signé et Profil de l'Utilisateur

Clerk propose une collection de composants spécifiques destinés à simplifier la gestion de l'authentification des utilisateurs dans notre application, notamment "SignedIn," "SignedOut," et "RedirectToSignIn".

Ces composants nous permettent d'intégrer facilement la fonctionnalité d'authentification dans d'autres composants.

Avec eux, nous pouvons contrôler dynamiquement le comportement de notre application en fonction du statut de connexion de l'utilisateur. De plus, nous avons la flexibilité de déclencher une redirection vers la page de connexion lorsque cela est nécessaire. Ces composants améliorent considérablement notre capacité à gérer de manière transparente l'authentification des utilisateurs dans notre application.

Créez un nouveau composant appelé Navbar :

// components/navbar.jsx
const Navbar = () => {
  return (
    <nav>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <SignInButton mode="modal">
          <button className="rounded border border-gray-400 px-3 py-0.5">
            Se connecter
          </button>
        </SignInButton>
      </SignedOut>
    </nav>
  )
}

export default Navbar

Mettez à jour votre app/layout.jsx :

<ClerkProvider>
  <html lang="fr">
    <body className={inter.className}>
      <Navbar />
      {children}
    </body>
  </html>
</ClerkProvider>

Maintenant, dans votre dossier "app", créez une nouvelle page appelée "protected" que vous ne devriez pas pouvoir accéder si vous n'êtes pas connecté :

// app/protected/page.jsx
import React from "react"

function page() {
  return <div>protégé</div>
}

export default page

Dans cet article, nous avons discuté de la manière dont Clerk simplifie l'authentification dans Next.js, en offrant une connexion, une inscription et une déconnexion sécurisées. Nous avons exploré la gestion des événements d'authentification et la protection de nos routes.

Vous devriez maintenant disposer d'une application entièrement authentifiée, comme illustré ci-dessous :

Clerk est un module d'authentification robuste qui offre de nombreux avantages aux applications Next.js. Ces avantages comprennent :

Facilité d'utilisation : Clerk s'intègre bien avec les applications Next.js et est simple à utiliser.
Sécurité : Clerk est une bibliothèque d'authentification conforme aux normes de sécurité acceptées.
Flexibilité : Clerk peut être adapté pour répondre aux besoins uniques de votre application, car il est adaptable. Je vous recommande de jeter un coup d'œil à Clerk si vous recherchez une bibliothèque d'authentification conviviale, fiable et adaptable pour votre application Next.js. Vous pouvez obtenir davantage de détails sur le site web de Clerk pour la documentation et les ressources. Voici le lien vers le projet final sur Github.

GITHUB

Share on TwitterShare on Linkedin