Best tutorial I have seen on credentials auth with NextAuth! Thank you so much for providing such valuable guidance, it was really easy to follow and understand 👍 Instant sub
1 big problem with this is that credentials provider auth is not persisted in the DB. So you can't use getServerSession in server components which are used frequently in later versions of next!
You did miss a part , if we look at the redirect method that you made after signIn , even if the user provide wronf credentials , it still route him to dashboard
I don't understand. How this example use adapter Prisma? Session won't be save in database. We can you next-auth without adapter Prisma, and in authorize () call Prisma.
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
Excellent video, and I was able to implement auth in my app just by watching this video. However, in my case, session object only has email address, and both name and image are undefined, but in your case, the name property has your name, and the only field that does not have a value is image. Here are my questions: Where are name, email and image properties defined for a session object? How do I fill then with information? (By the way, it took me to watch your video on callbacks to include that name, but I am just curious as to why it was not happening with me yet in your case the name property was being appropriately filled ). Thanks in advance.
Thank you for checking out my content and to answer your question: it can be multiple reasons. If you are using the credential provider, make sure to check your register API endpoint and that you are successfully registering a user to your database. Then make sure your catch all route is correctly verifying the credentials on the sign in. I would recommend console logging values that are associated with your login to see which step isn't working correctly.
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
You cant use prisma adapter and jwt at the same time lol ,when using JWT you have pretty much no control over sessions after you give them out - you cant revoke the token on user deletion for example, You should have explained that
Minute 47, when you just wrapped body with Provider - it's not works. Not sure why for now. I esume because you didnt pass any props to provider and Session provider requires session as a prop but its possible onli in client component. That why I hate tutorials who are not using typescript. Anyways, actualy very good and detailed tutorial but still you shold try to use typescript for you work and for tutorials as well because a lot of bugges appire when you not use TS.
actualy, I was wrong as well, it was not working because due to you tutorial if there is no email or password you returning new NextResponse which is not correct. This function can return aither user object or null. authorize function is not correct place to handle errors in this case
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
It's odd that the User model does not contain a password field, but you pull it out in authorize no problem. I'm using mongodb adapter, there is no schema configuration provided in the docs and authorize is not happy with the user type I'm trying to return from authorize.
If I have a express.js backend where I have setup a MySQL database with Sequelize, and i have a next.js frontend, how could I make it work with NextAuth?
you used dashboard page as client side, means all the protected routes will be client side ??? if yes, then whats the benefit of server side rendering in app router ?? please share the feedback
You can have a client side page and still have it as a protected route. Client side is necessary for interactivity. Protected means that if the user isn't authenticated then they have no access to that route.
Is it strange to anyone else that an authentication library requires that you write your own password check logic? What am I missing here?? Why don't the docs start with a canonical example. I would imagine many projects are not going to want to go with only social logins.
I've got an error, does anyone have any solutions?: PrismaClientInitializationError: Invalid `prisma.user.findUnique()` invocation: Error in connector: Error creating a database connection. (Kind: An error occurred during DNS resolution: proto error: io error: A socket operation was attempted to an unreachable network. (os error 10051), labels: {})
Could be multiple reasons but a 401 error code means that you are unauthorized to perform that certain action. Were you able to fix it since your comment?
i followed your guide to a t and love it i dont really want to learn type script yet..... but i when i try to sign in i have to do it twice in order to get signed in.. did i miss something in this one or your other jwt video ? no errors just have to sign in twice. incase someone else runs across this i spent longer on this and found my issue was i was redirecting the same time i was signing in i put await in front of sign in and it solved my issue
! important How to implement role based redirect. eg. for user has "/user" and for admin has "/admin". When I signin successfully then it will automatically redirect.
Hey guys, is it possible to have in the first time a credential account and later connect with our google account with the same email than credential email ?
Trying to implement this, but using a MySQL database. However it seems that next-auth doesn't support the database strategy and only works with JWT when using the credentials provider, so every time I login it tries to fetch the user session from the database, but the sessions table is always empty. If I remove the adapter altogether everything works, but I guess then there is no place to save the registered users...
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
How is the registerUser function connected to the api route? The response variable hold the fetch info etc but its never used anywhere? Apart from console logging userInfo? Or am I missing something?
register function send information to /api/route endpoint and this creates a user in the database. Then the catch all next auth route gets the user from the register by looking up the user in the database.
I have the next auth ultimate guide which I go over how to use toast notifications. Skip to that time frame in that video. It has a red thumbnail on my channel
Hi, great job! Some questions... How about persist token to client and use it in API requests? How to refresh token too and use this solution with a google provider and still use a valid token to make requests, for example?
On Google Provider, you can write this code: authorization: { params: { prompt: "consent", access_type: "offline", response_type: "code", } } This will force the refresh token.
@@brettwestwooddeveloper A quote from the documentation: "If you pass the session page prop to the - as in the example above - you can avoid checking the session twice on pages that support both server and client side rendering."
@@brettwestwooddeveloper I agree with you 100%, but I’ve watched so many tutorials and I’ve rewatched this video and your other videos and some others as well, but for some reason whenever I go to log in I run into a problem. If I go to “localhost:3000/api/auth/signin” and log in with valid credentials it always gives me an error at the top of the form. Can’t figure it out for the life of me but I’ll keep trying. I have to be messing up somewhere.
@kristielebaron-cz4fw no:( I watched a few other tutorials and kept getting the same problem. I tried following this one again from the beginning a few times to be sure I didn’t do something wrong but still had the same issue.
Hello Brett is it possible to redirect the user to the `onboarding` page after signup and the user doesn't have to login when using credential provider?
Quick question from newbie developer. At 46:45 when you marking 'use client' on Provider, and import it on root layout.js, is it the same as marking ALL child of this provider component (which is basically all of app pages) to be a client rendering? I can't wrap my head around this.
Hey ! can you help me with this error please? Type 'import("c:/Users/Lucas/Desktop/Nueva carpeta/login-app/node_modules/@auth/core/adapters").Adapter' is not assignable to type 'import("c:/Users/Lucas/Desktop/Nueva carpeta/login-app/node_modules/next-auth/adapters").Adapter'. Types of property 'createUser' are incompatible. Type '((user: Omit) => Awaitable) | undefined' is not assignable to type '(user: Omit) => Awaitable'. Type 'undefined' is not assignable to type '(user: Omit) => Awaitable'. In the code marks adapter an throw that error
I tried to implement this but it doesn't create a session-token in the browser. It only works with the /api/auth/signIn default page but with /my-login it won't create that session. I even have pages: { signIn: '/my-login', },
@@brettwestwooddeveloper the problem strangely was caused by the name of the provider. Initially I named it name: "classic". After I changed it to name: "credential" and also added id: "credential", it started to work just fine. I don't have an explanation
The clarity in your delivery and step-by-step guidance turned what was a struggle for me into a smooth learning experience.Cheers! 👏🚀
Thank you Edwin! Glad you find my teachings easy to follow!
Im going to lose my mind hearing you say Prisma wrong
I really sort this type of content,prisma,custom login page ,credentials,next-auth so far this is the best tutorial for that
Thank you so much Patrick!
Did you do the reset of password by the user @@brettwestwooddeveloper
Best tutorial I have seen on credentials auth with NextAuth! Thank you so much for providing such valuable guidance, it was really easy to follow and understand 👍
Instant sub
Thank you so much for the sub! Glad I was able to help you out!
So cool. The tutorials in the Chinese community are so old that I had to come here for help
Awesome! Glad you were able to check out my channel!
Brett keeps dropping the right tutorials at the time I need them. Good job sir
Thank you!
This is best next-auth video i've seen. Great work man.
You are a good teacher thanks. Even as i used next14 it still looked simple with no errors
Thanks a lot. Your explanation was very clear and concise 😊
Thank you a lot for the tutorial 💕 I was searching for a tutorial how to implement credentials in NextAuth and IMO this video is the best one I found
Thank you. The official next auth guide for credentials provider is broken and this helped out
No problem! Glad I could help!
Great tutorial, Brett. It would be really cool to learn how add to this so a user can reset their password.
Yes I can add that to my video list
1 big problem with this is that credentials provider auth is not persisted in the DB. So you can't use getServerSession in server components which are used frequently in later versions of next!
Bro is majestic
hahaha Thank you!
You did miss a part , if we look at the redirect method that you made after signIn , even if the user provide wronf credentials , it still route him to dashboard
Yes, Thanks someone also noticed it.
Thanks from France for this Tutorial!
No problem! Thanks for tuning in!
THANKS FOR THIS GREAT TUTORIAL
No problem!
Thanku sir this video very helpful for and my all concepts and doubts are clear.🥰🥰
Awesome! Glad to hear that!
I don't understand. How this example use adapter Prisma? Session won't be save in database. We can you next-auth without adapter Prisma, and in authorize () call Prisma.
Thank you for the detailed tutorial! Can you also make a video on "Remember Me" functionality with Next Auth?
16:11: You can also get a string from the cmd 'openssl rand -base64 32' 😄
Could you please provide the link to the Github repository for the code? thank you
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
Excellent video, and I was able to implement auth in my app just by watching this video. However, in my case, session object only has email address, and both name and image are undefined, but in your case, the name property has your name, and the only field that does not have a value is image.
Here are my questions: Where are name, email and image properties defined for a session object? How do I fill then with information? (By the way, it took me to watch your video on callbacks to include that name, but I am just curious as to why it was not happening with me yet in your case the name property was being appropriately filled
). Thanks in advance.
Thank you for checking out my content and to answer your question: it can be multiple reasons. If you are using the credential provider, make sure to check your register API endpoint and that you are successfully registering a user to your database. Then make sure your catch all route is correctly verifying the credentials on the sign in. I would recommend console logging values that are associated with your login to see which step isn't working correctly.
Nextjs CRUD with prisma and a database would be great, maybe a simple todo app?
Definately
Will do!
Very good, followed your tutorial and got everything working, subscribed.
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
Thanks it helped me a lot, when building my Saas.
Thank you so much Brett!
No problem! Thank you for tuning in!
The Best Next-Auth tutorial on the internet
You cant use prisma adapter and jwt at the same time lol ,when using JWT you have pretty much no control over sessions after you give them out - you cant revoke the token on user deletion for example, You should have explained that
maybe next video, you can sit me down and explain to me what details I should go over.
Really love your video… please can you make a video using typescript … I’m having issues passing the session as a props in the rootLayout
Minute 47, when you just wrapped body with Provider - it's not works. Not sure why for now. I esume because you didnt pass any props to provider and Session provider requires session as a prop but its possible onli in client component. That why I hate tutorials who are not using typescript. Anyways, actualy very good and detailed tutorial but still you shold try to use typescript for you work and for tutorials as well because a lot of bugges appire when you not use TS.
actualy, I was wrong as well, it was not working because due to you tutorial if there is no email or password you returning new NextResponse which is not correct. This function can return aither user object or null. authorize function is not correct place to handle errors in this case
Thank you for the great tutorial. Keep up the good work!
Thank you for tuning in!
Дякую, саме те що шукав!
Thanks blud!!
No problem! Thanks for tuning in!
tnx, great tutorial, my question is how bcrypt can unhash hashedPassword without any salt ? (how this working?)
You would have to salt the password. And then use bcrypt package custom methods to unhash.
Awesome Tutorial! Can You Please Tell me Which Extension you used who gave you the recommended Code to write for the next line?
Awesome content. Just right things at the right time. Love it.
Glad you enjoyed it!
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
Thanks a lot
You are welcome!
It's odd that the User model does not contain a password field, but you pull it out in authorize no problem. I'm using mongodb adapter, there is no schema configuration provided in the docs and authorize is not happy with the user type I'm trying to return from authorize.
If I have a express.js backend where I have setup a MySQL database with Sequelize, and i have a next.js frontend, how could I make it work with NextAuth?
Never have tried that so don't want to give you wrong advice.
you should have used typescript
Yea i know :(
Thanks mate, that is great video! By the way, how could I test credentials signin or signup with postman? Thank you!
You can use the endpoint for that catch all route and test it with that endpoint. You can test with a POST request for register and GET for login
git repo would be super-helpful with few nuances
Where is the setup for redirecting the user to the dashboard after successful login?
I did the same step but when im going to login it redirected to me "/api/auth/error"
can anyone tell why this is happening?
I would have to see your code. Could be for a few reasons
you used dashboard page as client side, means all the protected routes will be client side ??? if yes, then whats the benefit of server side rendering in app router ?? please share the feedback
You can have a client side page and still have it as a protected route. Client side is necessary for interactivity. Protected means that if the user isn't authenticated then they have no access to that route.
Is it strange to anyone else that an authentication library requires that you write your own password check logic? What am I missing here?? Why don't the docs start with a canonical example. I would imagine many projects are not going to want to go with only social logins.
Actually Next Auth says they recommend not to using the credentials provider. So, they do not provide any password check logic out of the box.
@@brettwestwooddeveloper how innovative...
I've got an error, does anyone have any solutions?:
PrismaClientInitializationError:
Invalid `prisma.user.findUnique()` invocation:
Error in connector: Error creating a database connection. (Kind: An error occurred during DNS resolution: proto error: io error: A socket operation was attempted to an unreachable network. (os error 10051), labels: {})
did you run npx prisma generate?
Are you hashing the password at server side? Shouldn't we hash at client side before sending the password to server to secure users?
Password hashing client side offers no advantage against adversarial attackers. So, hashing it on the server is good enough!
Nice video brett but also looking for all those actions including accessToken and refresh token for authorization.
Yes I can do that as well. Felt video was long already
@@brettwestwooddeveloper Yes Brett that will be really helpful 👍
Hey Brett which screen recording software and which video editing software for you use for your videos?
@@WM-fz5si obs studio for recording and premiere pro for editing
@@brettwestwooddeveloper Thanks buddy 👍
the props session when you pass the value to the provider in layout.js?
I got an error 401 Credentials Sign in Not Supported, why is that??
Could be multiple reasons but a 401 error code means that you are unauthorized to perform that certain action. Were you able to fix it since your comment?
I followed your steps but It didn't work maybe because of the versions what version of next js and auth did you use?
i followed your guide to a t and love it i dont really want to learn type script yet..... but i when i try to sign in i have to do it twice in order to get signed in.. did i miss something in this one or your other jwt video ? no errors just have to sign in twice.
incase someone else runs across this i spent longer on this and found my issue was i was redirecting the same time i was signing in i put await in front of sign in and it solved my issue
really nice great and thanks, Keep Going
Thanks for tuning in!
! important
How to implement role based redirect. eg. for user has "/user" and for admin has "/admin". When I signin successfully then it will automatically redirect.
Hey guys, is it possible to have in the first time a credential account and later connect with our google account with the same email than credential email ?
God bless you for this work. i expected logout any way.
Thank you and signout() with an OnClick
Trying to implement this, but using a MySQL database. However it seems that next-auth doesn't support the database strategy and only works with JWT when using the credentials provider, so every time I login it tries to fetch the user session from the database, but the sessions table is always empty. If I remove the adapter altogether everything works, but I guess then there is no place to save the registered users...
Great tutorial but the zoom is kind of annoying
Thanks for tuning in and I will take that into account. I had a feeling it might be
Great tutorial than you, but why username instead of email? How do you handle if you want email login and for example google and facebook? Thank you
Brett keeps deleting my comment so I'll keep writing it. If you're here in believe that this is a solid tutorial on Next auth, this ain't!!! Brett solution is utter rubbish!! I've recreated he's solution only to find zero authentication happening, users can access the dashboard page by localhost:300/dashboard WITHOUT NEVER logging in!!! users can login with any email or password without NEVER registering that user. He's solution is a complete joke. Don't waste your time here I like, there is ZERO authentication happening with he's tutorial!!!
why you didnt add the middleware?
what middleware?
@@brettwestwooddeveloper
Protect the routes
yea that's very simple to do, just didn't do it in this tutorial@@storyPlus12
How to do server side pagination by just fetching data from an API (without using MongoDB )?
Please help! I'm stuck in the middle of a project.
How is the registerUser function connected to the api route? The response variable hold the fetch info etc but its never used anywhere? Apart from console logging userInfo? Or am I missing something?
register function send information to /api/route endpoint and this creates a user in the database. Then the catch all next auth route gets the user from the register by looking up the user in the database.
and how do I give the users feedback for example if they want to login to their account but used the wrong password?
I have the next auth ultimate guide which I go over how to use toast notifications. Skip to that time frame in that video. It has a red thumbnail on my channel
can i try this with sql?, this tutorial is very useful, and i am very happy, after few days studying about credentials
Hi, great job!
Some questions...
How about persist token to client and use it in API requests? How to refresh token too and use this solution with a google provider and still use a valid token to make requests, for example?
On Google Provider, you can write this code:
authorization: {
params: {
prompt: "consent",
access_type: "offline",
response_type: "code",
}
}
This will force the refresh token.
wow, thanks sir
where are source code brother?
No Sign out functionality!!! therefore what is the point!
you can just import signOut() from next-auth and then add it to an onClick.
You set the session as a required prop on the Provider, but when wrapping the body with it, you never pass that prop. How does that work?
i don't know how it did but it did
@@brettwestwooddeveloper A quote from the documentation: "If you pass the session page prop to the - as in the example above - you can avoid checking the session twice on pages that support both server and client side rendering."
As `bcrypt` is not available on Edge runtime, how do I need to encrypt passwords?
Amazing
Thank you!
This almost worked until I got to login. it doesn't print the session to the console or the dashboard.
It should work, there must be something wrong in your code
@@brettwestwooddeveloper I agree with you 100%, but I’ve watched so many tutorials and I’ve rewatched this video and your other videos and some others as well, but for some reason whenever I go to log in I run into a problem. If I go to “localhost:3000/api/auth/signin” and log in with valid credentials it always gives me an error at the top of the form. Can’t figure it out for the life of me but I’ll keep trying. I have to be messing up somewhere.
@kristielebaron-cz4fw no:( I watched a few other tutorials and kept getting the same problem. I tried following this one again from the beginning a few times to be sure I didn’t do something wrong but still had the same issue.
can someone help me with displaying the last login time along with the user-name when user's login
Hello Brett is it possible to redirect the user to the `onboarding` page after signup and the user doesn't have to login when using credential provider?
yes add a redirect('/onboarding) after the signIn function
how shall we structure the database if we need both oauth and credential login
Quick question from newbie developer. At 46:45 when you marking 'use client' on Provider, and import it on root layout.js, is it the same as marking ALL child of this provider component (which is basically all of app pages) to be a client rendering? I can't wrap my head around this.
nope they don't all become client components
thanks for clarifing i was also wondering xD
@@jotaroisdarius1918
Where is the Id of that user and other important details of him
Where is the register code? Why can't I find it?
You already made the same video (The Ultimate Guide to Next Auth - Everything You Need).
is it possible to implement this using server actions?
Never tried with server actions, so I honestly don't know 100%
Hey ! can you help me with this error please? Type 'import("c:/Users/Lucas/Desktop/Nueva carpeta/login-app/node_modules/@auth/core/adapters").Adapter' is not assignable to type 'import("c:/Users/Lucas/Desktop/Nueva carpeta/login-app/node_modules/next-auth/adapters").Adapter'.
Types of property 'createUser' are incompatible.
Type '((user: Omit) => Awaitable) | undefined' is not assignable to type '(user: Omit) => Awaitable'.
Type 'undefined' is not assignable to type '(user: Omit) => Awaitable'. In the code marks adapter an throw that error
are you using typescript?
@@brettwestwooddeveloper yep, I'm using typescript. did I miss something?
You have to`import type { Adapter } from 'next-auth/adapters'` and then change your adapter line to `adapter: PrismaAdapter(prisma) as Adapter`
import { PrismaAdapter } from "@next-auth/prisma-adapter"; this should work fine
can't handle hearing "prism" instead of "prisma" ever few seconds arrrggh
Sorry bro I don’t think my content is for you then
use ts ?🤔
prisma, not prism
Please add forgot password. Its essential part of login. I don't know why people ignore it.
Is it possible to share the github repo with us? 😃
bro if I start learning web development to day is it worth or can I get a job please help me
It will take time to get a job
If you start today, you're already behind, but keep learning and you'll eventually get there. How motivated are you?
PRIS......MA!!!😂😂😂😂😂😂
T3 STACK FULL COURSE
Needed
Bro you keep saying prism when its actually pris-ma. Great video though
speech impediment I guess
I was thinking the same thing :)
I tried to implement this but it doesn't create a session-token in the browser. It only works with the /api/auth/signIn default page but with /my-login it won't create that session. I even have pages: {
signIn: '/my-login',
},
Hi, can you show me the code so I can help you out
@@brettwestwooddeveloper the problem strangely was caused by the name of the provider. Initially I named it name: "classic". After I changed it to name: "credential" and also added id: "credential", it started to work just fine. I don't have an explanation
Nice video
Thank you!