I am telling you this seriously. I have watched 20+ videos on UA-cam about the same. All the time things didn`t worked out. But today i completed your video and trust me on this, your tutorial is the best tutorial in the whole world. Just wanted to say you thank You friend............
Just found your channel and subscribed, i like how your tutorials are long and in depth about concepts to understand instead of just project tutorials, and i dont think 10 or 15 minute short videos can do the same.
Hey Brett, I wanted to thank you for the very comprehensive video. Authentication is always a messy topic, and it's very appreciable how you explained not only credentials but also social login. Thanks again
Simply FABULOUS !!! THANK YOU SO VERY MUCH !!! I followed along. Perfect. You showed every nitty-gritty, were not too fast, not too slow, did not switch screens/windows suddenly (which confuses us, the beginners), were describing what you were doing, where you were doing, and why you were doing. Once more, THANK YOU !!!
Thank you for the video! When registering, you need to block the form submit button after clicking, since you can spam the button and there will be many identical users in the database, you also need to add a check on the server when creating. Also, do not add your .env file to the repository. Now you have data that other users can use for authorization, be careful
Wow I just happily spend 5 hours watching and rewatching this video and I learned a lot. I don't know why I enjoyed some much. Thank Brett, you just earn a new loyal suscriber❤
This is a great and very helpful video, going through several different ways of logging in a user. Just one thing though… it’s not Prism. It’s very clearly PrisMA.
Good job sir really impressive content. Thank you very much for sharing. 1. On a purely cosmetic side, in the login page, instead of the h1 "Sign into Github below" , I would rather change the button label to "Sign into Github". Same goes true for Google. 2. Are you planning to add a "reset forgotten passwords" functionality, since this is the "Ultimate" guide ? Best regards.
Was scratching my head for this, using both credentials and social medias. Dude you just killed it, watched from zero to last seconds. Time to fight with TS into it 😊 Thanks buddy, thanks a lot ❤ Greetings from Tanzania 🇹🇿
Hey, love the videos. They are really helpful and concise. I was wondering if you could possibly make a video on what changes would have to be made to the application when its being pushed into production (i.e. changing specific environment variables, etc)
@@brettwestwooddeveloper I have come across simple role based authentication videos but not ultimate guide per say. Role based authentication of user and admin using mongodb, prisma and next-auth. The major point of learning can be how to secure pages and then give access to certain routes only to the admin . For example: home and dashboard should be a protected route but only admin can access the dashboard.
Great video. Great job explaining each step and also showing how the network side of things looks in the browser console/tools. Thanks so much! I just subscribed!
In the async authorize(credentials) function, I would fetch an API login. It's more clear for me. There is an API to register and there is an API to login.
It's a truly informative and well-made video. I still have two lingering questions. First, what difference does it make in the underlying operation of Next Auth if we don't specify 'jwt' as a strategy? Second, why didn't you touch upon the topic of Middleware? It's crucial for user experience.
Hey Brett, amazing tutorial, one question, why you dind't use the Session model that next-auth provides as a starter code for prisma schema? (I guess its because that if we use jwt, the sessions will not be saved on the db)
@@younkezenger8117 Session only is used when you implement google/github auth options, so instead of only creating a user you also create a session. Hope this helps
Thank you for the explanation, just a question please, when user register he actually doesn't get auth cookies, he needs to signin after that to get them right? If yes, is there a way to tweak that, would be nice if user can register and start using his dashboard for example. Thank you again.
@@brettwestwooddeveloper I don't understand why it's not working automatically when I am using the adapter. Should I have to change anything for the session table to get populated automatically? plz help
Great tutorial!!! One of the best I've seen. Quick question : How would you make an admin account that would see all other account is some sort of table?
thank you! and you would have to create a custom value for admin signups through the login functionality. I would have to look into it more, and when I get good with it I can create a video on that topic. That is a very good topic that would be helpful!
Thank you for the nicely structured and detailed tutorial. I just couldn't understand how the signin to OAuth providers created the Account and User documents in mongodb.
My most recent videos go more in depth about session data/object. I would recommend console logging profile, user, session and all to see what data you get back
Excellent tutorial. Unfortunately its not completed without JWT token option. Btw, you must modify your system environment for UA-cam tutorials. I mean your display resolution must not exceed 1080 HD Now all your screen texts are very tiny and makes a lot of eye strain.
I would watch this one first because it goes over everything. There is a new version of Next-Auth which is in beta. However, you can still use this video as a guide and is still relevant. I have other videos as well on my channel going over the session object and much more!
Unfortunately, this isn't EVERYTHING I need. What I need now is to know why the adapters work in the development environment. But when I upload it to AWS Amplify, I cannot use the JWT to sign in any longer.
i have a question, when you log in, next auth give you 3 tokens (next auth handled it), but how about when you sign up, you sent back user object via json, so we cant get the session when you sign up right
This is the best tutorials I have seen on UA-cam Awesome! Could you tell me the reason why we need to add "/test" url at the end of the DATABASE_URL? Thank YOu!!
After route protection, when I write the login route manually in the search bar, it will show the login page for a while and then disappear which is not a good user experience.
If you are calling the user on the client side with the useSession hook. Then it will cause that. You must fetch the user on server with the getServerSession. I am assuming you are calling the session client side?
no I don't but you will have to refactor your code so your page is a server component and then fetch the session on the server. Then any client components necessary. Impot them into the server page. Does that make sense? @@skyMedia011
i loved this ... and i added next auth to my project. but i still dont know how to protect a sever side page... i am getting error in my seversideprops
I'm not able to log in with google, I'm getting "Try signing in with a different account." this error message. How can I approach this problem? can anyone help
could be multiple reasons, inside of the google console where you set up the oAuth, make sure you entered the correct Redirect URI. If that is correct, then make sure your google client id and secret is correct. If that is fine, make sure your [...nextauth] route is probably set up with no errors.
Hey Brett, I've seen other tutorials where "mongoose" is used. I'm new to react/next etc...am I right in saying "mongoose" and "prisma" help setup schema's ? so we can use one or the other? if this is true, whats the benefits of using prisma ?
Mongoose is a false layer of security, it gives no benefits apart from abstraction of the default mongodb sdk. You can send whatever the frick you want to your mongodb, and that's not ideal, so SQL is usually better than Mongodb. When I say usually, I mean 99.99% of the times.
Idk if someone else asked... I don't know much about Prisma, but is there a reason ti pick it over Mongoose? I thought Prisma is more suited for SQL db's. I just started the vid but this seems like it is what I was after.
why cant i get fields other than name , email in the session? i tried returning user object with a field of Contact from [...nextauth] page too. but it is not carried into home page. btw Thanks for such a comprehensive tut. :)
Thank you for tuning in, and by default you only get the name and email in the session. You must use the JWT strategy and then pass the data through the jwt to the session using asyn callbacks. I have a video on this: ua-cam.com/video/bkUmN9TH_hQ/v-deo.html
i have been using this procedure for some apps but now i have been facing an issue. The signup with google isnt working directly in api/auth/signup unless i remove the // adapter: PrismaAdapter(prisma) line in nextauth route. The signin with google isnt working at all from the login page in (site) folder. If there are any changes we should do then itll be really great because i have tried alot of stuff but nothing worked out for me. Youre a great teacher :)@@brettwestwooddeveloper
Thank you and you just have to create a middleware file on the root of the whole project. export { default } from "next-auth/middleware" export const config = { matcher: ["/dashboard"] } This protects the dashboard page
@@brettwestwooddeveloper Ok thank you. I already watch in another video. It has two option server side or client side. Glad to watch your video and help
Hi, can you do a really short video showing us how to setup a DELETE api route handler with and without prisma or at least with prisma. The new way in next13(app) is a bit confusing. Thanks for the content!
I want to plzzzz ask u a question. How can I use NextAuth with Google to authenticate the user and then pass the session to NestJS project to authenticate the user there also so I can use the guards' features in NesfJS. There are no guides or tutorials about this at all
at 25:41 when i try to sign in it gives me an error. Says: "Sign in failed. Check the details you provided are correct." But in inspector it has 302 Found
Thank you for the great video, it helped a lot, but I have a problem regarding google auth, when I log in with google the first time and log out, the next time i try to login with google it automatically logs in with that account, it doesnt let the user choose another one I already tried a lot of things and nothing seems to work Thanks a lot again, great video!!
is there any way to prompt the custom errors in the register router? because something went wrong doesn't make sense, the user wants to know what is wrong.
Hey! Im using the same code in my project but when im connecting to the google provider, im receiving the data from google and getting the session as well, but somehow prisma is not storing my google account in Account model in the mongodb. Can someone help? I have looked to almost all possible error but cant figure it out!! Help would be appreciated
Good morning, does this work if I have the Front folder and the Back folder in two separate repositories? Since you are using files from the Back in the Front
I am telling you this seriously. I have watched 20+ videos on UA-cam about the same. All the time things didn`t worked out. But today i completed your video and trust me on this, your tutorial is the best tutorial in the whole world. Just wanted to say you thank You friend............
Thank you so much! Glad I could help you out
Just found your channel and subscribed, i like how your tutorials are long and in depth about concepts to understand instead of just project tutorials, and i dont think 10 or 15 minute short videos can do the same.
Welcome aboard!
One of the best tutorials I have seen on UA-cam, you explained everything perfectly and in detail, looking forward to your next videos!
Thank you so much for the kind words!
Maaaan this literally saved my life. I was struggling to get both credentials with next auth working, but it does now. THANK YOU SOOOO MUCH
Hey Brett, I wanted to thank you for the very comprehensive video.
Authentication is always a messy topic, and it's very appreciable how you explained not only credentials but also social login. Thanks again
Thank you so much for the kind comment!
I did this hundred of times, but this is the first time I actually understand how it works. Thanks! you're a great teacher.
Awesome! Thank you! and no problem!
Simply FABULOUS !!! THANK YOU SO VERY MUCH !!! I followed along. Perfect. You showed every nitty-gritty, were not too fast, not too slow, did not switch screens/windows suddenly (which confuses us, the beginners), were describing what you were doing, where you were doing, and why you were doing. Once more, THANK YOU !!!
Thank you so much for the kind words and tuning in!
Wow. Great video. I had to go through it twice to get everything right (I used typescript)
You're an amazing teacher, and this is premium content. The way you explain every step makes it feel like a one on one class. Thank you!
Thank you so much!
you just saved my final year project man!!!! Thank You 1000 times
No problem! Glad I could help you out!
Thank you for the video!
When registering, you need to block the form submit button after clicking, since you can spam the button and there will be many identical users in the database, you also need to add a check on the server when creating.
Also, do not add your .env file to the repository. Now you have data that other users can use for authorization, be careful
WOW THANK YOU this really really helped it was super clear and easy to follow
Thank you so much! I am glad you were able to follow my teachings easily! Thanks for tuning in and the donation!
the most comprehensive NextAuth tutorial, well done Brett!
Thank you so much!
Wow I just happily spend 5 hours watching and rewatching this video and I learned a lot. I don't know why I enjoyed some much. Thank Brett, you just earn a new loyal suscriber❤
Thank you so much! I am glad you learned a lot!
You don't have no idea how much i need this, thank you. Clear and concise
No problem, glad I could help you!
Very useful. Appreciated showing both server and client auth
No problem!
Thank you very much, there are very few tutorials like this one implementing auth with the App Router, and it works perfectly fine!
Thank you! Glad I can help!
This is a great and very helpful video, going through several different ways of logging in a user. Just one thing though… it’s not Prism. It’s very clearly PrisMA.
Thanks!
The best tutorial I found so far about Next 13 authentication. Everything was explained clear. Thank you so much ...🙏😍😍
Thank you! You are welcome!
Your channel deserves more attention!
10/10 explanation!
Thank you!
Good job sir really impressive content. Thank you very much for sharing.
1. On a purely cosmetic side, in the login page, instead of the h1 "Sign into Github below" , I would rather change the button label to "Sign into Github". Same goes true for Google.
2. Are you planning to add a "reset forgotten passwords" functionality, since this is the "Ultimate" guide ?
Best regards.
I think this is what i need to be mid after almost 2 yers of commercial work and more years hobby coding ;)
Ty!
Was scratching my head for this, using both credentials and social medias. Dude you just killed it, watched from zero to last seconds. Time to fight with TS into it 😊
Thanks buddy, thanks a lot ❤
Greetings from Tanzania 🇹🇿
No problem! Thanks for tuning in!
My search is over. Thank you Brett, great session
Thank you!
this is what I've been looking for after the update of nextjs, now i can implement this to my capstone project, thank you for this tutorial!
Glad I can help!
Really Awesome walk through for the Next Auth. Learned alot. Thanks
No problem! Thanks for tuning in!
Hey, love the videos. They are really helpful and concise. I was wondering if you could possibly make a video on what changes would have to be made to the application when its being pushed into production (i.e. changing specific environment variables, etc)
Thanks you so much for this video. Can you please make video on role based authentication?
No problem! And yes I can take a look into that, so something like admin login, user login, etc? protecting routes?
@@brettwestwooddeveloper I have come across simple role based authentication videos but not ultimate guide per say.
Role based authentication of user and admin using mongodb, prisma and next-auth. The major point of learning can be how to secure pages and then give access to certain routes only to the admin .
For example: home and dashboard should be a protected route but only admin can access the dashboard.
watching after 1 year but thanks bro learned a lot
Thanks Brett. Your tutorial is quite easy to follow. You've made very simple.
This is a great explanation of next-auth , thank you brother.
You are welcome!
Great tutorial, Brett! I am glad I found your channel. Thanks!
Awesome, thank you!
crystal clear explanation. easily understanding even for non English speaking country. thanks man. more love from india
Thank you! I am glad I can help! Thanks for the support
Best video on Internet. The latest greatest. I was bit confused about implementation using app/ directory thanks!!!
Thank you so much for the compliment!
Great video. Great job explaining each step and also showing how the network side of things looks in the browser console/tools. Thanks so much! I just subscribed!
In the async authorize(credentials) function, I would fetch an API login. It's more clear for me. There is an API to register and there is an API to login.
It's a truly informative and well-made video. I still have two lingering questions. First, what difference does it make in the underlying operation of Next Auth if we don't specify 'jwt' as a strategy? Second, why didn't you touch upon the topic of Middleware? It's crucial for user experience.
Hey Brett, amazing tutorial, one question, why you dind't use the Session model that next-auth provides as a starter code for prisma schema? (I guess its because that if we use jwt, the sessions will not be saved on the db)
As a beginner, I am also struggling on understanding the difference between this two models. Need some help to understand why choose one or another
@@younkezenger8117 Session only is used when you implement google/github auth options, so instead of only creating a user you also create a session. Hope this helps
By far the best nextAuth tut
Thank you!
Thank you for the explanation, just a question please, when user register he actually doesn't get auth cookies, he needs to signin after that to get them right?
If yes, is there a way to tweak that, would be nice if user can register and start using his dashboard for example. Thank you again.
Curious why you didn't use the session model? As is suggested in the Next Auth docs on the Prisma adapter.
Should have for tutorial purpose. But either way is fine. Definitely recommend using the adapter.
@@brettwestwooddeveloper I don't understand why it's not working automatically when I am using the adapter. Should I have to change anything for the session table to get populated automatically? plz help
This is Exactly what i am looking for and great explanation from you, Thank you.
No problem! Glad I could help!
Very detailed video. Thank you so much.
Great tutorial!!! One of the best I've seen. Quick question : How would you make an admin account that would see all other account is some sort of table?
thank you! and you would have to create a custom value for admin signups through the login functionality. I would have to look into it more, and when I get good with it I can create a video on that topic. That is a very good topic that would be helpful!
@@brettwestwooddeveloper thank you alot. That would be super helpfull. Keep up the good work and all the best from Zagreb, Croatia!
Thank you for the tutorial.
You are welcome!
Love it great work, thank you so much
You are welcome! Thanks for tuning in!
Thank you for the nicely structured and detailed tutorial. I just couldn't understand how the signin to OAuth providers created the Account and User documents in mongodb.
My most recent videos go more in depth about session data/object. I would recommend console logging profile, user, session and all to see what data you get back
Honestly, this guy is dope. I love this tutorial. ❤❤
Thank you!
Excellent tutorial.
Unfortunately its not completed without JWT token option.
Btw, you must modify your system environment for UA-cam tutorials.
I mean your display resolution must not exceed 1080 HD
Now all your screen texts are very tiny and makes a lot of eye strain.
Hey man, which of these videos should I watch first, this or the one that's titled "Nextauth credentials provider" ?
I would watch this one first because it goes over everything. There is a new version of Next-Auth which is in beta. However, you can still use this video as a guide and is still relevant. I have other videos as well on my channel going over the session object and much more!
at the end ..TS will get compiled to JS. that's browser's language. TS is like wearing armor while you eat breakfast. don't worry, i don't spill.
Thankyou so much sir ,this video is really helped me
No problem! Thank you for watching my video! Don't forget to hit that subscribe!
Loved the tutorial
Thank you!
Wow, you resolved my problem. Anywhere in the documentation was the error handling with the callback.ok and callback.error
Like and subscription earned as deserved! Thank you Brett, awesome tutorial!
Thank you for the sub!
Hi Brett, why on folder name u put [...nextauth] - in js that is the way to copy array but don't understand why do we name like that folder
it's called a catch all route when named like that. This allows you to run multiple API requests from that folder
Unfortunately, this isn't EVERYTHING I need. What I need now is to know why the adapters work in the development environment. But when I upload it to AWS Amplify, I cannot use the JWT to sign in any longer.
Ty for your good tut i have a question what plugin you use that show auto complete before coding?
Thanks and its called github copilot
Thank you for sharing this insightful video.
No Problem!
i have a question, when you log in, next auth give you 3 tokens (next auth handled it), but how about when you sign up, you sent back user object via json, so we cant get the session when you sign up right
great tutorial! you should do one of these with next-auth-sanity
Great suggestion! Only tried sanity once
Incredible brother 🙌🙌
Thank you!
one of the best tutorials I've seen
Thank you so much!
If is not too much to ask, can you expand these series of videos of auth by adding password recover and normal and admin user roles?
Yes I can do that, I already have recent videos on next auth jwt session
this is fucking gold, you earned an instant subscriber!
Thanks for the sub! Appreciate it!
@@brettwestwooddeveloper don't even mention it, you greatly deserved it bruh
This is the best tutorials I have seen on UA-cam Awesome! Could you tell me the reason why we need to add "/test" url at the end of the DATABASE_URL? Thank YOu!!
thank you for the compliment and technically you can have whatever name you what instead of test. This will be your collection name in mongodb
@@brettwestwooddeveloper Really appreciate your answer!! Have a wonderful day!!!!😄😄
After route protection, when I write the login route manually in the search bar, it will show the login page for a while and then disappear which is not a good user experience.
If you are calling the user on the client side with the useSession hook. Then it will cause that. You must fetch the user on server with the getServerSession. I am assuming you are calling the session client side?
@@brettwestwooddeveloper
Yes I am using in client as my compo is in client side.
Do you have any repo or a blog post about it ?
no I don't but you will have to refactor your code so your page is a server component and then fetch the session on the server. Then any client components necessary. Impot them into the server page. Does that make sense?
@@skyMedia011
@@brettwestwooddeveloper
Thank you for the help.
I got it and just solved ..
For security purpose, you should not return the hashed password in the API register code. Just return the name and the email.
correct
Please another tuts about next js with typescript, thankyou brother❤
i loved this ... and i added next auth to my project. but i still dont know how to protect a sever side page... i am getting error in my seversideprops
This helped me a lot, thanks. Very clear explanation
Glad I could help!
did i miss where the app is going to handle resetting password for credential provider? do you hv a tutorial on how to do that, and to assign role?
thankyou so much for this tutorial ......kaap doing
I'm not able to log in with google, I'm getting "Try signing in with a different account." this error message. How can I approach this problem? can anyone help
could be multiple reasons, inside of the google console where you set up the oAuth, make sure you entered the correct Redirect URI. If that is correct, then make sure your google client id and secret is correct. If that is fine, make sure your [...nextauth] route is probably set up with no errors.
I got the same error and then I noticed there is a spelling mistake in my Prisma schema
Hey Brett, I've seen other tutorials where "mongoose" is used. I'm new to react/next etc...am I right in saying "mongoose" and "prisma" help setup schema's ? so we can use one or the other? if this is true, whats the benefits of using prisma ?
Yes correct, I have seen ways that you can use mongoose and don't have to use prisma. Just a preference when it comes to coding
@@brettwestwooddeveloper ah okay I see. Thanks for the quick reply.
Mongoose is a false layer of security, it gives no benefits apart from abstraction of the default mongodb sdk. You can send whatever the frick you want to your mongodb, and that's not ideal, so SQL is usually better than Mongodb. When I say usually, I mean 99.99% of the times.
I think for protected route we should use middleware page
Yes ideally you should, but you can use it on individual pages as well if you want per the documentation.
Idk if someone else asked... I don't know much about Prisma, but is there a reason ti pick it over Mongoose? I thought Prisma is more suited for SQL db's. I just started the vid but this seems like it is what I was after.
Thanks for tuning in and you can use either honestly
why cant i get fields other than name , email in the session? i tried returning user object with a field of Contact from [...nextauth] page too. but it is not carried into home page. btw Thanks for such a comprehensive tut. :)
Thank you for tuning in, and by default you only get the name and email in the session. You must use the JWT strategy and then pass the data through the jwt to the session using asyn callbacks. I have a video on this: ua-cam.com/video/bkUmN9TH_hQ/v-deo.html
i have been using this procedure for some apps but now i have been facing an issue. The signup with google isnt working directly in api/auth/signup unless i remove the // adapter: PrismaAdapter(prisma) line in nextauth route. The signin with google isnt working at all from the login page in (site) folder. If there are any changes we should do then itll be really great because i have tried alot of stuff but nothing worked out for me. Youre a great teacher :)@@brettwestwooddeveloper
this is so sick bro thank you
No problem!
Our next PM will be 👉👉Brett 👏
Hi, nice video btw! Im very thankfull! One doubt, in the object of useSession i am not receiving and status key? is there a reason for that?
nevermind, i got it!
I love your video. I want to ask about protect the page with user has not been authenticated ?
How to do that ? Thank you
Thank you and you just have to create a middleware file on the root of the whole project. export { default } from "next-auth/middleware"
export const config = { matcher: ["/dashboard"] }
This protects the dashboard page
@@brettwestwooddeveloper Ok thank you. I already watch in another video. It has two option server side or client side. Glad to watch your video and help
Hi, can you do a really short video showing us how to setup a DELETE api route handler with and without prisma or at least with prisma. The new way in next13(app) is a bit confusing. Thanks for the content!
Yes I can start working on it
@@brettwestwooddeveloper thanks Brett, you are appreciated.
Great tutorial, but i'm getting this error:
Error parsing attribute "@default": The current connector does not support the `auto()` function.
I would need more information on the code to help you out there
Bro great video but I want to learn more about middleware stuff with google provider. Please help with that
I want to plzzzz ask u a question. How can I use NextAuth with Google to authenticate the user and then pass the session to NestJS project to authenticate the user there also so I can use the guards' features in NesfJS. There are no guides or tutorials about this at all
Sorry never have used NestJS
If I need to bring me the user id and the roles, how would I do it? Great Video !
at 25:41 when i try to sign in it gives me an error. Says: "Sign in failed. Check the details you provided are correct." But in inspector it has 302 Found
I would need more information to help you out there
Do you have a video using next-auth and role base access control,. Like basic , admin ... ?
no i do not
Thank you for the great video, it helped a lot, but I have a problem regarding google auth, when I log in with google the first time and log out, the next time i try to login with google it automatically logs in with that account, it doesnt let the user choose another one
I already tried a lot of things and nothing seems to work
Thanks a lot again, great video!!
did you sign out?
Yes, and when I sign in again with google it doesnt let me choose another account
is there any way to prompt the custom errors in the register router? because something went wrong doesn't make sense, the user wants to know what is wrong.
can you make a continuation video of this to deploy, i got a trouble to deploy it all of the authentication is not working after i deploy it
Thank you 🙏
You are welcome!
Could you please make a video for laravel sanctum version of this?
Hi, sorry I have never used that
Why I am getting error in axios.post('api/register, data) line when register. 'prisma.user.findUnique()' invocation. Please help
Very good video..But dont we need to store the session in db?
don't think so, would have to get back with you on that
What if we're using a backend API like django or springboot?
I have no experience with those
Hey! Im using the same code in my project but when im connecting to the google provider, im receiving the data from google and getting the session as well, but somehow prisma is not storing my google account in Account model in the mongodb. Can someone help? I have looked to almost all possible error but cant figure it out!! Help would be appreciated
Good morning, does this work if I have the Front folder and the Back folder in two separate repositories? Since you are using files from the Back in the Front
I think as long as you are in the app router and using Next.js framework
ty
no problem