I really like how you breakdown a complex concept in a step by step format. Especially the part where you talk about the three different ways of getting session data and their respective use case. It’s very clear and informative. Instant sub for me right there
This tutorial was on another level of prepared/concise. I like the showing multiple ways to do do protected routes, and the error notice related to loading bcrypt in the client bundle.
Thank you! I normally try to make the tutorials "error free" but some errors are so common they even catch me and I'm like "Oh yeah, this is definitely going to get someone else" haha.
@@simonhblanco Hmm, I'm not quite sure what you mean. Any user might be on your site and using multiple tabs -- some products use that flow heavily. The cookies are shared between all tabs so authentication should Just Work. Could you clarify what the problem is?
@@ethan_mick Thanks for the answer!!! and Yes you are right!!!. For a normal page, where people just log in to watch a movie, it's ok, but imagine a gambling site. two tabs open at the same time, it can be a problem ... users will try to make simultaneous transactions. or on a bank page. Can something be done in authnext to avoid that?
@@simonhblanco That's outside the scope of what Next-Auth can do. Here's my recommendation -- anything that needs to be protected from simultaneous requests needs to be handled in the backend (API route or database). Because if simultaneous transactions can break the site, people will make thousands of requests from bots and get around your tab protection. So it needs to be handled on your backend with server protection not client-side protection.
This was a really comprehensive video on everything you need to get next auth set up. We're doing exactly the same thing in our enterprise SaaS. Currently exploring the new @auth package which next-auth is moving to, would be great to see you do an update video on this one with the new auth beta package (if you already haven't).
Been looking for something like this for some time now, I'm glad I found you since this really explains everything I needed in great detail. Thank you :)
Great tutorial! Lots of good information in this video. I also like your presentation style. You never cover the user registration process so I will bring this tutorial down from 'ultimate' to 'almost ultimate' but it was still worth the watch!!
Haha, that's fair. Next-Auth takes the stance that registration is outside the scope of Authentication (which is true for OAuth). I created a video on making a custom register page that also covers saving the user with Prisma here: th-cam.com/video/HVFMc5Ac1F8/w-d-xo.html
You are my Angel man ! Thanks for this excellent explaination, was stuck like 4 days with NextAuth but this video resolved my problem in just 40 minutes. Thanks thanks !
really, this was one of the best tutorial for next auth ever. u explained this content very clearly. thank u so much. i appreciate it and i would like u to go ahead and make video about api at crud process in next 13
This was the most in-depth tutorial for NexAuth with NextJS I have seen. Really great work, you explained everything very clearly. I have no doubt this chanell will blow up. Just wondering if you could maybe cover the T3 stack and how to handle redirects to a specified page when unauthenticated (instead of just to the signin page) and how you would use the credentialProvider with email and password with the T3 stacks session tokens. Thanks again for the great video.
Thank you! I'll add the T3 stack to my list and make some content around how to do those things. For handling the redirect when unauthenticated, you should be able to use `redirect` (server component) or the useSession hook and point the user to any page you want. I used the login page here, but it could be a different one. I'll make a followup video for creating a custom login page and show how to redirect to that.
Really well thought out and well explained tutorial Ethan. Really helped with my understanding with setting up Next-Auth with the latest versions of Next :)
Hi Ethan! Really loved your series on setting up a NextJS app with Prisma, Postgres and Next-Auth. The way you delve into the background mechanics and offer contextual understanding is a huge plus for me! I'm not certain if this has been broached before, but possibly a video you can add to your backlog of ideas, is a video dedicated to handling dev/production environments. My primary intrigue lies in the nitty gritty of how to host a POSTGRES database and integrating it with the deployed NEXTJS app. One hurdle, i've been struggling to understand how to properly manage different environment variables and how to set it up properly for local vs production setups. Your insights on this would be golden! Or if you have any resources you could recommend on this topic, that would be super helpful too!
Just to chime in as I've also been wondering this, I originally hosted my DB locally using postgres but recently switched to Amazon RDS by suggestion of a developer friend, it integrates almost identically to how Ethan showed in his first video, and was relatively easy to set up in RDS. My DB seeding and migrations also worked seamlessly! This also would allow deploying the actually application to be done separately to the DB (Although likely done on AWS, but really anything would work with the RDS connection string). Not sure if this helped you at all, but I do recommend giving Amazon RDS a go as it has a great free tier and is very well received. Regarding your point about the env variables, for local dev/things you don't want to commit to prod etc you can use the .env.local file, but I must say I'm a bit fuzzy on that myself, someone else with greater insight might be able to assist there.
hi @@Mantenner, thanks for the recommendation. I'll definitely check out RDS. I've been playing around with .env variables for the last few days. Seems like there's a bit of a conflict on how Prisma and NEXTJS like to consume variables from those files.
Thanks for the kid words, and great idea! Having a good understanding of how the environments work, how to set them up, and how to use variables between them is a great idea for a video. I'll work on that!
ปีที่แล้ว
Great video man, found this in reddit and is just what I needed to handle users in my project!
Thank you friend ......... the way you explain... now I have a clearer vision... before I understood it in a general way but you made me understand it step by step... thanks again Att. Jose Grillo
Bro, Thankyou so much for the tutorial. Hope u have a good day, good life, and everything good because i could make a login page using credentials now. GOD BLESS YOU SO MUCH BRO!!!!!!!!!!!!!!!!!!!!
Also would love to see your thoughts and process on adding CSS in JSX when things like Material UI and Chakra UI catch up with the server components :) Thanks again!
Why didn't TH-cam show me this yesterday when I was looking for exactly this??? I struggled with it all day, then managed to get it and now YouTuube recommends it to me. That's cyberbullying! Anyways, great video. Earned a sub!
After days of frustration with JWT and session stuff, your video solved it! Massive thanks, subbed! Clear and concise. Would be awesome to do a video on how we can use custom User types (for TS stuff) for sessions. E.g. getting rid of the default “image” property etc
I appreciate you very much, you have a very good command of the subject and your expression is very clear. Could you please next tutorial using next-auth and next-intl together?
If anyone else has an issue with the middleware not securing the pages you specify, make sure the middleware.ts file is at the same folder level as your root page. For me this was in my /src folder.
What an amazing tutorial! Could you explain (or maybe make a second video) about how to use Next Auth in a custom middleware (for example, a saas with custom subdomain settings)?
Yes! For my SaaS apps that are on subdomain (such as app.domain.com or dashboard.domain.com) I put all the Auth stuff *on* that subdomain as well. This means the cookies and everything will Just Work. If you don't do that, or you need to share the cookies across sub/domains you'll want to take a look at the Next Auth cookie options to configure all of this. next-auth.js.org/configuration/options#cookies
Everything seems to work fine with the specific package version you provided, the only thing I couldn't get to work was the /localhost:3000/api route handler, when I was using the other 2 auth methods client side and server side, but when I used the middleware technique at the very end now /api seems to work.
Let's say you set up 1) traditional auth, 2) google oauth, and 3) facebook oauth in your app. When a user logs in with all three of these methods, how should the app determine that this is indeed the same user?
thanks for the video, I saw months ago and now I had to use, best youtube video about nextauth. I' thinking how to implement "enable/disable" user access, maybe with short JWT expiration...
Nice video, learnt a lot. About the middleware though, what if we wanted to have other stuff as middleware? I tested it out and if I export default the other middlewares stop working. Do you have a video on that? Thanks.
I don't yet, but this is probably the trickiest thing when working with Middleware. I'll do what I can to make a video and try out a few ways. Do you have middleware you're using that you want to see merged together?
Hi, Ethan! First, I just have to thank you for these videos. While I don't typically watch TH-cam tutorials, I've found your content to be incredibly informative and up-to-date.😁 I have a question related to using JWT for authentication. I've heard it is unsafe because there's no way of invalidating sessions, as they are self contained. AFAIK, their lifetime should therefore be short (minutes, hours at most). However, it's annoying to log in every few minutes too. Do you have any experience with implementing refresh token rotation for credentials login with next-auth + prisma? Or with blacklisting tokens to imitate "revoking" them? I would love to see a tutorial about that. Or maybe even about "classic" session based authentication. Again, thank you for your amazing tutorials - I hope you have a lovely day 🌟
Thanks! If session invalidation is important for your use case (What you outlined is valid! However, for some apps the threat profile is tame enough that it doesn't matter) then you can go two routes: 1. Session based tokens. These come with their own problems, but you can revoke them. Consider caching them at the API layer so you don't need to pound your database. 2. Similar to the above, store JWTs on the server (Redis cache, memory, etc) and give the client a lookup key that can look up that JWT. This way you can just purge the cache to invalidate the session. 3. Use JWTS for a short session and give them a way to refresh it with an API call and a refresh token. These are a bit outside of the scope of Next-Auth, you'll need to do some work on your own to get it working. I think 3 is the easiest because you can just make an API that returns a refresh token and then have logic client side to refresh the JWT on a 401.
@@ethan_mick With option 3, could this involve using a custom OAuth provider? Also do you have any resources you would recommend to get across best practices around managing and handling JWTs? I truly admire your commitment to actively monitoring comments on your older videos. I'm not certain if TH-cam provides content creators with user-friendly tools for managing comments on their older content, but your dedication shines through nonetheless.
@@ethan_mick Thank you so much for answering - so helpful. I think I will try option 3, your tips about making the refresh token API sounds really smart! ☺
I really appreciate all your efforts in explaining these concepts. It's so helpful. But I do have a question about the client side session. It seems like all the extra info added isn't reflected on the session obtained via useSession(client side)?
Hello when i tried to add in layout i have error function parseModel(response, json) { return JSON.parse(json, response._fromJSON); } do you know what it can means ? thank you
Hello, thank you for your reply. It is next 13.3 bug 13.2 is OK. But there is another problem when you first time sign in with credentials there is no session cookie in response so you have just token and callback cookies,…If you try to log again with these 2 coookis,…session is sent and saved,…you can try delete cookies and try to log in withou callback cookie. Do you know where can be the bug?
Note that the middleware.ts file should be "at the root or in the src directory (same level as your pages)" (see: docs). I have an src directory (not sure if this the preferred way to set up the project!), so it had to go in there, rather than at the project root as shown in the video. Thx for the video.
@@kristiankanya431 I personally don't use it because: 1. Most of Vercel's code doesn't, and if they don't do it, I didn't see the reason to 2. I like to keep my directory structure simple, so fewer is better 3. The `src` felt like it was legacy behavior and no longer necessary. That being said, if you like the organization it gives, that's fine! I prefer flatter directories, so I don't use it.
What if you wish to store the session in the database, regularly revalidate it, and, as a system administrator, have the capability to revoke access for a specific session? How would this be accomplished?
@@ethan_mick Just something that takes a jwt from the frontend and uses nextauth to verify and get decoded token, to give access to routes. I would be thankful if you used tRPC. 🙏
I see some people have a prisma database query inside the JWT function to obtain some additional information about the user. Is that a good practice? if the jwt function is going to run multiple times, would it cause performance issues to have a database query inside?
I would not put database logic inside the JWT encode/decode functions, those are called way too often. If the database query is only on token creation that's probably fine, assuming the tokens live for a few minutes. The database should easily be able to handle a simple SELECT query like that.
there is often a Session Model defined in the schema.prisma. Do you know what it does? What are the use cases for defining a Session model in the database
Great question. When you store sessions in the database, you are storing a secure token (the session token), the user ID, and an expiration. The client stores the token in a cookie or local storage and uses it on all requests. The server can then read the token from the request (often sent as a HTTP Header) and look it up in the database. You can then validate that 1) it exists in the DB, and 2) it has not expired. The benefit to doing this is you can delete a token from the database and it will invalidate all sessions using that token. For example, you have a "Log out of all devices" button for a user. When pressed, it would delete all tokens in the database for the user, so they are no longer logged in anywhere. When you use a JWT, there is no database session. Only the JWT itself defines the authentication. So you can't invalidate a session by deleting it from the DB. The benefit though, is that you don't need to make a roundtrip check to the database to validate the session.
friend thanks for the video, just one question... If I open 2 tabs of my app, with my active user.... He recognizes it for me in the 2 tabs... fine, but if I logout in 1 tab... the other one remains open... it only accepts leaving the tab, it only updates... and the serious idea is that it does so in automatic How should it be done using a useEfect or from the provider... Could you guide me please? Greetings Jose Grillo from Venezuela
Two thoughts: 1) This is how browsers work. When you logout of 1 tab it won't update another tab. However if the user tries to do an action (like click a button or create something) the request won't be authenticated and they will not be able to do it. I don't think you should worry about this use case -- don't fight the browser and just let your authentication do the work. 2) If you really want to update different tabs look into the developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API API which let's different contexts communicate with each other. When the user logs out of 1 tab send a message and listen for it on the other tabs. When that message is received, refresh/logout.
@@ethan_mick Thank you very much, I will check but your point of view is interesting ..... I will value it thanks Success brother... I'm still very aware of your channel... many blessings
Question I’ve been a bit stuck on , how would you handle if a user signed up with credentials previously but attempts to sign on with the same email using google provider ?
Great question! You can handle this 2 ways: 1. Just create a second user. Let users know that each way they login will make a different account. 2. NextAuth has a `callback` option that is called upon a successful login from OAuth. There is a parameter `profile` that is passed in that, for Google, contains the email. Use that email and lookup if you have a CredentialUser with that same email. Instead of creating a new user, finish the Auth with user from the database (use that primary key).
@@ethan_mick I wanted to just reject the user from signing in and let them know to sign in with the initial method of registration, I wasn’t sure how to achieve thisn
@@marxvision9874 If you throw an error in the `callback` the user won't be logged in and the URL will have a query `?error=err_text` where the `err_text` is whatever message your error had. You can add a custom error page to handle all these errors and tell the user what to do next: next-auth.js.org/configuration/pages#error-page
>>>>> UPDATE
build crud admin dashboard and midleware homepage please, i like your tutorial
Hands down the best auth video about next and next-auth I've ever seen. You've got a new subscriber. Thank you so much!
Glad it helped you out!
I really like how you breakdown a complex concept in a step by step format. Especially the part where you talk about the three different ways of getting session data and their respective use case. It’s very clear and informative. Instant sub for me right there
Thanks! I try to think through the best ways to make a complicated topic approachable. Let me know if you have any questions!
This tutorial was on another level of prepared/concise. I like the showing multiple ways to do do protected routes, and the error notice related to loading bcrypt in the client bundle.
Thank you! I normally try to make the tutorials "error free" but some errors are so common they even catch me and I'm like "Oh yeah, this is definitely going to get someone else" haha.
If I start doing tutorials you’re the exact person I would be looking to emulate. GREAT job!
Wow, thank you!! That is such a nice compliment. I'm just doing what I can to help people out :)
this channel will blow up soon, sit tight buddies! Thanks for the info sharing mate!
Thank you! I'm just gonna keep making great content in the meantime :)
teaching and presenting skills are through the roof! THANK YOU! Instant subscribe.
You are really the best tutor I have ever seen . First video about next-auth that is complete thank you
Glad you think so!
Legendary mate, just finished up this one and your explanations are flawless as usual, can't wait to get onto the next one! This content is golden.
Thanks a ton!
This is a great tutorial! You seem like a natural teacher and TH-camr, please keep them coming.
Thank you! I'll keep them coming!
There are a lots of tutorial but this is the best tutorial for next auth ever. !!! keep going like that.
Thank you so much!
@@ethan_mick Small question.. How do you avoid that the user open two or more tabs at same time. "Duplicate Tabs". ?
@@simonhblanco Hmm, I'm not quite sure what you mean. Any user might be on your site and using multiple tabs -- some products use that flow heavily. The cookies are shared between all tabs so authentication should Just Work. Could you clarify what the problem is?
@@ethan_mick Thanks for the answer!!! and Yes you are right!!!. For a normal page, where people just log in to watch a movie, it's ok, but imagine a gambling site. two tabs open at the same time, it can be a problem ... users will try to make simultaneous transactions. or on a bank page. Can something be done in authnext to avoid that?
@@simonhblanco That's outside the scope of what Next-Auth can do. Here's my recommendation -- anything that needs to be protected from simultaneous requests needs to be handled in the backend (API route or database). Because if simultaneous transactions can break the site, people will make thousands of requests from bots and get around your tab protection. So it needs to be handled on your backend with server protection not client-side protection.
This was a really comprehensive video on everything you need to get next auth set up. We're doing exactly the same thing in our enterprise SaaS. Currently exploring the new @auth package which next-auth is moving to, would be great to see you do an update video on this one with the new auth beta package (if you already haven't).
Been looking for something like this for some time now, I'm glad I found you since this really explains everything I needed in great detail. Thank you :)
Thank you! There's a lot here, but once you get it working it's so satisfying.
The way you are explaining everything is top notch, best tutorial I've found on TH-cam, of course I've subbed!
Thank you! That means a lot 😊
Great tutorial! Lots of good information in this video. I also like your presentation style. You never cover the user registration process so I will bring this tutorial down from 'ultimate' to 'almost ultimate' but it was still worth the watch!!
Haha, that's fair. Next-Auth takes the stance that registration is outside the scope of Authentication (which is true for OAuth). I created a video on making a custom register page that also covers saving the user with Prisma here: th-cam.com/video/HVFMc5Ac1F8/w-d-xo.html
You are my Angel man ! Thanks for this excellent explaination, was stuck like 4 days with NextAuth but this video resolved my problem in just 40 minutes. Thanks thanks !
Great to hear!
by far the best App directory Next-auth tutorial to date. And you made it while the build was still in beta LOL.
Haha, I know, it still holds up pretty good! Thanks :)
really, this was one of the best tutorial for next auth ever. u explained this content very clearly. thank u so much. i appreciate it and i would like u to go ahead and make video about api at crud process in next 13
Thank you, I'm glad you found it helpful! Yes, I'll add that to my list and work on it!
This was the most in-depth tutorial for NexAuth with NextJS I have seen. Really great work, you explained everything very clearly. I have no doubt this chanell will blow up. Just wondering if you could maybe cover the T3 stack and how to handle redirects to a specified page when unauthenticated (instead of just to the signin page) and how you would use the credentialProvider with email and password with the T3 stacks session tokens. Thanks again for the great video.
Thank you! I'll add the T3 stack to my list and make some content around how to do those things.
For handling the redirect when unauthenticated, you should be able to use `redirect` (server component) or the useSession hook and point the user to any page you want. I used the login page here, but it could be a different one. I'll make a followup video for creating a custom login page and show how to redirect to that.
Thank you very much Ethan. I really like your fast forward pace. Much much appreciated
Thanks, haha. I didn't want it to take too long
In this week, I have been struggling to learn auth with next-auth and prisma. This has been super helpful, thanks a lot!
You're very welcome! I'm glad I could help.
I'm looking for this video for several days, Thanks a lot!
I'm glad I could help! Let me know if you need anything else!
I got phenomenal value out of this video ! Thank you, Ethan.
Thank you! You 10x my auth game .
you save my life.
the tutorial is super informative & easy to follow up.
Glad to hear that!
Really well thought out and well explained tutorial Ethan. Really helped with my understanding with setting up Next-Auth with the latest versions of Next :)
Thanks! I'm glad I could help out :)
This video is extremely well done, and set me up perfectly for my webapp. Thank you, truly.
You're very welcome!
Thank's for this explicit tutorial !
Hi Ethan! Really loved your series on setting up a NextJS app with Prisma, Postgres and Next-Auth. The way you delve into the background mechanics and offer contextual understanding is a huge plus for me!
I'm not certain if this has been broached before, but possibly a video you can add to your backlog of ideas, is a video dedicated to handling dev/production environments. My primary intrigue lies in the nitty gritty of how to host a POSTGRES database and integrating it with the deployed NEXTJS app.
One hurdle, i've been struggling to understand how to properly manage different environment variables and how to set it up properly for local vs production setups. Your insights on this would be golden! Or if you have any resources you could recommend on this topic, that would be super helpful too!
Just to chime in as I've also been wondering this, I originally hosted my DB locally using postgres but recently switched to Amazon RDS by suggestion of a developer friend, it integrates almost identically to how Ethan showed in his first video, and was relatively easy to set up in RDS. My DB seeding and migrations also worked seamlessly! This also would allow deploying the actually application to be done separately to the DB (Although likely done on AWS, but really anything would work with the RDS connection string).
Not sure if this helped you at all, but I do recommend giving Amazon RDS a go as it has a great free tier and is very well received.
Regarding your point about the env variables, for local dev/things you don't want to commit to prod etc you can use the .env.local file, but I must say I'm a bit fuzzy on that myself, someone else with greater insight might be able to assist there.
hi @@Mantenner, thanks for the recommendation. I'll definitely check out RDS. I've been playing around with .env variables for the last few days. Seems like there's a bit of a conflict on how Prisma and NEXTJS like to consume variables from those files.
Thanks for the kid words, and great idea! Having a good understanding of how the environments work, how to set them up, and how to use variables between them is a great idea for a video. I'll work on that!
Great video man, found this in reddit and is just what I needed to handle users in my project!
Thanks, Reddit (for real). I haven't been super active since I don't want to spam self-promo but I try to make useful things. Glad it helped!
Thank you! This was an awesome tutorial. Keep 'em coming! 👍
Thanks, will do!
This channel should be subscribed! You are awesome in simplifying things.
Thank you so much 😀
there we go! thank you so much for this! u are amazing
Heck ya! Glad I could help!
23:27 "Thanks Chrome, so secure."
Gets me every time 😄
Right?? lol
exactly what i was looking for thanks you are a life saver
Awesome Nextjs, NextAuthjs tutorial. Keep it up
Thank you!
Hi Ethan, your videos are amazing 🔥💯
Thank you so much! I’m glad you like them!
Now I need to change the my files 😂 I was waiting for this
lol, hope it’s not too much of a change!
@@ethan_mick no just some few changes but gonna get a clean files
This is wonderful and well explained
Thanks 👍🏼
Thank you friend ......... the way you explain... now I have a clearer vision... before I understood it in a general way but you made me understand it step by step... thanks again
Att. Jose Grillo
Awesome guide Ethan! Love your work.
Thanks so much!
Excellent tutorial. Clear and concise, thank you
Thank you!!
Thanks for the video! It was really helpful! 😀
Bro, Thankyou so much for the tutorial. Hope u have a good day, good life, and everything good because i could make a login page using credentials now. GOD BLESS YOU SO MUCH BRO!!!!!!!!!!!!!!!!!!!!
OMG thanks Ethan... i already desperate learning about authentication
Glad I could help! It's a big subject with lots of nuance. Let me know how else I can help!
thank you so much for the great job you do, greetings from morocco.
Thank you so much!
Also would love to see your thoughts and process on adding CSS in JSX when things like Material UI and Chakra UI catch up with the server components :) Thanks again!
Will do! I've been doing a lot of Tailwind for my Server Components which works very well.
Nice nice nice... amazing video, thanks Ethan.
Thank you so much!
The best video ive found on this topic. Im subbin!
Thank you so much!
Really great content and explained really well
Amazing explanation!
Thank you so much
You are welcome!
Why didn't TH-cam show me this yesterday when I was looking for exactly this??? I struggled with it all day, then managed to get it and now YouTuube recommends it to me. That's cyberbullying!
Anyways, great video. Earned a sub!
Thank you so much! Sorry you were struggling, auth can be a pain to get right!
After days of frustration with JWT and session stuff, your video solved it! Massive thanks, subbed! Clear and concise.
Would be awesome to do a video on how we can use custom User types (for TS stuff) for sessions.
E.g. getting rid of the default “image” property etc
Welcome and thank you! I'll do what I can to make a video on that, I think it would be a great blog post too. Thanks!
Great tutorial, thank you! :)
I appreciate you very much, you have a very good command of the subject and your expression is very clear.
Could you please next tutorial using next-auth and next-intl together?
Thank you! I've had this request before, I'll add it to the list!
If anyone else has an issue with the middleware not securing the pages you specify, make sure the middleware.ts file is at the same folder level as your root page. For me this was in my /src folder.
Dude you are life saver man
thanks for the help. As I'm sure you already know, much of the docs and tuts are outdated. I was pulling my hair out trying to get this to work
Glad I could help! Yeah, I think it’s really helpful to step through all of these things end to end
Thank you Next Auth for good guide.
Glad you liked it!
Thanks for this awesome tutorial :)
You're very welcome!
You are amazing man 🍾
You are the best dude!
Nice content, thanks for this video ! 👏
Thanks, glad you liked it!
What an amazing tutorial! Could you explain (or maybe make a second video) about how to use Next Auth in a custom middleware (for example, a saas with custom subdomain settings)?
Yes!
For my SaaS apps that are on subdomain (such as app.domain.com or dashboard.domain.com) I put all the Auth stuff *on* that subdomain as well. This means the cookies and everything will Just Work.
If you don't do that, or you need to share the cookies across sub/domains you'll want to take a look at the Next Auth cookie options to configure all of this.
next-auth.js.org/configuration/options#cookies
@@ethan_mick Please look into using middleware to protect pages with the prisma adapter. It does not seem to work for me :(
@@oamarkanji3153 are you using JWTs are database sessions?
Everything seems to work fine with the specific package version you provided, the only thing I couldn't get to work was the /localhost:3000/api route handler, when I was using the other 2 auth methods client side and server side, but when I used the middleware technique at the very end now /api seems to work.
Glad it works at least at the end!
Let's say you set up 1) traditional auth, 2) google oauth, and 3) facebook oauth in your app. When a user logs in with all three of these methods, how should the app determine that this is indeed the same user?
You can check to see if an email exists in the database. If it does you can return some type of message saying a user for this email already exists.
Or you can ask the user to link between these accounts.
Same what leetcode does.
Thank you so much for this!
You're so welcome!!
this is really helping me. thank you
Glad I could help!
Super helpful! Thank you!
You're welcome!
Well done Ethan, the guides you are providing are up to date and clear ! Thank you for your effort
Glad you like them!
This works very well. Thank you
Glad it helped!!
thanks for the video, I saw months ago and now I had to use, best youtube video about nextauth. I' thinking how to implement "enable/disable" user access, maybe with short JWT expiration...
Nice video, learnt a lot. About the middleware though, what if we wanted to have other stuff as middleware? I tested it out and if I export default the other middlewares stop working. Do you have a video on that? Thanks.
I don't yet, but this is probably the trickiest thing when working with Middleware. I'll do what I can to make a video and try out a few ways. Do you have middleware you're using that you want to see merged together?
Damn great content... This is damn great content
Thank you!
Hi, Ethan! First, I just have to thank you for these videos. While I don't typically watch TH-cam tutorials, I've found your content to be incredibly informative and up-to-date.😁
I have a question related to using JWT for authentication. I've heard it is unsafe because there's no way of invalidating sessions, as they are self contained. AFAIK, their lifetime should therefore be short (minutes, hours at most). However, it's annoying to log in every few minutes too.
Do you have any experience with implementing refresh token rotation for credentials login with next-auth + prisma? Or with blacklisting tokens to imitate "revoking" them? I would love to see a tutorial about that. Or maybe even about "classic" session based authentication. Again, thank you for your amazing tutorials - I hope you have a lovely day 🌟
Thanks!
If session invalidation is important for your use case (What you outlined is valid! However, for some apps the threat profile is tame enough that it doesn't matter) then you can go two routes:
1. Session based tokens. These come with their own problems, but you can revoke them. Consider caching them at the API layer so you don't need to pound your database.
2. Similar to the above, store JWTs on the server (Redis cache, memory, etc) and give the client a lookup key that can look up that JWT. This way you can just purge the cache to invalidate the session.
3. Use JWTS for a short session and give them a way to refresh it with an API call and a refresh token.
These are a bit outside of the scope of Next-Auth, you'll need to do some work on your own to get it working. I think 3 is the easiest because you can just make an API that returns a refresh token and then have logic client side to refresh the JWT on a 401.
@@ethan_mick With option 3, could this involve using a custom OAuth provider?
Also do you have any resources you would recommend to get across best practices around managing and handling JWTs?
I truly admire your commitment to actively monitoring comments on your older videos. I'm not certain if TH-cam provides content creators with user-friendly tools for managing comments on their older content, but your dedication shines through nonetheless.
@@ethan_mick Thank you so much for answering - so helpful. I think I will try option 3, your tips about making the refresh token API sounds really smart! ☺
Thanks a lot, amazing!
Can you advise where on the doc it is showing how to set up the providers.tsx with the new app router ?
I really appreciate all your efforts in explaining these concepts.
It's so helpful. But I do have a question about the client side session.
It seems like all the extra info added isn't reflected on the session obtained via useSession(client side)?
Hello when i tried to add in layout i have error function parseModel(response, json) {
return JSON.parse(json, response._fromJSON);
} do you know what it can means ? thank you
Hmm, what code is that a part of? Did you make sure you have `use client` at the top of the file?
Hello, thank you for your reply. It is next 13.3 bug 13.2 is OK. But there is another problem when you first time sign in with credentials there is no session cookie in response so you have just token and callback cookies,…If you try to log again with these 2 coookis,…session is sent and saved,…you can try delete cookies and try to log in withou callback cookie. Do you know where can be the bug?
Love you man! ❤
Thank you!!
Great work, thank you
You are very welcome!
Note that the middleware.ts file should be "at the root or in the src directory (same level as your pages)" (see: docs). I have an src directory (not sure if this the preferred way to set up the project!), so it had to go in there, rather than at the project root as shown in the video.
Thx for the video.
Very true! I normally don't use the `src` directory, but this is an excellent point.
Do you think it's unnecessary? I wasn't sure. @@ethan_mick
@@kristiankanya431 I personally don't use it because:
1. Most of Vercel's code doesn't, and if they don't do it, I didn't see the reason to
2. I like to keep my directory structure simple, so fewer is better
3. The `src` felt like it was legacy behavior and no longer necessary.
That being said, if you like the organization it gives, that's fine! I prefer flatter directories, so I don't use it.
@@ethan_mick Good points made, thanks. I will work on altering it.
What if you wish to store the session in the database, regularly revalidate it, and, as a system administrator, have the capability to revoke access for a specific session? How would this be accomplished?
Please make videos about deployments of that kind of projects, with migrations.
🫡 You got it
thanks for great videos 🙏
Thank you!
THanks for the video, good job, but for some reason, my token in the session callback is always undefined :(
So good, Ethan! Thank you. Do you have one for OAuth and how to register using the app directory with Next.js 13.3? God bless
I don't have one for OAuth yet, but the setup is similar. Take a look at the docs and see if you can get it working with them, let me know!
Loved the content. Can you please make one with authorization too, instead of just authentication for the protected routes.
Thanks! Any particular style of Authorization? Eg, simple roles, RBAC, Policy Based Controls, etc?
@@ethan_mick
Just something that takes a jwt from the frontend and uses nextauth to verify and get decoded token, to give access to routes.
I would be thankful if you used tRPC. 🙏
I see some people have a prisma database query inside the JWT function to obtain some additional information about the user. Is that a good practice? if the jwt function is going to run multiple times, would it cause performance issues to have a database query inside?
I would not put database logic inside the JWT encode/decode functions, those are called way too often. If the database query is only on token creation that's probably fine, assuming the tokens live for a few minutes. The database should easily be able to handle a simple SELECT query like that.
there is often a Session Model defined in the schema.prisma. Do you know what it does? What are the use cases for defining a Session model in the database
Great question. When you store sessions in the database, you are storing a secure token (the session token), the user ID, and an expiration. The client stores the token in a cookie or local storage and uses it on all requests. The server can then read the token from the request (often sent as a HTTP Header) and look it up in the database. You can then validate that 1) it exists in the DB, and 2) it has not expired.
The benefit to doing this is you can delete a token from the database and it will invalidate all sessions using that token. For example, you have a "Log out of all devices" button for a user. When pressed, it would delete all tokens in the database for the user, so they are no longer logged in anywhere.
When you use a JWT, there is no database session. Only the JWT itself defines the authentication. So you can't invalidate a session by deleting it from the DB. The benefit though, is that you don't need to make a roundtrip check to the database to validate the session.
@@ethan_mick Thank you for your explanation
Hi Ethan! Can you please show us or at least give some hints about how to implement NextAuth with access token and relative token on the backend?
Yeah, I can work on that! Are you imagining the user gets a session token instead of a JWT and that token is also saved in the database?
This is precisely what i needed! Thanks!
Thank you! Glad I could help :)
If you are not getting the session details, then change
async authorize(credentials) to async authorize(credentials, req)
Do you use the `req` in the function when you do that?
@@ethan_mick req is not used inside the function, but I think it just needs to be added as a placeholder, maybe
Nice Video, Thanks
Amazing 🔥🔥
Thank you!
Subbed. Great job!
Thanks so much!
Will the middleware strategy to protect the app wil also protect the API routes? Can we specify them in the config ?
Well explained 👏
Thank you 🙂
friend thanks for the video, just one question...
If I open 2 tabs of my app, with my active user....
He recognizes it for me in the 2 tabs... fine, but if I logout in 1 tab... the other one remains open... it only accepts leaving the tab, it only updates... and the serious idea is that it does so in automatic
How should it be done using a useEfect or from the provider... Could you guide me please?
Greetings Jose Grillo from Venezuela
Two thoughts:
1) This is how browsers work. When you logout of 1 tab it won't update another tab. However if the user tries to do an action (like click a button or create something) the request won't be authenticated and they will not be able to do it. I don't think you should worry about this use case -- don't fight the browser and just let your authentication do the work.
2) If you really want to update different tabs look into the developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API API which let's different contexts communicate with each other. When the user logs out of 1 tab send a message and listen for it on the other tabs. When that message is received, refresh/logout.
@@ethan_mick Thank you very much, I will check
but your point of view is interesting ..... I will value it thanks
Success brother... I'm still very aware of your channel... many blessings
Hey Ethan, thanks for the great vid! Any way you could show how to do this with a provider like Google?
Check it: th-cam.com/video/ot9yuKg15iA/w-d-xo.htmlsi=J5gP0wUSjUoGCInk
Thank you so much!
Glad it helped!
Question I’ve been a bit stuck on , how would you handle if a user signed up with credentials previously but attempts to sign on with the same email using google provider ?
Great question! You can handle this 2 ways:
1. Just create a second user. Let users know that each way they login will make a different account.
2. NextAuth has a `callback` option that is called upon a successful login from OAuth. There is a parameter `profile` that is passed in that, for Google, contains the email. Use that email and lookup if you have a CredentialUser with that same email. Instead of creating a new user, finish the Auth with user from the database (use that primary key).
@@ethan_mick I wanted to just reject the user from signing in and let them know to sign in with the initial method of registration, I wasn’t sure how to achieve thisn
@@marxvision9874 If you throw an error in the `callback` the user won't be logged in and the URL will have a query `?error=err_text` where the `err_text` is whatever message your error had. You can add a custom error page to handle all these errors and tell the user what to do next: next-auth.js.org/configuration/pages#error-page
Thank you very much ! You’re great thanks for ur feedback you have a new subscriber
@@marxvision9874 Thank you!!