Implémentation d'une connexion sans mot de passe dans un projet Next.js 13 avec NextAuth.js et Prisma

Cet article approfondira les étapes nécessaires pour implémenter l'authentification sans mot de passe dans un projet Next.js à l'aide de la bibliothèque NextAuth.js. De plus, nous utiliserons Prisma comme adaptateur de base de données pour y parvenir.

L'authentification sans mot de passe est une approche innovante qui élimine le besoin de combinaisons traditionnelles de nom d'utilisateur et de mot de passe. Au lieu de cela, il offre une expérience d'authentification plus sécurisée et conviviale en tirant parti de méthodes alternatives, telles que des liens magiques par courrier électronique ou des codes à usage unique envoyés par SMS.

Next.js est un framework React populaire pour la création d'applications Web, connu pour sa simplicité et son efficacité. Nous pouvons facilement intégrer l'authentification sans mot de passe dans notre projet en intégrant NextAuth.js, une bibliothèque d'authentification conçue explicitement pour Next.js.

De plus, nous compterons sur Prisma comme adaptateur de base de données. Prisma est un outil ORM (Object-Relational Mapping) qui simplifie les interactions avec les bases de données en fournissant un générateur de requêtes de type sécurisé et généré automatiquement. Il prend en charge plusieurs bases de données, notamment PostgreSQL, MySQL et SQLite, ce qui en fait un choix polyvalent pour notre implémentation d'authentification.

Tout au long de ce guide, nous fournirons des instructions étape par étape sur la façon d'installer et de configurer l'authentification sans mot de passe à l'aide de NextAuth.js dans un projet Next.js. Nous démontrerons également comment intégrer Prisma comme adaptateur de base de données, permettant une communication transparente entre notre application et la base de données.

Nous allons maintenant explorer comment améliorer la sécurité et l'expérience utilisateur de notre application Next.js en utilisant l'authentification sans mot de passe et les capacités de NextAuth.js et Prisma. Commençons.

Qu'est-ce que la connexion sans mot de passe ?

La connexion sans mot de passe, comme son nom l'indique, est une méthode d'authentification qui supprime le besoin de combinaisons traditionnelles de nom d'utilisateur et de mot de passe. Au lieu de cela, il utilise des moyens alternatifs pour vérifier l'identité d'un utilisateur, tels que des liens magiques par courrier électronique ou des codes à usage unique envoyés par SMS. Cette approche offre plusieurs avantages par rapport aux méthodes de connexion traditionnelles. Premièrement, cela élimine le risque de vulnérabilités liées aux mots de passe, telles que les mots de passe faibles ou la réutilisation des mots de passe. Deuxièmement, il simplifie l'expérience utilisateur en supprimant le besoin de mémoriser et de saisir des mots de passe complexes.

Pour mettre en œuvre une connexion sans mot de passe à l'aide de liens magiques de courrier électronique ou de codes à usage unique, nous avons besoin d'un serveur SMTP (Simple Mail Transfer Protocol).

Un serveur SMTP est responsable de l'envoi des e-mails sur Internet. Dans le cadre d'une authentification sans mot de passe, le serveur envoie les liens magiques ou codes à usage unique à l'adresse email enregistrée de l'utilisateur. Lorsqu'un utilisateur lance le processus de connexion, un e-mail contenant un lien ou un code unique est généré et envoyé à l'utilisateur. L'utilisateur peut alors cliquer sur le lien ou saisir le code pour terminer le processus d'authentification. Le serveur SMTP agit comme intermédiaire entre l'application et le service de messagerie de l'utilisateur, garantissant une livraison sécurisée et fiable des messages d'authentification. En utilisant un serveur SMTP, nous pouvons mettre en œuvre efficacement une connexion sans mot de passe et offrir une expérience d'authentification transparente à nos utilisateurs.

Commençons!

Tout d’abord, nous devons générer un nouveau projet Next.js. Pour ce faire, utilisez la commande suivante :

npx create-next-app@latest

Une fois que vous avez généré le nouveau projet Next.js, vous pouvez accéder au répertoire du projet nouvellement créé.

