No video

Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma

  Рет қаралды 79,566

Cand Dev

Cand Dev

Күн бұрын

Пікірлер: 162
@ozgursar5386
@ozgursar5386 11 ай бұрын
I think this is one of the most comprehensive tutorials that guides how to implement credentials provider using Prisma. Thank you!
@gubatenkov
@gubatenkov 9 ай бұрын
Dude, this is the only one usefull tutorial about next-auth with prisma db, that i found on the internet !! Keep doing what you do
@assad.rajab-2
@assad.rajab-2 3 ай бұрын
Yeah, litterly i have been searching for long time and i did not find anything, yet by accident i discovered this tutorial.
@assad.rajab-2
@assad.rajab-2 3 ай бұрын
Thank you very much, I have been looking for a long time for a tutorial that shows how to really create such a system with usernames and passwords. I even stopped a project because I couldn't find a solution for it. Now I have my passion back thanks to you.
@CandDev
@CandDev 2 ай бұрын
Let's get back to coding 🧑🏻‍💻. Thanks for the tip
@foxhunt9305
@foxhunt9305 11 ай бұрын
Great Video! I am a React developer and I just started messing around with Next.js and this project really helped me gain valuable knowledge about how Next.js works and the different tools available in the framework. One tip though: for security reasons it is better to have the id in the prisma model as a string and then set the default to uuid(), that way even if you dont have route protection someone cant just change the end of the route from number 1 to 2 for example and log in as the admin. instead the route will have something like this: 8624d47d-ceb0-4288-bd0a-876bb68985f0. which is a universally unique identifier that once generated can never be re-created so there is no chance of route manipulation in that way
@lydiabylicka4175
@lydiabylicka4175 4 ай бұрын
I am halfway through the tutorial, encountered many errors (not the creator's fault - updates, installation, etc.) and I can say with certainty this is one of those tutorials I really want to follow through, it is so informative and just MAKES SENSE! Big kudos to you, @Cand Dev :)
@alwanassyauqi6191
@alwanassyauqi6191 25 күн бұрын
This is the tutorial I've been looking for!
@Ecki107
@Ecki107 7 ай бұрын
The redirect after login at 43:00 can now also be implemented directly in the signIn-call. Just set redirect: true and provide a callbackUrl to which to redirect the user to.
@atifwattoo1719
@atifwattoo1719 4 ай бұрын
That is the best tutorial on KZfaq, related to authentication in Nextjs. Bro,, please make a complete course related to Nextjs in detail
@cyrusrohail9243
@cyrusrohail9243 10 ай бұрын
I looked up multiple tutorials. Only yours seemed to help me out of this hell hole called next-auth. Thank you!
@preciousnwaoha3123
@preciousnwaoha3123 2 ай бұрын
I cannot remember any other coding tutorial that was as well done in terms of following up as this one. And I have been on this for years.
@user-ev4sq2io1c
@user-ev4sq2io1c 9 ай бұрын
Too good to believe, session are being introduced so well, why such good youtuber only have few people watch, what a lost for them.
@Noe_Sourdes
@Noe_Sourdes 8 ай бұрын
Have you released the next part of this series, incorporating Google authentication implementation? The series has been excellent so far! :)
@Ms_Mariga
@Ms_Mariga 9 ай бұрын
Love Love Love this video. So simple and very informative. I followed along and learnt a lot. Thank you for this 😊..... Now the "Like so" is stuck to my head 😅
@pomiusu
@pomiusu 4 ай бұрын
this is the best nextjs tutorial I've seen, I always find difficult on following tutorials but this is the first that really helped me and I learned a lot of useful things, great work and nice didactic!!
@loggerino7331
@loggerino7331 6 ай бұрын
Great video dude. Your video is straight to the point unlike other youtubers who pad out their tutorials with unnecessary CSS stylings.
@davidabolade4708
@davidabolade4708 4 ай бұрын
Brilliant, just brilliant
@OnlyJavascript
@OnlyJavascript Жыл бұрын
awesome. subbed. please continue this series. like role based auth. email verification. forget and reset password.
@nikhilsharma2421
@nikhilsharma2421 7 ай бұрын
Sir, this tutorial was really helpful you covered all the points. One more thing, I want to ask you can you please make a tutorial in which you're using both the credentials provider and also the google provider together. You can make that video in continue to this playlist.
@enghimanshu
@enghimanshu Ай бұрын
thansk alot i was crying from last night😭
@CandDev
@CandDev Ай бұрын
I'm glad I could help 😁
@dalestewart
@dalestewart Жыл бұрын
Another professional tutorial!👍
@Furki4_4
@Furki4_4 9 ай бұрын
Thank you Cand! I was struggling to extend the session user data and i got the solution.
@user-bv5ne5sj5i
@user-bv5ne5sj5i Жыл бұрын
This actually is awesome. you make it so simple Thank you. I would love you to make another video on role based access on top of this. 👌
@CandDev
@CandDev Жыл бұрын
Thanks 🤍
@myfavoriteai
@myfavoriteai 8 ай бұрын
"Fantastic! This video is like discovering a treasure trove. It's filled with invaluable insights. I'm convinced he's the best lecturer I've ever come across. Thank you so much. Your assistance has been instrumental in helping me create a practical, real-world product.
@georgelopez6557
@georgelopez6557 8 ай бұрын
Have you released the next part to this series, implementing google auth? Great series so far! :)
@CandDev
@CandDev 8 ай бұрын
I have already uploaded that, but KZfaq just deleted that video 😥.
@jami4588
@jami4588 8 ай бұрын
@@CandDev upload it again we really need it
@UdaySagar
@UdaySagar 8 ай бұрын
@@CandDev can u pls try to upload the same video again ?
@mounir101
@mounir101 9 ай бұрын
Amazing video! all your videos are amazing and this one is clearly seen at another level. Thank u bro so much for charing.
@Amitsarker
@Amitsarker 8 ай бұрын
Excellent tutorial! Thank you
@matiasleal7323
@matiasleal7323 10 ай бұрын
github whit final code please
@bilalfaisalshaikh9165
@bilalfaisalshaikh9165 4 ай бұрын
thanks a lot for this tutorial
@muhammedgulcu
@muhammedgulcu 11 ай бұрын
You know how to write code very well and you explain it. Thank you very much 😎🙌👌
@MustafaHasanKhan
@MustafaHasanKhan 11 ай бұрын
Hey, can you please give the final code Github repo. Thanks.
@Glissadist
@Glissadist 10 ай бұрын
This series is awesome.
@AnanthaGnaneswar21MIS702
@AnanthaGnaneswar21MIS702 2 күн бұрын
Bro is doing god's work. Thank you!!!
@thebeep4427
@thebeep4427 Жыл бұрын
Sub so fast , great videos series bro , thank you so much !
@CandDev
@CandDev Жыл бұрын
Thanks for the sub! 🤍
@dalestewart
@dalestewart Жыл бұрын
I love using PostgreSQL and Prisma
@nguyenat6454
@nguyenat6454 11 ай бұрын
i really love how you give me the folder template to code and how you explain really really love the video. i hope u will make more videos about tricks and nextjs project 😊😊
@CandDev
@CandDev 11 ай бұрын
and i hope you always support me, with like and comment 😁
@nguyenat6454
@nguyenat6454 11 ай бұрын
@@CandDev i hope you will make a project with nextauth and other technologies ❤❤
@echovisionlab
@echovisionlab 10 ай бұрын
Great tutorial, inspired me a lot for making a tutorial.. :)
@aiscop
@aiscop 8 ай бұрын
Exactly what I was looking for🎉
@nobody2937
@nobody2937 11 ай бұрын
Detailed and clear explaination...
@fernandocosta3307
@fernandocosta3307 3 ай бұрын
Thank you man. I'm from 🇧🇷
@CandDev
@CandDev 2 ай бұрын
Olá, Brasil 👋🏻
@brandonbailey4491
@brandonbailey4491 Жыл бұрын
so what we if want to use a genuine backend for this instead? do we still need to use the next /api approach and then reach out to our api from there or can we just use fetch and session tokens in components?
@abaydotdev
@abaydotdev 7 ай бұрын
great video mate!
@sebastiancastillo3560
@sebastiancastillo3560 Жыл бұрын
Amazing tutorial!! thanks so much🤩!
@Colt-tr6ec
@Colt-tr6ec 10 ай бұрын
amazing tutorial. Thank you!
@ichigokuro3986
@ichigokuro3986 9 ай бұрын
itsthe final code available? my signIn() doesnt seem to execute the autorize function and i have no idea what im doing wrong. great tutorial btw!
@leesheppard7524
@leesheppard7524 4 ай бұрын
Thanks for the video!
@amogelangmoatswi1918
@amogelangmoatswi1918 10 ай бұрын
am stuck at 44:51.. It doesn't redirect me to the Admin page even when the credentials are correct. please help
@user-yo9eu5wg9n
@user-yo9eu5wg9n 10 ай бұрын
я так сделал: auth.ts export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), session: { strategy: 'jwt' }, pages: { signIn: "/sign-in" }, providers: [ CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email", placeholder: "jsmith" }, password: { label: "Password", type: "password" } }, async authorize(credentials) { if (!credentials?.email || !credentials?.password) { return null } const existingUser = await prisma.user.findUnique({ where: { email: credentials?.email } }) if (!existingUser) { return null } const passwordMatch = await compare(credentials.password, existingUser.password) if(!passwordMatch){ return null } return { id: `${existingUser.id}`, username: existingUser.username, email: existingUser.email } } }) ], callbacks: { session: ({ session, token }) => { console.log("Session Callback", { session, token }); return { ...session, user: { ...session.user, id: token.id, randomKey: token.randomKey, }, }; }, jwt: ({ token, user }) => { console.log("JWT Callback", { token, user }); if (user) { const u = user as unknown as any; return { ...token, id: u.id, randomKey: u.randomKey, }; } return token; }, }, }
@omalaydrinks1847
@omalaydrinks1847 10 ай бұрын
You are not alone. If you have solved it, let me know what you did to solve this problem.
@yoann590
@yoann590 3 күн бұрын
@@user-yo9eu5wg9n thanks u are a legend !
@justin9494
@justin9494 11 ай бұрын
you're much better than lamadev
@wowwolif9380
@wowwolif9380 10 ай бұрын
I am new with both channels, but in which way he's better if you can explain
@kokusei9211
@kokusei9211 11 ай бұрын
awesome tutorial very complete and easy to understand
@kitebeachinnbeachinn2888
@kitebeachinnbeachinn2888 Жыл бұрын
Awesome mate!
@amannambisan6870
@amannambisan6870 9 ай бұрын
Great video!
@TheWizardyGuy
@TheWizardyGuy 8 ай бұрын
Excellent tutorial, dude..! But, is there a tip to make this role based authentication? Btw don't forget to post nextauth authentication using google credentials.. 😊
@diogomaia6636
@diogomaia6636 10 ай бұрын
I'm getting a "Warning: Prop `htmlFor` did not match. Server: ":R2irb6qcq:-form-item" Client: ":Rabdcr9j9:-form-item" error when trying to log in. Tried to debug it but can't find the issue. Any help? ^^'
@Osmanity
@Osmanity 10 ай бұрын
got the same did you solve?
@lxespadatv2342
@lxespadatv2342 10 ай бұрын
this htmlFor is just a warning from 1 of the shadcn components hes using in the starter template.. but i dont think thats causing your login error.. u manage to fix the error?
@Osmanity
@Osmanity 10 ай бұрын
@@lxespadatv2342 took some time but manage to fix it actually :)
@Osmanity
@Osmanity 10 ай бұрын
to fix this warning just look for my comment somewhere in the comments section, I think it was that you need to update nextjs & eslint
@Osmanity
@Osmanity 10 ай бұрын
was very very happy until there was no source code in description... your provide it in other videos, please put it, awesome content
@brayanjpm
@brayanjpm 4 ай бұрын
So useful bruh
@qwertyzxvf6561
@qwertyzxvf6561 8 ай бұрын
amazing video!
@ELMlKO
@ELMlKO 11 ай бұрын
at 43:17 when I click login it logs undefined and reloads even after I put redirect false and preventDefault
@samuelpalacios9661
@samuelpalacios9661 11 ай бұрын
x2
@samuelpalacios9661
@samuelpalacios9661 11 ай бұрын
Hey, I fixed it, i added the session provider hook from next-auth on the layout.tsx, also i add an try/catch block on the authorize in the authOptions
@codewithhaider7190
@codewithhaider7190 10 ай бұрын
@@samuelpalacios9661 can you share the code i facing same issue
@DeveloperMan_
@DeveloperMan_ 5 ай бұрын
this is the type of youtubers i hide from my friends lol like hiding good shows
@Engineer6nine
@Engineer6nine 5 ай бұрын
I am not able to singin.. it is redirecting me back to the home page.. Showing warning about NEXTAUTH_URL and NEXTAUTH_SECRETKEY... someone please help
@nizomsidiq3
@nizomsidiq3 11 ай бұрын
Thanks for the video! but how to implement throttling in the register API? and how to guard the pages to always redirect to login if user is unauthenticated?
@harmiklathiya3625
@harmiklathiya3625 4 ай бұрын
Where is the Signup flow ?
@nami-san4642
@nami-san4642 11 күн бұрын
25:02 if did use axios most efficient and less code!! over all i really like video
@sylevan4116
@sylevan4116 29 күн бұрын
Hi Cand. When I run npx prisma migrate dev --name init. The terminal stands still and doesn't give any response. please help me!
@yoann590
@yoann590 3 күн бұрын
Hey i have the same issue , did u find an answear for this problem ?
@tomich20
@tomich20 8 ай бұрын
good video, it would be awesome if you create another branch on your project witht he final code!
@adheichsan
@adheichsan 9 ай бұрын
I have an error in production mode in the sign out section, because when I click sign out, it still calls localhost, how can I make it not localhost anymore? 🙏🙏🙏🙏🙏
@ImamNurArifinHA
@ImamNurArifinHA Жыл бұрын
nicee tutorial 👍
@mahmoodalfayoumi3429
@mahmoodalfayoumi3429 10 ай бұрын
Great video! I was wondering if you had any idea how to make this expandable for multiple different logins. I am working on having two login pages with seperate admin pages, storing sign up data in two different prisma tables and using those to sign in. I managed to get the sign up post request to work, but my sign-in to redirect to the new admin page is causing me trouble that routes to me an error page. Any ideas?
@lucasgonzalez8313
@lucasgonzalez8313 11 ай бұрын
Hey bro! nice tutorial! I'm stuck with the signIn part, because I'm having an issue after submit it redirect to /api/auth/error. Can you please help me with that? thanks :)
@Osmanity
@Osmanity 10 ай бұрын
did you solve it i have the same issue and are desperate to solve it
@Osmanity
@Osmanity 10 ай бұрын
I solve the redirect issue by chainging to the following code: " const signInData = await signIn("credentials", { email: values.email, password: values.password, redirect: false, }); " in the signInForm.tsx file
@Osmanity
@Osmanity 10 ай бұрын
+ other thing just look for my comment in the comment section of the video
@Thikondrius
@Thikondrius 10 ай бұрын
Thank you for the video :) Can I ask where we can find the repo will the full code please ?
@Bobbaru
@Bobbaru 25 күн бұрын
respect
@bale_1696
@bale_1696 10 ай бұрын
Thanks you!!!!
@omalaydrinks1847
@omalaydrinks1847 10 ай бұрын
Is there any one who had challenge moving pass 44:56 - getting to admin page. If you did, i would like to know why it happened and how to solved it
@Jdsg1234
@Jdsg1234 10 ай бұрын
Yes, add the following lines of code: In the SignInForm.tsx file, add a 'redirect: false' in the onSubmit function: so it would look like this: const onSubmit = async (values: z.infer) => { const signInData = await signIn("credentials", { email: values.email, password: values.password, redirect: false, }); if (signInData?.error) { console.log("error----", signInData.error); } else { router.push("/admin"); } };
@HadrianiOfficial
@HadrianiOfficial 9 ай бұрын
I tried myself as well, it does redirect me to the admin page, but it stays for 1 second and then it re-routes me back to the sign-in page. Putting the redirect: false, it will end up remaining on the sign in page, it doesn't lead me at all to the admin page. My issue is that on Application/Cookies, I don't get the "session" next-auth cookie....I only have the callback and the csrf-token@@Jdsg1234
@AleksandrNeo
@AleksandrNeo 10 ай бұрын
Thanks a lot! And how we can use API session? In others api`s reqests?
@user-oq3wt9rz8h
@user-oq3wt9rz8h 5 ай бұрын
Is this example basically safe to use in real website (with some additions)?
@alibabadulan9911
@alibabadulan9911 9 ай бұрын
I wonder if you have any tutor with progress bar with shadcn ui in future?
@odogru77
@odogru77 10 ай бұрын
When I try to Login with the account I signed up for, I can't continue due to a 401 unauthorized error in the console. I guess it depends on the Credentials provider.
@user-yo9eu5wg9n
@user-yo9eu5wg9n 10 ай бұрын
я так сделал: в файл auth.ts добавил callback ], callbacks: { session: ({ session, token }) => { console.log("Session Callback", { session, token }); return { ...session, user: { ...session.user, id: token.id, randomKey: token.randomKey, }, }; }, jwt: ({ token, user }) => { console.log("JWT Callback", { token, user }); if (user) { const u = user as unknown as any; return { ...token, id: u.id, randomKey: u.randomKey, }; } return token; }, }, }
@codestudio497
@codestudio497 9 ай бұрын
thank you , eveything is cool , but in my vscode everything is broken even the next auth page is updated , i can't get the default sign in page
@ilahazs
@ilahazs 8 ай бұрын
Terimakasih bro ilmunya
@CandDev
@CandDev 8 ай бұрын
makasih juga bro udah mampir
@adelmae9037
@adelmae9037 4 ай бұрын
you did not include the api/ folders in your github repo why is that ?
@amar5751
@amar5751 9 ай бұрын
Hi can you add remember me functionality where my credentials Store in local storage and password should be encrypted...
@AfaqAhmed-p9w
@AfaqAhmed-p9w Ай бұрын
hy dear , i want to create otp section when user is register and login. please create otp verification video
@mendaxassange4465
@mendaxassange4465 8 ай бұрын
can we have a video showing login + google auth + 2factor auth at the same time...?
@aguud
@aguud 8 ай бұрын
nice video
@abylaikhanbaidullayev743
@abylaikhanbaidullayev743 9 ай бұрын
Thank you for content, could you please explain where are you using "export const authOptions: NextAuthOptions"? I can't find it where are you using
@CandDev
@CandDev 9 ай бұрын
i use that on my [...nextauth].js, app/page.tsx, navbar, and many more.
@yoann590
@yoann590 3 күн бұрын
Hey Candid, i have an issue when i run npx prisma migrate dev --name init, the terminal stands still and doesn't give any response. Can you help me ?
@yoann590
@yoann590 3 күн бұрын
I find the solution, the default port seems to not work (6543), i switched it on 5432 and its working now !
@someoneelse4195
@someoneelse4195 11 ай бұрын
After how much time a session is expired and can we manually set an expiry for session
@muhardinhasim
@muhardinhasim Жыл бұрын
kalau error Unexpected token } in JSON at position 121 kenapa ya ? padahal kodingnya secara step by step udah sama, udah coba search juga katanya minta downgrade efect di windows tapi coba di linux juga sama kenapa ya ?
@muhardinhasim
@muhardinhasim Жыл бұрын
btw, aq kira bule, english keren hahaha
@CandDev
@CandDev Жыл бұрын
kemungkinan penempatan kurung kurawal yg salah, atau hilang.
@CandDev
@CandDev Жыл бұрын
masih belibet bro hahaha
@muhardinhasim
@muhardinhasim 11 ай бұрын
udah bisa thanks
@vitya.obolonsky
@vitya.obolonsky 10 ай бұрын
Next-auth does not work with custom forms
@andrsh9388
@andrsh9388 Жыл бұрын
Good❤
@desuchanz4956
@desuchanz4956 10 ай бұрын
stuck in signin authentication it says bad request
@Grishopping
@Grishopping Жыл бұрын
discord ???? You won a new subscriber from Venezuela.... my English is bad but you explain very well.... I'm understanding Att. Jose Grillo
@CandDev
@CandDev Жыл бұрын
Thank you, my English is also not very good 😁, happy coding 👋🏻
@xijicaijing
@xijicaijing 7 ай бұрын
Why the GitHub Repo codes not completly ?
@gaminghub600
@gaminghub600 11 ай бұрын
Can I use Next Auth in React Native Android Application??
@yuumeko_yt
@yuumeko_yt 10 ай бұрын
Can you update your source code please? there is no api folder and prisma folder. Just only forms?!
@jami4588
@jami4588 8 ай бұрын
i cant configure the nextauth credentials provider i tried everything but i am failing again and again even though i am correctly returning the user inside authorize and also i gave made my submit function correct everything is correct i dont know why is it still undefined the result that signIn is givng undefined always i do not know why is that happeing wasted ours in it searched it everywhere i logged the values of my email and pass that was correct but result from sign in is undeifned PLEASE HELP
@CandDev
@CandDev 8 ай бұрын
Please send me your code, and I will check it.
@TheMorizzy
@TheMorizzy 8 ай бұрын
I had this same issue, try adding redirect: false to the object in the signIn function
@zuriagainigo7401
@zuriagainigo7401 8 ай бұрын
Did you manage to fix it?
@AmanKumar-eg5rc
@AmanKumar-eg5rc 11 ай бұрын
In next js 13 app directory next auth we can not authenticate user without using prisma?
@CandDev
@CandDev 10 ай бұрын
Yes, of course
@yoggyprastya
@yoggyprastya 8 ай бұрын
dude, how to implement this code for rest-api ?... regards..
@AkashLayal
@AkashLayal Жыл бұрын
Can we host this on hostinger premium webhosting
@nomxxn
@nomxxn 9 ай бұрын
I dont get it, when did you create the forms and ui lmao, am i meant to create my own form or?
@dailag19
@dailag19 9 ай бұрын
thank you on palestine and on Egypt
@doavers
@doavers 8 ай бұрын
Halo bang Cand. This is realy great tutorial. I watch the whole video but still got some issue. Can you please share the final code to us? Thank you.. Mantap tutorialnya. Cuma ada issue ketika masuk ke halaman register kena redirect. Bisa minta final codenya bang.. Terima kasih.
Look at two different videos 😁 @karina-kola
00:11
Andrey Grechka
Рет қаралды 14 МЛН
Вы чего бл….🤣🤣🙏🏽🙏🏽🙏🏽
00:18
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 46 МЛН
لااا! هذه البرتقالة مزعجة جدًا #قصير
00:15
One More Arabic
Рет қаралды 51 МЛН
Comprehensive Authentication Tutorial in Next.js 14
3:25:43
Sakura Dev
Рет қаралды 34 М.
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
42:45
Build SaaS with Ethan
Рет қаралды 53 М.
Next Auth v5 Complete Guide in Next.js 15 with Prisma and MongoDB
1:22:52
Programming with Umair
Рет қаралды 7 М.
Next-Auth on App Router - Solid Auth, Super Fast
17:20
Jack Herrington
Рет қаралды 111 М.
Full-Stack Next.js Blog App with Prisma and Tanstack React Query
1:48:07
Next Auth Credentials Provider - Ultimate Guide
50:01
Brett Westwood - Software Engineer
Рет қаралды 50 М.
Look at two different videos 😁 @karina-kola
00:11
Andrey Grechka
Рет қаралды 14 МЛН