TUTO NextAuth avec NextJS 14 + Prisma - Guide De A à Z en 2024
Vložit
- čas přidán 26. 07. 2024
- Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs + Les Schémas NextAuth !
▶ TIMECODES
00:00 - Introduction
01:28 - Compréhension NextAuth
10:28 - Setup NextAuth
16:55 - Setup Github
36:42 - Setup Google
42:44 - Setup Email
48:01 - Outro
▶ VIDÉO
Aujourd'hui, on se plonge dans l'intégration de NextAuth dans NextJS 13. On va couvrir les providers Github, Google et Email pour vous offrir une authentification complète et sécurisée. Si vous cherchez à ajouter une couche d'authentification à votre projet NextJS, ce tuto est fait pour vous.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
💬 Mon Discord communautaire : codelynx.dev/discord
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners - Věda a technologie
Super vidéo. Ta façon de faire et d'expliquer est top. Impatient de voir tes futures vidéos !
Merci beaucuop !
Super taff, merci pour les efforts que tu fais par rapport aux feedback !!
J'ai regardé la 1ère vidéo et celle-là est encore plus qualitative et plus claire que la 1ère avec les schémas.
N'hésite pas à ajouter des schémas pour tes futures vidéos, je pense qu'il y a une majorité de gens qui comprennent mieux avec.
Continue comme ça. Tu va les avoir les 10 000 abonnées.
KEEP FIGHTING!!!💪
C'est cool que qqn se rendens compte du travail fait par rapport au feedback.
Hey Melvynx, merci pour ta video, c'est au top ça complète bien l'authentification que tu proposes déjà, c'est top !
merci beaucoup !
Tes tutos sont vraiment intéréssants 🔔 activée
merci !
Oui, super, c'est parfait, merci ! Je balance depuis des semaines entre Remix et Next.js, Remix est un petit bijoux, mais Next.js est aussi vraiment top ! Avec plus de ressources...
Merci beaucoup ça fait plaisir !
Magnifique, merci. ♥
Merci à toi
Merci pour ce tuto ;-) , je viens de mettre en place nextAuth sur mon app, c'est bien foutu ce truc !!!
merci !
Merci Melvyn. Toujours aussi bien
Merci !
Merci pour ta vidéo!
Le type prisma est surement le mauvais
Top tuto, merci beaucoup !!
merci au top !
Parfait, très cool
yeah !
Thank you 🎉
merci !
C'est Top
trop
Les amis, poru ceux qui ont l'erreur L'erreur "Unknown argument provider_providerAccountId. Did you mean providerId_providerAccountId?" ça vient pas de vous mais de la doc next-auth... j'ai perdu pas mal de temps mais la solution est sur le github de next auth
merci !
c'st top et digeste
merci
merci
merci à toi aussi
Super vidéo. Merci encore. Dis est ce que tu peux faire celui avec le email et password avec gestion d'erreur dans le front du formulaire
Ah oui mais ça prends des plombes xDD
@@melvynxdev 😅😅
Salut @Melvyn! Merci beaucoup pour tes vidéos :). J'ai rencontré un problème lors de l'utilisation de NextAuth avec des credentials. Bien que l'authentification réussisse, je ne vois aucune entrée dans les deux tables, c'est-à-dire 'session' et 'account', même si j'ai correctement configuré l'adaptateur avec adapter: PrismaAdapter(prisma) dans mes options. As-tu une idée de ce qui pourrait causer ce comportement? Merci d'avance pour ton aide!
j'ai fais une version 2
@@melvynxdev ah super ! Peux-tu commenter le lien ? Merci beaucoup 😊
Je vais aller un peu plus loin dans le tuto pour ceux qui souhaitent utiliser le nouveau routing.
Vous créez un fichier/api/auth/[...nextauth]/route.ts
Et dans ce fichier vous mettez :
export const authConfig = {
providers : [
GoogleProvider({
clientId: googleId,
clientSecret: googleSecret
})
],
adapter: PrismaAdapter(prisma),
} satisfies NextAuthOptions
const handler = NextAuth(authConfig)
export { handler as GET, handler as POST }
Ca diffère un peu du code de la vidéo mais au moins vous saurez comment faire !
Ah oui merci, j'ai fais une nouvelle vidéo pour ça récemmenbt
Top la vidéo!
2 questions :
Comment faire une page signup ? (credential email/password avec un credential id signin et un 2eme avec id signup ?)
Tu sais si on peut disable le csrf token ? Si par exemple je veux pouvoir utiliser next comme backend pour une app react native ?
Merci :)
Hello, non j'avoue que le CredendielProvider c'est relou
@@melvynxdev je confirme ! Très relou mais ça marche
Peux-tu nous faire un tuto pour des gros projets?
Je travaille pour une très grosse société et on a séparé le front du backend (expressjs).
Comment on peux implementer NextAuth sur le frontend avec ce backend expressjs ?
Il faut créer ton propre adapter ou connecte ta db à NextAuth mais c’est pas forcément le meilleur cas d’usage
Est-ce qu'on peut utilisé NextAuth si on utilise des API REST externe fait par une backend ?
c'est gaéères on va idre
Encore une fois, je vois pas comment brancher une API REST PHP avec NextAuth ^^'
Est-il seulement possible de créer une authentification custom pour brancher du Laravel / Symfony ?
Bah c’est pas trop le but de nextaurh. Il t’offre justement l auth
Salut Melvyn. J'espère que tu vas bien. Tu pourrais m'indiquer quel thème de couleur tu utilise pour ton éditeur dans cette vidéo ? Et aussi, quelle est la police d'écriture que tu utilises pour l'éditeur ?
D'avance merci
Dracula ou Github Dark
C’est quoi l’extension pour que quand tu écris ça trouve directement ce que tu dois mettre prcq tu codes mega rapidement avec ça
hello, c'est github copilot
Next auth a t il upgradé pour être compatible avec next 14 ?
14 ne change rien donc oui
16:25 pourquoi pas mongoDB ? j'aime bien moi :D
j'aime po
Pour setup apple il faut absolument être un utilisateur apple ?
Hello, non je ne crois pas ?
tu vas mettre à disposition repo du projet ?@@melvynxdev
un fake smtp server que j'utilise :
> pnpm install -g maildev
> maildev
(ouvre un server smtp port 1025 et la page web port 1080)
ah yes merci, je savais pas très cool !!
POUCE BLou😍E!
Merci !
le premier like est a moi
tu es le boss !
Session 😂
sion