En changeant le répertoire en projet, vous pourrez explorer les différents dossiers et fichiers qui composent la structure du projet Next.js.

Comprendre la structure du projet est essentiel pour un développement et une organisation efficaces de votre application Next.js. En vous référant à la documentation officielle, vous pouvez tirer parti des meilleures pratiques et mieux comprendre comment structurer votre code, gérer les actifs statiques et créer des composants réutilisables.

Installer nos dépendances

Pour activer l'authentification sans mot de passe dans notre projet Next.js à l'aide de NextAuth.js, nous devons d'abord installer les dépendances requises. Exécutez la commande yarn add next-auth nodemailer pour ajouter NextAuth.js et nodemailer à notre projet.

Nous utilisons spécifiquement nodemailer car il s'agit d'un module populaire et polyvalent pour envoyer des e-mails dans Node.js. Il constitue un moyen simple et fiable d'envoyer par courrier électronique les liens magiques ou les codes à usage unique requis pour l'authentification sans mot de passe.

Ensuite, intégrons Prisma comme adaptateur de base de données. Commencez par installer les packages Prisma requis à l'aide de la commande :

yarn add @prisma/client @next-auth/prisma-adapter

Ces packages permettront une communication transparente entre notre application Next.js et la base de données. De plus, nous devons également installer Prisma en tant que dépendance de développement en exécutant :

yarn add prisma --dev

Cette étape garantit que nous disposons des outils nécessaires pour travailler avec Prisma et son générateur de requêtes généré automatiquement pour les interactions avec les bases de données.

En installant ces dépendances, nous avons jeté les bases de la mise en œuvre de l'authentification sans mot de passe à l'aide de NextAuth.js et Prisma dans notre projet Next.js.

Configurer Prisma

Il est nécessaire de configurer Prisma et d'avoir accès à un serveur SMTP pour l'envoi d'e-mails pour utiliser l'authentification sans mot de passe dans un projet Next.js. Ce didacticiel vous guidera dans l'utilisation de votre compte Gmail personnel pour envoyer des e-mails. Suivez les étapes ci-dessous pour une configuration réussie.

Tout d'abord, créez un dossier "prisma" à la racine de votre projet. Ce dossier hébergera les fichiers et configurations liés à Prisma. Ensuite, dans le dossier "prisma", créez un nouveau fichier appelé "schema.prisma". Le fichier schéma définit la structure de votre base de données et sert de modèle pour le code généré automatiquement par Prisma.

Si le concept de schéma vous est nouveau, ne vous inquiétez pas ! Un schéma spécifie les tables, les champs, les relations et les contraintes de votre base de données. Pour créer le schéma, vous pouvez vous référer à la documentation officielle de NextAuth.js et copier l'exemple de schéma qui y est fourni. Ce schéma est un point de départ et peut être personnalisé pour répondre aux exigences de votre application.

Créez ensuite un fichier ".env" à la racine de votre projet. Ce fichier stockera vos variables d'environnement, y compris les configurations nécessaires pour votre serveur SMTP. Pour remplir le fichier ".env", vous pouvez copier les exemples de configurations fournis ci-dessous. Assurez-vous de saisir les informations d'identification de votre compte Gmail et les paramètres du serveur SMTP dans les champs correspondants.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

En suivant ces étapes, vous aurez configuré Prisma et configuré le serveur SMTP pour l'envoi d'e-mails à l'aide de votre compte Gmail. Ces préparations sont cruciales pour activer le flux d'authentification sans mot de passe dans votre projet Next.js.

Note

Vous devez créer un mot de passe d'application si vous avez activé l'authentification à deux facteurs (2FA) pour votre compte Google. Un mot de passe d'application est un mot de passe distinct qui permet d'accéder à des applications ou à des appareils particuliers sans exposer le mot de passe de votre compte Google principal. Suivez les instructions ci-dessous pour générer un mot de passe d'application.

1. Accédez à la page des paramètres du compte Google en visitant https://myaccount.google.com/.

2. Accédez à l'onglet « Sécurité ».

3. Recherchez la section « 2FA », faites défiler vers le bas et sélectionnez « Mots de passe d'application ».

4. Vous serez peut-être invité à saisir à nouveau le mot de passe de votre compte Google pour une vérification de sécurité.

5. Dans la liste déroulante « Sélectionner l'application », choisissez « Mail » ou « Autre (nom personnalisé) ».

• Si l'option "Mail" est disponible, sélectionnez-la.

• Si l'option « Mail » n'est pas disponible, choisissez « Autre (nom personnalisé) » et fournissez un nom personnalisé pour l'identification.

6. Cliquez sur le bouton « Générer » ou « Générer le mot de passe ».

7. Google générera pour vous un mot de passe d'application unique. Notez ce mot de passe, car nous l'utiliserons dans notre application pour l'envoi d'e-mails.

8. Utilisez ce mot de passe d'application généré dans la configuration du serveur SMTP de votre application Next.js. Remplacez le mot de passe de votre compte Gmail habituel par ce mot de passe d'application.

Cela garantit que même avec 2FA activé, votre application peut envoyer des e-mails en toute sécurité à l'aide de votre compte Gmail.

PostgreSQL utilisant Supabase

Avant de pouvoir continuer, nous devons nous assurer que la base de données de notre projet fonctionne correctement. Pour cette démo, nous vous recommandons d'utiliser la base de données Supabase PostgreSQL. Pour démarrer avec un projet Supabase et obtenir l'URL de connexion PostgreSQL, suivez ces étapes :

1. Accédez à supabase.io et connectez-vous à votre compte ou créez-en un nouveau si vous n'en avez pas.

2. Une fois connecté, vous serez dirigé vers le tableau de bord Supabase. Cliquez sur "Créer un nouveau projet" pour démarrer un nouveau projet.

3. Nommez votre projet et sélectionnez la région la plus proche de votre emplacement actuel. N'oubliez pas votre mot de passe, vous en aurez besoin plus tard.

4. Une fois le projet créé, vous serez redirigé vers le tableau de bord du projet. Cliquez sur "Base de données" dans la barre latérale gauche pour accéder aux paramètres de la base de données.

5. Dans la section "Base de données", vous trouverez l'URL de connexion PostgreSQL. Cette URL contient toutes les informations nécessaires pour se connecter à la base de données de votre projet Supabase, telles que l'hôte, le port, le nom de la base de données, le nom d'utilisateur et le mot de passe. Il sera affiché au format : postgres://<username>:<password>@<host>:<port>/<database>

6. Copiez l'URL de connexion PostgreSQL et conservez-la en sécurité. Vous en aurez besoin pour établir une connexion entre votre application et la base de données Supabase.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Maintenant, assurons-nous de générer notre client Prisma en exécutant la commande suivante : `npx prisma generate`.

Le client Prisma est un client de base de données généré automatiquement en fonction de votre schéma. Par défaut, le client Prisma est généré dans le dossier `node_modules/.prisma/client`, mais vous pouvez [spécifier un emplacement personnalisé si nécessaire](https://www.prisma.io/docs/concepts/components/prisma-client/travailleravecprismaclient/générer-prisma-client#utiliser-un-chemin-de-sortie-personnalisé).

Ensuite, nous procéderons à la création de notre migration initiale. Exécutez la commande suivante : `npx prisma migrate dev`. Vous pouvez donner à chaque migration un nom descriptif.

Dans Prisma, une migration est une méthode utilisée pour gérer les ajustements du schéma de votre base de données au fil du temps. Il vous permet de modifier la structure de votre base de données sans perdre aucune donnée préexistante. Ces migrations sont cruciales car elles garantissent que votre schéma de base de données s'aligne sur les besoins de votre application à mesure qu'ils évoluent. Avec l'outil de migration de Prisma, vous pouvez facilement versionner, appliquer et annuler ces modifications, simplifiant ainsi le travail d'équipe et conservant un schéma de base de données uniforme dans différents environnements.

Désormais, si nous vérifions notre base de données, nous pourrons voir les modifications apportées à notre migration initiale reflétées dans la section base de données.

En effectuant la migration initiale, nous avons appliqué les modifications à notre schéma de base de données telles que définies dans le script de migration.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Configuration de NextAuthJS avec l'adaptateur Prisma

Dans une application Next.js, NextAuthJS utilise la route fourre-tout, également appelée route générique ou route de secours, pour gérer les demandes d'authentification. Cet itinéraire dynamique est défini à l'aide du système de routage basé sur des fichiers dans Next.js.

Créez un dossier nommé "**api**" dans votre répertoire "**app**". Dans le dossier "**api**", créez un dossier "**auth**". Dans le dossier "**auth**", créez une route fourre-tout appelée "**[...nextauth]**" en tant que dossier. Enfin, créez un fichier "**route.ts**" dans le dossier de route fourre-tout et ajoutez le code suivant.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Dans le fichier de route fourre-tout, nous importons la bibliothèque NextAuthJS et configurons les options d'authentification, les fournisseurs et les configurations. NextAuthJS gère l'analyse des demandes entrantes, identifie l'action d'authentification nécessaire et exécute la logique appropriée selon les options spécifiées.

Le code fourni configure NextAuthJS avec l'adaptateur Prisma pour l'authentification à l'aide d'un fournisseur de messagerie. Expliquons chaque affirmation :

1. Importations :

• PrismaAdapter et PrismaClient sont importés de @next-auth/prisma-adapter et @prisma/client, respectivement. Ceux-ci sont utilisés pour intégrer NextAuthJS à Prisma.

• NextAuth est importé de next-auth et est la bibliothèque principale pour gérer l'authentification dans les applications Next.js.

• EmailProvider est importé de next-auth/providers/email et est utilisé comme fournisseur pour l'authentification par courrier électronique.

2. Configuration de Prisma :

• Une instance de PrismaClient est créée en utilisant new PrismaClient(). Cela permet la communication avec l'ORM Prisma et la base de données sous-jacente.

3. Options d'authentification :

• authOptions est un objet qui définit la configuration de l'authentification dans NextAuthJS.

• La propriété adapter est définie sur PrismaAdapter(prisma), qui connecte NextAuthJS à Prisma à l'aide de PrismaAdapter.

• Le tableau providers contient un seul fournisseur, EmailProvider. Il est configuré avec les détails du serveur de messagerie nécessaires et l'adresse e-mail from.

4. Gestionnaire NextAuth :

• La fonction NextAuth est appelée avec authOptions comme argument, créant un gestionnaire d'authentification.

• Le gestionnaire résultant est affecté à la variable handler.

5. Exporter :

• handler est exporté sous GET et POST pour prendre en charge les requêtes HTTP GET et POST.

Maintenant, exécutons notre serveur et testons la fonctionnalité. Tout d'abord, démarrez le serveur de développement en exécutant yarn dev. Ensuite, ouvrez votre navigateur et visitez « localhost:3000 » pour voir l'application en action.

Pour tester la fonctionnalité d'authentification, visitez localhost:3000/api/auth/signin. Ici, vous découvrirez la magie de NextAuthJS. Le modèle fourni inclus avec NextAuthJS permet un processus de connexion sans mot de passe. Pour l'essayer, entrez une adresse e-mail valide.

Une fois l'e-mail soumis, NextAuthJS gérera le processus en coulisses. Tout d’abord, il générera et enverra un e-mail contenant un lien de connexion unique à l’adresse e-mail fournie. Ce lien sert de jeton d'authentification sécurisé pour l'utilisateur. Ensuite, lorsque l'utilisateur clique sur le lien, NextAuthJS validera le token et authentifiera l'utilisateur.

Cette fonctionnalité de connexion sans mot de passe améliore la sécurité et l'expérience utilisateur en éliminant le besoin de mots de passe. Les utilisateurs peuvent accéder rapidement et en toute sécurité à leurs comptes en cliquant simplement sur le lien reçu par e-mail. Il rationalise le processus de connexion et réduit le risque de vulnérabilités liées aux mots de passe.

Lorsqu'un utilisateur clique sur l'e-mail de connexion généré par NextAuthJS et est authentifié, plusieurs actions ont lieu en coulisses pour faciliter une expérience de connexion transparente.

1. Validation du lien e-mail : lorsque l'utilisateur clique sur le lien de connexion, NextAuthJS valide le jeton d'authentification intégré dans le lien. Ce jeton garantit la sécurité et l'intégrité du processus d'authentification.

2. Processus d'authentification : une fois la validation réussie du jeton, NextAuthJS identifie l'utilisateur et termine le processus d'authentification. Il vérifie l'identité de l'utilisateur en fonction du jeton fourni et de tout facteur d'authentification supplémentaire configuré, tel que l'authentification multifacteur.

3. Création de session : après une authentification réussie, NextAuthJS crée une session pour l'utilisateur. Une session est un état persistant qui représente le statut d'authentification de l'utilisateur et lui permet d'accéder aux ressources protégées sans avoir à se réauthentifier pour les demandes ultérieures.

4. Cookies : NextAuthJS définit des cookies sécurisés HTTP uniquement dans le navigateur de l'utilisateur pour gérer la session. Ces cookies jouent un rôle crucial dans le maintien de l'état d'authentification de l'utilisateur lors de plusieurs requêtes. Les cookies incluent généralement un cookie de session et éventuellement un cookie de jeton d'actualisation, en fonction de la configuration d'authentification.

1. Cookie de session : le cookie de session contient un identifiant de session (par exemple, une chaîne générée aléatoirement) qui identifie de manière unique la session de l'utilisateur. Cela aide NextAuthJS à associer les demandes ultérieures à la session et au bon utilisateur.

2. Cookie de jeton CSRF : NextAuthJS définit un cookie de jeton CSRF (Cross-Site Request Forgery) pour se protéger contre les attaques CSRF. Le jeton CSRF est une valeur unique générée par NextAuthJS et stockée dans le cookie. Il permet de valider et de vérifier l'authenticité des demandes ultérieures formulées par l'utilisateur. Lorsque l'utilisateur soumet des formulaires ou effectue des actions sensibles, le jeton CSRF est inclus dans les en-têtes ou le corps de la demande pour garantir que la demande provient de la session de l'utilisateur authentifié et non d'une source malveillante.

3. Cookie d'URL de rappel : NextAuthJS définit un cookie d'URL de rappel pour stocker l'URL d'origine à laquelle l'utilisateur tentait d'accéder avant d'être redirigé vers le flux d'authentification. Ce cookie aide NextAuthJS à rediriger l'utilisateur vers la page souhaitée après une authentification réussie. Il garantit une expérience utilisateur fluide en renvoyant de manière transparente l'utilisateur à sa destination prévue au lieu d'une page de destination générique.

En utilisant des cookies sécurisés HTTP uniquement, NextAuthJS garantit que l'état d'authentification reste sécurisé et inviolable. Les cookies sont cryptés, empêchant tout accès non autorisé ou toute modification par des acteurs malveillants.

Excellent travail pour intégrer avec succès NextAuthJS avec l'adaptateur Prisma dans votre application Next.js ! Avec la facilité et l'adaptabilité offertes par NextAuthJS, vous disposez désormais d'un système d'authentification fiable.

Consultez le référentiel GitHub lié ci-dessous pour le code utilisé dans ce guide : https://github.com/codelabsacademy/next-auth-guide.

Mais pourquoi s'arrêter là ? Si vous êtes passionné par le développement Web et souhaitez améliorer vos compétences, pensez à postuler à notre bootcamp de développement Web. Notre bootcamp offre une expérience d'apprentissage complète, vous dotant des connaissances et des compétences pratiques nécessaires pour exceller dans le monde dynamique du développement Web.

En rejoignant notre bootcamp, vous acquerrez une expérience pratique des technologies de pointe, travaillerez sur des projets du monde réel et recevrez des conseils personnalisés d'experts du secteur. Que vous soyez débutant ou développeur expérimenté, notre programme est conçu pour faire passer vos compétences en développement Web au niveau supérieur.

Ne manquez pas cette opportunité d'accélérer votre parcours de développement Web. Postulez dès aujourd'hui pour notre bootcamp de développement Web et libérez votre plein potentiel dans le domaine passionnant du développement Web. Ensemble, créons des expériences numériques étonnantes et façonnons l'avenir du Web.