This channel is highly underrated, as a lead software engineer in our start up we are using nextjs and I used this channel's refresh and access tokens for authentication tutorials and it has been our day to day application because it enables us hit the same API for our mobile application
You have no idea how many incomplete videos I had to go through until I found this one. First person to explain every step properly and I finally get it. Took me a week to learn nextauth and without your vid it might've been a month.
@@SakuraDev I have a noob question if that's ok. Some websites have the ability to sign in with either an username or an email interchangably in a single field. Is this possible with next auth? Can I implement some kind of conditional logic to my authentication that accepts either parameter as a sign-in credential?
Yes it is possible. In your authorize function of the next auth, you can find the user in in user table where it emails match with entered username or matched with user's email
I am highly appreciative of this tutorial! Like others I have had many false starts due to gaps in my knowledge of all the necessary packages/libraries that work together in a nice onboarding service. This tutorial answers a majority of my knowledge gaps as a noob. Thank you for putting this together as I know how much effort and planning goes into something like this. I look forward to many more tutorials from you!
Sekura ❤ I’m only at the first hour of this tutorial. Had to submit a comment to say a big thank you! You absolutely know how to explain and teach. I love every minute of it.
Just opened the repo to see its goods and you can always tell the developer is going to be competent by looking at their choice of technologies used. Right on, bro
Man, you deserve a lot more subscribers. As a beckend developer, I had hard time understading the working of Nextjs, you nailed it with your best in class course. Now I could build an awesome application.
I must say this is an amazing course on next-auth, your way of teaching is very clear and easy to understand sir. I've learnt so much from this video, really useful for my uni project, going to share this with my friends. Thank you so much once again🙏🙏
Thanks for you vid. I've watched your Nest/Next vídeo from last year, and comparing with this new one, it's much better. I also think you improved your explaning skills a lot. Congratz bud.
First time here, and I'm blown away by your content! Your teaching is exceptional. Looking forward to more! Could you cover Role and Permission-based Access in your upcoming videos? Thanks for the great work!
You're very welcome! I'm glad you found the tutorial helpful. Creating valuable content is my passion, so hearing positive feedback is incredibly rewarding. If you have any questions or need further assistance, feel free to ask!
There are so many videos on Auth on this channel. There's a playlist but it doesn't have all the videos on Auth from this channel. Can you please tell me the order in which I am supposed to watch these videos?
have one question, first case if both frontend and backend as next, how to store session and access token and refresh token, should i store it in cookie or what?? how to recall the refresh token . same question about separate backend. bit stuck here, thank you.
Thank you for sharing this content. I have one question, how do you handle redirecting the user to the profile page when that user tries to access the login page after successful authentication using middleware.
I have followed the tut and was so proud that all works now. But a bit too well? I noticed that all server actions can be called from the client side even without authorization. I don’t use Prisma but just a executeQuery function for mysql2. That server function can be used on client, as it should, to make database queries with normal sql (can just put the query in there). But: Anyone can use it. I made a button on a client page (just the home page outside of protected routes) that accesses the server action. And it works! And whatever I do I cannot prevent the client to always and anywhere use that server action. No idea how to protect it… Really frustrating because that would mean I need to use api routes for database queries??
Is there a reason why we're creating 'pages/api/auth/[...nextauth].route.ts' instead of 'pages/api/auth/[...nextauth].ts' like the documentation suggested on their site?
This video is the best explanation on next auth with a credentials provider period. Thanks for your great work. Do you have a video on how to verify a jwt token returned by a backend?
Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue
Hi Sekura! It's me again! I've done some custom stuff to the project, and it's working fine on my machine. After that, I've send to Netlify, but after the deploy for some reason I'm getting error messages when trying to comunicate with prisma. Wich aditional configuration I need to do to make it work?
hey Sakura, nice video! in one of your last videos you showed how to create a custom authentication service using nestjs and nextjs with jwt tokens send via the header. could you make a new fullstack authentication video using http only cookies? i would really appreciate. 🎉
I have a question since it's been a month since I completed this and since then I've learned about the difference between token based and session based auth. With your method of implementing auth can I revoke user access instantly or will they still have an active token if I delete them from my database? There are multiple written and video tutorials on the web but all of them use jwt token sessions and it's very hard to manage access with them as the client keeps them even if they're removed from db.
Hey Sakura, I have a question. I've watched you vid, an ultil the part 17 when you finish the signin form, you dont talk about the authentication expires. If I'm not wrong, the authentication goes like: 1st access? - create a token and insert user data inside a token 2nd access? - use the session to get the token and retrieve the user info But for how long the token is up? Or its only expires when you log out? You can change the expire time like the commom Jwt method ou your NestJS vid? Thanks! Edit: Also, I added two new columns to user table (createdAt and updatedAt) to manage future updates. But I can't find a way to insert the values for this two new fields. I cant do this in the formSingUp with zod, but because of this I cant also do it on the registerUser function on routes.ts method because to make it work, I need to inputs these new fields to Omit. Can you give me an idea to make it work please? Lov u!
Hi, For the first connection, when we use nextjs as a fullstack, I believe, we do not need to worry about refresh token. but if we have a separate backend we need to think about the refreshing the access token.
and for the second question, you can set a default value in the schema for createdAt or you can set the createdAt manually when you creating a user, i.e. inserting a new user with Prisma. In this case you don't need to change the zod schema because we don't want to take the value of createdAt from the user in the Form. So just handle it inside the create user function. the same goes with the updated at
Thank you so much for sharing such a great tutorial video! sorry for asking, When exactly we need to use Nest.js too, for authentication? I mean while Next.js is capable of authentication what is the point of using Nest.js?
Thanks. We are using nextjs as a full stack project, so we don't have a backend server. If we use nextjs just as front end, then we need a back end server like nest.js to keep track of our user data. I have a video on that. You can find it on my channel
Hey Sakura, I have followed your NestJs and nextJs combine tutorial for handling refresh token. I replicate the same using Nextauth-5 In callback, we check the expire time and if expire we made call to refreshToken then we get But if in case, refreshToken also expire, the function will give 401. Under this condition, still nextauth keep user login. Is there any way yo trigger signOut() without clicking button ? Or is there any way to auto signout when such event happen
unfortunately nextauth signOut() is only working in client side ... all you can do is to redirect the user to an client side page which will call the signOut() function. in my opinion i think nextauth is really not well designed to work with refresh tokens (especially when using http only cookies)
great tutorial thank you so much can you also make project based tutorial using microservices architectures with nestjs,graphql,prisma,nextjs,docker so on
Since we are using the next.js as full stack project, we don't need refresh token. but I have covered it in my previous video which is about combination of Nest.js and Next.js: th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html
I came up with some solution getting google OAuth and refresh token strategy to work, thanks to your video: th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html It's is working but I don't know is it a good solution, I can share the code with you if you are interested. @@SakuraDev
It's based on the next auth. But I'm recording a new tutorial which is actually a monorepo of nextjs and nestjs and I use session based authentication in nextjs
Thanks for amazing video. But your video sound is very low. I have set to maximun volume i my pc and youtube video player. still sound is low. Cordial Suggestion to improve sound quality.
as I said you should register with your company email address in the mailtrap. with free email accounts like Gmail, we can just test the process. Although you can set SMTP Server with Gmail Server and send emails through your account.
sakura thank you for this amazing tutorial but i have little bug when i try to load my env variable from .env it doesn't load it shows me this error "Error: Missing credentials for "PLAIN"" but it works well when i hard coded it works when i hard code it like this user: "myemail", pass: "mypass", but it doesn't work in this case user: process.env.SMPT_EMAIL, pass: process.env.SMTP_GMAIL_PASS,
This channel is highly underrated, as a lead software engineer in our start up we are using nextjs and I used this channel's refresh and access tokens for authentication tutorials and it has been our day to day application because it enables us hit the same API for our mobile application
Thank you so much 🙏🙏. I am really glad it was helpful for you 🙂🙂.
@@SakuraDev truly helped me a lot.
I agree with your comment, god bless your parents.
shut up mohammed
You have no idea how many incomplete videos I had to go through until I found this one. First person to explain every step properly and I finally get it. Took me a week to learn nextauth and without your vid it might've been a month.
I am really glad that it was helpful for you 🙂. Thank you so much 🙏
@@SakuraDev I have a noob question if that's ok. Some websites have the ability to sign in with either an username or an email interchangably in a single field. Is this possible with next auth? Can I implement some kind of conditional logic to my authentication that accepts either parameter as a sign-in credential?
Yes it is possible. In your authorize function of the next auth, you can find the user in in user table where it emails match with entered username or matched with user's email
@@SakuraDev Thanks a lot there are a lot of details in your video that are super important yet people don't cover.
Thanks a lot 👍
I am highly appreciative of this tutorial! Like others I have had many false starts due to gaps in my knowledge of all the necessary packages/libraries that work together in a nice onboarding service. This tutorial answers a majority of my knowledge gaps as a noob. Thank you for putting this together as I know how much effort and planning goes into something like this. I look forward to many more tutorials from you!
Thank you so much for your enthusiastic comment. Thi gives me energy to move forward ⏩
this is the most straight foreward tutorial on next auth I love it
I'm really glad that you liked it 😊
Thanks a million. Your tutorial is not only the best abaout next-authenticaition. Its the door to modern next14 Fullstack Development.
Thanks for your nice words 🙏🙏
Sekura ❤ I’m only at the first hour of this tutorial. Had to submit a comment to say a big thank you! You absolutely know how to explain and teach. I love every minute of it.
Thanks a lot. I am really glad you found it helpful 🙏
Just opened the repo to see its goods and you can always tell the developer is going to be competent by looking at their choice of technologies used. Right on, bro
Thanks
Man, you deserve a lot more subscribers. As a beckend developer, I had hard time understading the working of Nextjs, you nailed it with your best in class course. Now I could build an awesome application.
Thank you so much 🙏. I am really glad that it was helpful for you 😊
I must say this is an amazing course on next-auth, your way of teaching is very clear and easy to understand sir. I've learnt so much from this video, really useful for my uni project, going to share this with my friends. Thank you so much once again🙏🙏
I'm really glad it was helpful.
Thanks for you vid.
I've watched your Nest/Next vídeo from last year, and comparing with this new one, it's much better.
I also think you improved your explaning skills a lot.
Congratz bud.
Thanks for your encouragement 🙏🙏🙏. This will give me energy to move forward ⏩
First time here, and I'm blown away by your content! Your teaching is exceptional. Looking forward to more! Could you cover Role and Permission-based Access in your upcoming videos? Thanks for the great work!
Thanks 🙏🙏. I have already actually 2 videos on role based authorization.
Keep making content like this, your content is great🙏
Thanks for your support 🙏🙏🙏
This is a great tutorial, thank you for all your hard work!
You're very welcome! I'm glad you found the tutorial helpful. Creating valuable content is my passion, so hearing positive feedback is incredibly rewarding.
If you have any questions or need further assistance, feel free to ask!
Thank you very much teacher, it was the best authentication training I have seen. Thankful
You are the best ❤️
I have subscribed your channel immediately after seeing your intro of this video.
Thanks for your support 🙏🙏
Amazing tutorial. All I've been asking for for years. Thank you very much
Thanks a lot 🙏🙏🙏
Thank you for the video, watching it here from 🇧🇷 Brazil, God bless you and your family, thank you very much for the great content, success brother!
Thank so much 🙏🙏🙏🎉💖
i will say that sakuradev is an underrated channel, thanks for all bro
I appreciate that!
Vahid, thank you very very much for the such an amazing tutorial!! Really appreciate it :) Lets continue? Waiting...
Thank you, I will
You're really amazing. Just everything I need right now. Thank you
Thanks 🙏🙏🙏
wow this is crazy i have beenn expecting this kind of tutorial from scratch on youtube what can i say thank you happy new year
Happy new year! Glad it was helpful!
Thanks alot for this tutorial! It was a big help to my project. Great job! 👍
Thanks you so much 😊
At @2:18:32 I'm getting an error: Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
There are so many videos on Auth on this channel. There's a playlist but it doesn't have all the videos on Auth from this channel. Can you please tell me the order in which I am supposed to watch these videos?
btw, coming here from your prisma/ drizzle tutorials and absolutely loved them!
This is what i been looking for
Thanks 🎉
❤❤love the way you teach
❤️🌹
Amazing tutorial! Thank you so much!
Glad you enjoyed it!
Perfect New Year GIFT! Thanks a lot
Thanks a lot.
have one question, first case if both frontend and backend as next, how to store session and access token and refresh token, should i store it in cookie or what?? how to recall the refresh token . same question about separate backend. bit stuck here, thank you.
Thank you for sharing this content. I have one question, how do you handle redirecting the user to the profile page when that user tries to access the login page after successful authentication using middleware.
I have followed the tut and was so proud that all works now. But a bit too well? I noticed that all server actions can be called from the client side even without authorization. I don’t use Prisma but just a executeQuery function for mysql2. That server function can be used on client, as it should, to make database queries with normal sql (can just put the query in there). But: Anyone can use it. I made a button on a client page (just the home page outside of protected routes) that accesses the server action. And it works! And whatever I do I cannot prevent the client to always and anywhere use that server action. No idea how to protect it…
Really frustrating because that would mean I need to use api routes for database queries??
Thank you!
Thank you!!
Thank you for this video!!!
Thank you so much 🙏🙏🙏🙏🙏
Is there a reason why we're creating 'pages/api/auth/[...nextauth].route.ts' instead of 'pages/api/auth/[...nextauth].ts' like the documentation suggested on their site?
This video is the best explanation on next auth with a credentials provider period.
Thanks for your great work.
Do you have a video on how to verify a jwt token returned by a backend?
Thanks for your nice words 🙏, Actually I have video about your question
th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html
Hi bro how to set the default page to be login when go to npm run dev in the browser it to be handle localhost:3000/login not the home page localhost:3000 I implemented but when I gave localhost:3000 its changing to localhost:3000/login but the issue is white space occuring 2secs then login page occuring how to resolve this issue
Hi Sekura! It's me again!
I've done some custom stuff to the project, and it's working fine on my machine.
After that, I've send to Netlify, but after the deploy for some reason I'm getting error messages when trying to comunicate with prisma.
Wich aditional configuration I need to do to make it work?
Hi very good tutorial, only one question on form validation, is it a client or server side validation for user registration?
Massive job. Thank you
Thanks a lot 🙏
Why api/auth/[...nextauth] is not working for me ??
hey Sakura, nice video!
in one of your last videos you showed how to create a custom authentication service using nestjs and nextjs with jwt tokens send via the header. could you make a new fullstack authentication video using http only cookies? i would really appreciate. 🎉
Good jobs 👏🏻👏🏻
I have a question since it's been a month since I completed this and since then I've learned about the difference between token based and session based auth. With your method of implementing auth can I revoke user access instantly or will they still have an active token if I delete them from my database? There are multiple written and video tutorials on the web but all of them use jwt token sessions and it's very hard to manage access with them as the client keeps them even if they're removed from db.
Hi, Nice Point, we should keep a database of tokens. with that, we can easily revoke tokens. We usually use Redis for that in our real world projects.
Hey Sakura, I have a question.
I've watched you vid, an ultil the part 17 when you finish the signin form, you dont talk about the authentication expires.
If I'm not wrong, the authentication goes like:
1st access? - create a token and insert user data inside a token
2nd access? - use the session to get the token and retrieve the user info
But for how long the token is up? Or its only expires when you log out? You can change the expire time like the commom Jwt method ou your NestJS vid?
Thanks!
Edit: Also, I added two new columns to user table (createdAt and updatedAt) to manage future updates. But I can't find a way to insert the values for this two new fields.
I cant do this in the formSingUp with zod, but because of this I cant also do it on the registerUser function on routes.ts method because to make it work, I need to inputs these new fields to Omit.
Can you give me an idea to make it work please?
Lov u!
Hi, For the first connection, when we use nextjs as a fullstack, I believe, we do not need to worry about refresh token. but if we have a separate backend we need to think about the refreshing the access token.
and for the second question, you can set a default value in the schema for createdAt or you can set the createdAt manually when you creating a user, i.e. inserting a new user with Prisma. In this case you don't need to change the zod schema because we don't want to take the value of createdAt from the user in the Form. So just handle it inside the create user function. the same goes with the updated at
BTW, thanks for your support.
Thank you very much for take your time to help.@@SakuraDev
Nice one sakura ❤❤
First Comment 😅 Thanks 🙏🙏
What is the theme that You use in VSCODE?
Bearded themes
@@SakuraDev thank you and which theme specifically do you use? 😊
I know only react and a little bit of next, is it enough to understand these concept?
👋 if you have some basic understanding of next.js, you can understand this video pretty good 👍
Tanks been waiting for this great project ❤
merci kheili khob bod
Thank you so much for sharing such a great tutorial video! sorry for asking, When exactly we need to use Nest.js too, for authentication?
I mean while Next.js is capable of authentication what is the point of using Nest.js?
Thanks. We are using nextjs as a full stack project, so we don't have a backend server. If we use nextjs just as front end, then we need a back end server like nest.js to keep track of our user data. I have a video on that. You can find it on my channel
❤🙏@@SakuraDev
good work
Thanks 😊
because of this vedeo i just sub you with my two accounts
Thanks for your support
Hey Sakura, I have followed your NestJs and nextJs combine tutorial for handling refresh token. I replicate the same using Nextauth-5
In callback, we check the expire time and if expire we made call to refreshToken then we get
But if in case, refreshToken also expire, the function will give 401. Under this condition, still nextauth keep user login. Is there any way yo trigger signOut() without clicking button ?
Or is there any way to auto signout when such event happen
unfortunately nextauth signOut() is only working in client side ... all you can do is to redirect the user to an client side page which will call the signOut() function.
in my opinion i think nextauth is really not well designed to work with refresh tokens (especially when using http only cookies)
great tutorial thank you so much can you also make project based tutorial using microservices architectures with nestjs,graphql,prisma,nextjs,docker so on
Great suggestion!
Great video but what about for consuming external nest.js REST APIs?
Hi, Thanks, For that you can watch this vide: th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html
i wonder if you also put refresh token client & server way too ..
Since we are using the next.js as full stack project, we don't need refresh token. but I have covered it in my previous video which is about combination of Nest.js and Next.js: th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html
cool sakura, and your explanation on that video it so good 🔥
Thanks Sakura for this great video, can we elaborate to connect OAuth with backend?
Yes I am going to create a tutorial for next.js and Nest.js in the backend and integrate the OAuth with the backend
I came up with some solution getting google OAuth and refresh token strategy to work, thanks to your video: th-cam.com/video/khNwrFJ-Xqs/w-d-xo.html It's is working but I don't know is it a good solution, I can share the code with you if you are interested. @@SakuraDev
why pucking no body uses backend for authentication nowadays, wtf?
Hi, you can watch my full stack auth video. It has a separate back end
good tutorial tanks
Thanks 🙏
looking forward to the next nextjs tutorial❤
awesome !!!!
Thanks 🙏🙏🙏
Thank you dear Vahid🤍
🙏🙏🙏
thanks sakura, can you please guide us how to logout inactive users based on session
you can adjust the jwt expiry time.
Why dont you let to save this on a list so I can watch it whenever I want?...
Does this work for next auth v5 too?
Unfortunately not, for v5 you can watch my auth.js v5 video
@@SakuraDev yeah just watched it, v5 become simpler and easier to implement
Is this database session method?
It's based on the next auth. But I'm recording a new tutorial which is actually a monorepo of nextjs and nestjs and I use session based authentication in nextjs
Impressive....
Thanks for amazing video. But your video sound is very low. I have set to maximun volume i my pc and youtube video player. still sound is low. Cordial Suggestion to improve sound quality.
Thanks for bringing that to my attention, I have amplified the second volume in my today video
Thanks Sakura.
Thanks 🙏🙏🙏
it was a rly good tutorial but i felt like the "okey" wasn't enough
Sir pls add the Github link soon.
Awsm video for beginners like me.
Added
Thank you so much
Thank you. Next.js + apollo client GraphQL Tutorial please...
Put it on my list
Thank you@@SakuraDev
unfortunately next-auth 5.0 changed all their code.
@SakuraDev When I send message, it can be seen in Mailtrap Inbox, but activation link is not sent to actual Email id.
as I said you should register with your company email address in the mailtrap. with free email accounts like Gmail, we can just test the process. Although you can set SMTP Server with Gmail Server and send emails through your account.
@@SakuraDev Thanks
Awesome tutorial. +++++++++++ 🙂
Many thanks 🙏🙏🙏🙏
sakura thank you for this amazing tutorial but i have little bug when i try to load my env variable from .env it doesn't load it shows me this error "Error: Missing credentials for "PLAIN"" but it works well when i hard coded
it works when i hard code it like this
user: "myemail",
pass: "mypass",
but it doesn't work in this case
user: process.env.SMPT_EMAIL,
pass: process.env.SMTP_GMAIL_PASS,
to fix it try changing the "port" to 587