Comment ajouter SSO à une application Next.js à l’aide de Clerk

L’authentification unique permet aux utilisateurs de s’authentifier en toute sécurité auprès de plusieurs applications et sites Web en utilisant un seul ensemble d’informations d’identification. Dans ce didacticiel, vous apprendrez à implémenter SSO dans Next.js.

L’authentification unique (SSO) est un schéma d’authentification qui permet aux utilisateurs de s’authentifier auprès de plusieurs applications à l’aide d’un seul ensemble d’informations d’identification (par exemple, e-mail et mot de passe). Vous connaissez peut-être SSO si vous utilisez des services Google tels que Docs, Sheets, Drive, etc. Vous vous connectez à Google Docs et lorsque vous visitez Drive ou Sheets, vous êtes automatiquement connecté.

Comment cela marche-t-il?

L’authentification unique est réalisée en ayant une centrale identité/authentification serveur via lequel l’authentification est effectuée, la session est partagée avec d’autres domaines/services sans demander à plusieurs reprises les informations d’identification de connexion. Chaque service/domaine recevra un jeton ou un cookie séparé lorsque les utilisateurs seront authentifiés. Les utilisateurs n’auront pas besoin de ressaisir leurs identifiants de connexion tant qu’il existe une session authentifiée sur le serveur d’identité.

SSO pour l’application Next.js utilisant Clerk

Vous pouvez utiliser des protocoles comme OpenID Connect, OAuth et SAML pour le flux SSO. Dans ce tutoriel, nous allons implémenter SSO en utilisant Greffieret utilisez GitHub comme serveur OAuth qui authentifiera les utilisateurs auprès de l’application.

« Pourquoi Greffier ? » tu peux demander. Clerk est un fournisseur d’authentification en tant que service qui fournit des composants et une API faciles à utiliser pour l’authentification et la gestion des utilisateurs. Il est livré avec des SDK et des composants d’interface utilisateur que vous pouvez facilement intégrer dans vos applications, et la mise en œuvre de SSO à l’aide du flux OAuth est un processus simple.

Nous allons créer une application Next.js de base à titre d’exemple, mais les connaissances peuvent être transférées vers de grandes applications Next.js.

Configuration d’une application de commis

Commençons par créer une application Clerk. Une application Clerk est un moyen d’isoler les données et la configuration de votre application/service spécifique.

Pour créer l’application, allez dans le Tableau de bord du greffier et cliquez sur le Ajouter une application carte. Un sous-ensemble des options d’authentification disponibles vous sera présenté (vous pourrez les modifier ultérieurement) :

Entrez le nom de votre application et cliquez sur le Montre plus bouton dans le Connexions sociales afin de voir les autres fournisseurs de SSO disponibles.

Désélectionnez Google et sélectionnez GitHub, puis cliquez sur le Finir bouton en bas de la page. L’application est créée et vous êtes redirigé vers sa page d’accueil.

En haut de la page, vous devriez voir un menu intitulé « Instance », qui peut être utilisé pour basculer entre l’environnement de développement et de production de l’application. Nous travaillerons sur l’environnement de développement.

L’étape suivante consiste à connecter Clerk à GitHub en tant qu’application OAuth. Clerk utilise un identifiant OAuth partagé préconfiguré et un URI de redirection en mode développement, mais cela est facultatif. Vous devrez ajouter les informations d’identification OAuth et rediriger l’URI dans l’environnement de production lorsque vous en aurez besoin. Vous allez utiliser l’environnement de développement pour ce didacticiel, mais vous utiliserez vos propres informations d’identification GitHub OAuth.

Créer une application GitHub OAuth

Vous pouvez créer et enregistrer une application GitHub OAuth sous votre compte personnel ou sous toute organisation à laquelle vous avez un accès administratif. Suivez ces instructions pour créer une application OAuth.

1. Dans le coin supérieur droit de n’importe quelle page GitHub, cliquez sur votre photo de profil, puis sur Paramètres.
2. Dans la barre latérale gauche, cliquez sur <> Paramètres du développeur.
3. Dans la barre latérale gauche, cliquez sur Applications OAuth.
4. Clique le Nouvelle application OAuth bouton (ou le Enregistrer une nouvelle application bouton).
5. Entrez un nom pour votre application dans le Nom de l’application zone de saisie.
6. Tapez l’URL complète du site Web de votre application dans le champ Page d’accueil URL zone de saisie.
7. Entrez une URL aléatoire comme URL de rappel d’autorisation. Vous le mettrez à jour ultérieurement avec l’URL que vous obtiendrez ultérieurement à partir de votre tableau de bord de commis.
8. Clique le Inscrivez-vous bouton pour terminer le processus.

Vous serez redirigé vers la page d’informations générales de votre application OAuth. Copiez le identité du client pour une utilisation ultérieure. Vous avez également besoin d’un secret client. Clique le Générer un nouveau secret client bouton pour en générer un.

Copiez le secret dans un éditeur de texte afin de pouvoir le retrouver lorsque vous en aurez besoin dans les sections à venir.

Configurer une connexion GitHub sur Clerk

Maintenant que vous avez l’ID client et le secret de votre application GitHub OAuth, nous pouvons configurer Clerk pour qu’il utilise ces informations d’identification pour l’authentification. Pour ce faire, accédez au tableau de bord du commis et suivez ces instructions :

1. Naviguez vers le Authentification d’utilisateur page de la barre latérale.
2. Cliquez sur Connexions sociales.
3. Faites défiler vers le bas jusqu’à ce que vous trouviez GitHub, puis cliquez sur l’icône des paramètres.

4. Un modal devrait apparaître avec quelques options de configuration. Basculer sur le Utiliser des informations d’identification personnalisées option et entrez vos informations d’identification client OAuth.

5. Un formulaire s’affichera avec des champs pour l’ID client et le secret. Copiez et collez l’ID client et le secret client de votre application OAuth dans les champs respectifs.

6. Copiez l’URL dans le URI de redirection autorisée car vous devez mettre à jour l’URL de rappel dans les paramètres de votre application GitHub OAuth.

7. Clique le Sauvegarder bouton pour enregistrer les modifications.

Les modifications sont enregistrées et vous pouvez utiliser votre application GitHub OAuth pour l’authentification. Le dernier bit est de mettre à jour le URL de rappel d’autorisation sur GitHub. Pour ce faire, ouvrez l’onglet de l’application GitHub OAuth de la section précédente. Faites défiler jusqu’au champ de saisie pour URL de rappel d’autorisation.

Copiez et collez le URI de redirection autorisée vous avez copié lors de la configuration de la connexion de GitHub sur Clerk et cliquez sur Sauvegarder pour enregistrer les modifications.

Intégrer Clerk à Next.js

Nous allons intégrer Clerk avec Next.js dans cette section. L’accent est mis sur le flux SSO et sur la façon d’utiliser quelques-uns des composants de l’interface utilisateur fournis par Clerk.

Ouvrez votre terminal et créez une nouvelle application Next.js à l’aide de la commande npx create-next-app@latest clerk-nextjs --use-npm --js --eslint. Cela devrait créer une nouvelle application Next.js 13.

Une fois l’application prête, vous devez installer le SDK Next.js de Clerk. Cela vous donne accès aux composants, hooks et assistants de Clerk’s React pour les routes d’API, le rendu côté serveur et le middleware de périphérie. Exécutez la commande cd clerk-nextjs && npm install @clerk/nextjs pour installer le SDK.

Définir les variables d’environnement

L’étape suivante consiste à ajouter des variables d’environnement qui seront utilisées par le SDK. Pour ce faire, ajoutez un nouveau fichier nommé env.local au projet. Ajoutez ensuite les variables d’environnement ci-dessous au fichier.

NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.resolved.yeti-53.lcl.dev
CLERK_API_KEY=test_XXXXXXXX
CLERK_JWT_KEY=XXXXXXXXXX

Pour obtenir les secrets respectifs, rendez-vous sur Clés API page dans le tableau de bord de l’employé. Vous trouverez différentes sections pour les différents secrets. Copiez-les et mettez à jour les valeurs dans env.local.

