Site icon Blog ARC Optimizer

Utilisation de GitHub et NextAuth.js pour l’authentification unique dans Next.js

Utilisation de GitHub et NextAuth.js pour l’authentification unique dans Next.js


Découvrez comment implémenter l’authentification unique avec GitHub et OAuth dans Next.js pour une gestion simple et sécurisée de l’authentification.

Next.js prend en charge plusieurs modèles d’authentification, chacun conçu pour différents cas d’utilisation. Cet article vous guidera tout au long du processus de mise en œuvre de l’authentification unique (SSO) à l’aide de GitHub en tant que fournisseur OAuth, et SuivantAuth.js comme bibliothèque pour gérer les scénarios d’authentification facilement et de manière sécurisée.

J’ai écrit sur le SSO dans Next.js utilisant Clerk. Dans cet article, j’ai expliqué ce qu’est le SSO et comment il peut être bénéfique pour vous et vos utilisateurs. Dans cet article, je vais ignorer l’explication de SSO et passer directement à vous montrer comment utiliser GitHub et NextAuth.js pour l’authentification. L’exemple que vous verrez couvrira quelques cas d’utilisation de base tels que :

  • ajout d’un bouton de connexion et d’un itinéraire pour gérer l’authentification
  • protéger une page afin qu’elle ne soit visible que par les utilisateurs authentifiés
  • récupérer la session d’un utilisateur côté client et côté serveur
  • déconnecter les utilisateurs du système

Cela dit, allons-y.

Création d’une application GitHub OAuth

Puisque nous utilisons GitHub comme fournisseur, nous devons d’abord le créer. Vous pouvez créer et enregistrer une application GitHub OAuth sous votre compte ou sous n’importe quelle organisation à laquelle vous disposez d’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 cliquez 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 candidature bouton).
  5. Entrez un nom pour votre application dans le champ Nom de l’application zone de saisie.
  6. Saisissez l’URL complète du site Web de votre application dans le champ Page d’accueil URL zone de saisie.
  7. Entrer hôte local : 3000/auth/github/rappel URL comme URL de rappel d’autorisation.
  8. Clique le Enregistrer une demande 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.

Créons maintenant notre application Next.js 👩🏽‍💻

Configurer une application Next.js avec NextAuth.js

Créez une application Next.js à l’aide de la commande npx create-next-app. Ajoutez-y ensuite le package next-auth à l’aide de la commande npm i next-auth.

Commençons par ajouter des variables d’environnement. Ajouter un nouveau fichier env.local à votre application suivante. Ajoutez-y ensuite les variables suivantes :

GITHUB_ID=CLIENT_ID
GITHUB_SECRET=CLIENT_SECRET
NEXTAUTH_SECRET=b84a26fghcda3f883e01

Le GITHUB_ID et GITHUB_SECRET représentent l’ID client et le secret de votre application GitHub OAuth, alors assurez-vous d’utiliser les bonnes valeurs que vous avez obtenues dans la section précédente. Le NEXTAUTH_SECRET est utilisé pour chiffrer le JWT NextAuth.js et pour hacher jetons de vérification des e-mails. C’est la valeur par défaut pour le secret choix dans SuivantAuth et Intergiciel.

Pour configurer NextAuth.js pour un projet, créez un fichier appelé [...nextauth].js dans pages/api/auth.

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    
  ],
};

export default NextAuth(authOptions);

Celui-ci contient le gestionnaire de route dynamique pour NextAuth.js ainsi que ses options de configuration (c’est-à-dire, authOptions). Si vous disposez d’autres fournisseurs OAuth (par exemple, Twitter), vous pouvez les ajouter au providers tableau.

