1. Configuration et utilisation de NextAuth.js dans Next.js 13 Répertoire de l'application
Dans ce tutoriel, je vous guiderai en configurant l'authentification dans votre répertoire d'application Next.js 13 à l'aide de nextauth.js. Il convient de noter que même si nous utilisons le package NextAuth dans ce tutoriel, vous utilisez peut-être le package Auth.js au moment où vous lisez ceci, car les bibliothèques sont désormais interchangeables.
Sujets couverts
- Configurer le projet suivant.js 13
- Configuration de l'itinéraire de l'API Auth Next
- Créer des boutons réutilisables
- Trois façons d'obtenir les données de session NextAuth
- Obtenez la session dans un composant de serveur
- Obtenez la session dans une voie API
- Obtenez la session dans un composant client
- Intégrer une base de données
- Configuration de PostgreSQL
- Configuration de Prisma Orm
- Implémentez le code d'authentification NextAuth
- Stockez les clés personnalisées dans le JWT
- Différentes façons de protéger les itinéraires
- Protection d'itinéraire côté client
- Protection d'itinéraire côté serveur
- Protégez une voie API
- Protection d'itinéraire du middleware
- Implémentez la logique d'enregistrement du compte
- Créer la route API pour enregistrer les utilisateurs
- Créer le composant de formulaire
- Créer la page d'enregistrement du compte
Lisez l'article entier ici: https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/
2. Next.js - Utilisez des pages de connexion et d'inscription personnalisées pour nextAuth.js
Dans cet article, vous apprendrez à intégrer des pages de connexion et d'inscription personnalisées avec NextAuth.js dans le nouveau répertoire d'application Next.js 13. Je vais supposer que vous avez déjà configuré NextAuth dans votre projet et que vous ne cherchez qu'un moyen d'intégrer vos pages de connexion et d'inscription personnalisées.
Sujets couverts
- Exécutez le projet NextAuth sur votre ordinateur
- Testez le projet NextAuth
- Enregistrer un compte
- Connectez-vous à votre compte
- Accéder à une page protégée
- Configurer le point de terminaison de l'API NextAuth
- Créer la page de connexion personnalisée
- Créer le formulaire de connexion
- Créer la page de connexion
- Créer la page d'inscription personnalisée
- Créer le formulaire d'inscription
- Créer la page d'enregistrement du compte
- Créer le gestionnaire d'API pour l'enregistrement du compte
- Conclusion
Lisez l'intégralité de l'article ici: https://codevoweb.com/nextjs-use-custom-login-and-signup-pages-for-nextauth-js/
3. Next.js - Ajoutez Google et GitHub Oauth2 en utilisant NextAuth.js
Dans cet article, vous apprendrez à intégrer les fournisseurs de Google et GitHub OAuth avec NextAuth.js dans le nouveau répertoire d'application Next.js 13. Il convient de noter que j'utilise une demande de traction spécifique recommandée par l'équipe NextAuth qui est compatible avec le nouveau répertoire d'application Next.js 13.
Sujets couverts
- Exécutez le projet NextAuth localement
- Explorez le flux GitHub et Google Oauth
- Connectez-vous avec Google Oauth2
- Connectez-vous avec Github oauth
- Configurer NextAuth avec Google et GitHub Oauth
- Implémentez le google et github oauth2
- Créer le formulaire côté client
- Créer le composant de la page côté serveur
- Comment générer les informations d'identification Google OAuth2
- Comment générer les informations d'identification GitHub Oauth
- Conclusion
Lisez l'article entier ici: https://codevoweb.com/nextjs-add-google-and-github-oauth2-using-nextauth-js/