Maintenant que vous avez les variables d’environnement, l’étape suivante consiste à ajouter le <ClerkProvider /> composant à la racine de l’application.

Configurer

Le <ClerkProvider /> Le composant est utilisé pour fournir des informations sur la session Clerk et le contexte utilisateur à votre application. Vous pouvez accéder à ces données via des crochets ou des composants fournis par le SDK.

Configurons l’application <ClerkProvider />.

Ouvrez le pages/_app.js déposer. Ajoutez l’instruction d’importation suivante.

import { ClerkProvider } from "@clerk/nextjs";

Remplacez ensuite l’instruction return dans le composant par ce qui suit :

return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );

Le contenu du fichier doit être similaire à l’extrait de code ci-dessous :

import { ClerkProvider } from "@clerk/nextjs";

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;

Si vous utilisez la nouvelle mise en page de l’application dans Next 13, vous pouvez faire quelque chose de similaire à ce qui suit :

import React from "react"
import { ClerkProvider } from "@clerk/nextjs/app-beta";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <head>
          <title>Next.js 13 with Clerk</title>
        </head>
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

Authentification des utilisateurs

Passons maintenant à la partie intéressante, authentifier les utilisateurs. 😎 Nous allons utiliser certains des composants d’interface utilisateur fournis par le @greffier/nextjs emballer. Vous pouvez les styliser comme vous le souhaitez, mais pour les besoins de ce didacticiel, nous utiliserons le style par défaut.

Vous n’êtes pas limité à l’utilisation des composants fournis. Vous pouvez également créer vos propres composants d’interface utilisateur et utiliser les hooks fournis dans le SDK. Vous pouvez en savoir plus sur l’utilisation des crochets dans le SDK documents de référence.

Commençons par l’authentification des utilisateurs. 👩🏽‍💻🔐

Nous allons ajouter un bouton à la page d’accueil, qui affichera un modal de connexion lorsqu’il sera cliqué. Une fois l’utilisateur connecté, la page affichera le contenu de la grille qui sera masqué pour les utilisateurs non authentifiés.

Pour y parvenir, ouvrez le pages/index.js fichier et ajoutez cette déclaration d’importation :

import { SignedIn, SignedOut, SignInButton, SignOutButton } from "@clerk/nextjs";

Après la ligne 24, ajoutez le JSX ci-dessous :

<SignedOut>
   <SignInButton mode="modal"></SignInButton>
</SignedOut>

Le <SignedOut /> Le composant affichera ses enfants si l’utilisateur n’est pas connecté. Dans ce scénario, nous montrons le <SignInButton /> qui affichera un modal de connexion à l’utilisateur.

Nous souhaitons afficher les éléments de la grille lorsque l’utilisateur est connecté. Pour cela, enveloppez le <div /> sur les lignes 29 à 59 avec le <SignedIn /> composant:

<SignedIn>
   <SignOutButton /></SignOutButton>
   <div className={styles.grid}>
        <a href="https://nextjs.org/docs" className={styles.card}>
          <h2>Documentation &rarr;</h2>
          <p>Find in-depth information about Next.js features and API.</p>
        </a>

        
   </div>
</SignedIn>

C’est tout ce dont nous avons besoin pour l’application. Vous pouvez essayer l’application en exécutant npm run devouvrir hôte local : 300 dans votre navigateur et essayez l’application.

C’est un Wrap

Ouah! N’est-ce pas une approche très simple pour que l’authentification fonctionne avec votre application ? Vous n’avez pas à vous soucier des cookies ou de l’utilisation de la bibliothèque Next-Auth. Le greffier vous donne tout ce dont vous avez besoin dès la sortie de la boîte.

Nous avons utilisé les composants de l’interface utilisateur dans ce didacticiel, mais vous pouvez faire de même avec vos composants d’interface utilisateur personnalisés et les crochets React du SDK Clerk. Vous pouvez en savoir plus sur l’utilisation des crochets dans le SDK documents de référence.

Vous pouvez trouver le code complété sur GitHub si vous souhaitez cloner et exécuter l’application vous-même.