Cette route API traitera toutes les requêtes vers api/auth/*qui inclut les URL de rappel, de connexion et de déconnexion.

Si vous utilisez Suivant.js 13.2 ou supérieur avec le nouveau App Router (app/), vous pouvez initialiser la configuration à l’aide du nouveau Gestionnaires de routes en suivant notre guide.

Configurer l’état de session partagée

Pour pouvoir utiliser le useSession() hook, vous devrez exposer le contexte de la session via le <SessionProvider />. Cela doit être fait au niveau supérieur de votre application, c’est-à-dire au pages/_app.jsx .

Ouvrir pages/_app.jsx et mettez-le à jour comme suit :

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

En utilisant le <SessionProvider> permet des instances de useSession() pour partager l’objet de session entre les composants, en utilisant Contexte de réaction sous la capuche. Il s’occupe également de maintenir la session à jour et synchronisée entre les onglets/fenêtres.

Ajouter un composant de connexion/déconnexion

Ajoutons un composant qui affichera un bouton de déconnexion si l’utilisateur est authentifié, et un bouton de connexion s’il ne l’est pas. Ajouter un nouveau fichier components/auth-btn.jsx et collez-y l’extrait de code ci-dessous.

import { useSession, signIn, signOut } from "next-auth/react";

export default function Component() {
  const { data: session } = useSession();
  if (session) {
    return (
      <>
        Signed in as {session.user.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return (
    <>
      Not signed in &nbsp;&nbsp;
      <button onClick={() => signIn("github")}>Sign in</button>
    </>
  );
}

Ici, nous utilisons le useSession() hook pour vérifier si l’utilisateur est connecté. Vous pouvez utiliser le useSession() hook depuis n’importe où dans votre application, à l’exception du code côté serveur (par exemple, getServerSideProps et les routes API). Le signOut() La fonction est utilisée pour déconnecter l’utilisateur, tandis que la fonction signIn() La fonction est utilisée pour les connecter. Dans notre cas, nous avons passé sign("github") le nom du fournisseur, ce qui l’amène à s’authentifier directement auprès de ce fournisseur. Sinon, cela redirigera l’utilisateur vers la page de connexion.

Rendus ce composant sur la page d’accueil. Ouvrir pages/index.js et mettez à jour le paragraphe de la ligne 20 avec le balisage suivant.

<p className={styles.description}>
  <LogIn />
</p>

Ensuite, en haut de ce fichier, ajoutez l’instruction d’importation suivante :

import LogIn from "../components/auth-btn";

La page d’accueil accueillera un utilisateur connecté et lui présentera un bouton pour se déconnecter. Pour les utilisateurs non authentifiés, ils recevront un bouton pour se connecter.

Nous avons configuré NextAuth.js et un moyen de vous connecter et de vous déconnecter de la page d’accueil. Nous pouvons utiliser le useSession hook que vous avez vu pour vérifier si un utilisateur est authentifié dans les composants React. Laissez-moi vous montrer comment protéger une page côté serveur.

Ajouter une page protégée

Nous allons créer une page qui ne devrait être accessible qu’aux utilisateurs authentifiés. Pour cela, ajoutez un nouveau fichier pages/protected.js et collez-y le code ci-dessous.

import { authOptions } from "./api/auth/[...nextauth]";
import Image from "next/image";
import { getServerSession } from "next-auth/next";
import { signOut } from "next-auth/react";
import styles from "../styles/Home.module.css";

export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res, authOptions);

  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin",
        permanent: false,
      },
    };
  }

  return {
    props: {
      user: session.user,
    },
  };
}

export default function Protected({ user }) {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome <b>{user.name}</b>
        </h1>

        <p className={styles.description}>This is a protected route</p>
        <p>
          <button onClick={() => signOut()}>Sign out</button>
        </p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Cette page vérifie si l’utilisateur est authentifié côté serveur. Il le fait en utilisant le getServerSession() fonction. S’ils sont authentifiés, la page est affichée avec quelques informations utilisateur de base et un bouton de déconnexion. Sinon, ils sont redirigés vers /api/auth/signin qui est la page de connexion intégrée de NextAuth.

Les pages intégrées de NextAuth sont utilisées par défaut lorsqu’aucune n’est configurée. Ce didacticiel utilise les pages fournies avec NextAuth.js.

Démo

Nous avons tout le code dont nous avons besoin, alors essayons l’application. Ouvrez votre terminal et exécutez npm run dev et ouvert hôte local : 3000 dans votre navigateur.

Voilà! Les utilisateurs peuvent se connecter et se déconnecter de l’application, et vous pouvez récupérer leurs données de profil depuis leur session.

Qu’en est-il des erreurs d’authentification avec GitHub ?

Alors, que se passe-t-il lorsque l’utilisateur n’autorise pas votre application OAuth à accéder à ses données ?

Comme vous pouvez le voir dans l’enregistrement ci-dessus, l’utilisateur est redirigé vers la page de connexion par défaut de NextAuth, avec le code d’erreur transmis dans la chaîne de requête sous la forme ?error=Callback. Cette page sait comment gérer une telle réponse. Dans ce cas, affichez un message d’erreur et demandez à l’utilisateur d’essayer avec un autre compte.

Pour plus d’informations sur les types d’erreurs envoyées à la page de connexion, consultez le Documentation NextAuth.

Pages d’authentification personnalisées

Nous nous sommes appuyés sur les pages intégrées de NextAuth pour cet article, mais il est possible d’utiliser vos propres pages et d’indiquer à NextAuth l’itinéraire vers ces pages. Vous pouvez spécifier les URL à utiliser pour les pages de connexion, de déconnexion et d’erreur personnalisées, dans le pages options lors de l’instanciation du NextAuth objet.

Les options NextAuth ressembleraient à ce qui suit si vous choisissez d’utiliser des pages personnalisées :

export const authOptions = {
  
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    
  ],
  
  pages: {
    signIn: '/signin',
    signOut: '/signout',
    error: '/auth-error', 
    }
};

Voir la documentation du option pages pour plus d’informations.

Conclure

Passons en revue ce que nous avons couvert dans cet article.

Nous avons créé une application Next.js qui utilise GitHub pour vérifier et authentifier les utilisateurs. Pour cela, nous avons créé une application GitHub OAuth et utilisé NextAuth.js pour gérer les exigences d’authentification dans le code.

Nous avons créé une route API qui gère la réponse de rappel de GitHub et avons également utilisé les pages intégrées de NextAuth.js pour la connexion. Nous avons brièvement abordé la gestion des erreurs et l’utilisation de pages personnalisées.

Bien que nous n’ayons pas abordé les rappels dans NextAuth, vous pouvez les utiliser pour implémenter des contrôles d’accès sans base de données et pour les intégrer à des bases de données ou des API externes. Vous pouvez en savoir plus à leur sujet dans le documentation sur les rappels.

Vous pouvez trouver le code de l’exemple sur GitHub.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile