A masterclass. Your video is the most complete on TH-cam. Most of them always skip an important step, so their video become useless. You've made everything from A to Z, thanks a thousand time 🙏
Not an easy transition to the NextJS section if you're following along with code, but if you can figure it out, hands down one of the best tutorials out there for refresh tokens for both client and server.
Hey thank you so much, you made this very clear to me, I'm using session and not JWT, but your content is currently helping me a ton to setup all this stuff ☺
I will also learn this Tutorial, The combination in this tutorial is awesome ! I see how amazing things NestJS can do ! I am still waiting for NestJS Postgres TypeORM, JWT Token, Key Cloak authentication, user role and OTP login !oo
Hey, I am really glad you like it. Since I have not worked with Key Cloak, I need to do some research and find out how we can integrate it with node.js frameworks.
@@SakuraDev I appreciated your replied, I like how you teach a lot. it simple and easy to understand for beginner, but I have given some intermediate task that not much good tutorial available form y usecase, you're kind of my last hope lol
Thanks for the great tutorial. I just want to make one clarification for those who are not familiar with JWT authorization. The refresh token must be implemented in such a way that it cannot be used more than once. And if an malicious user gets your refresh token and uses it, you will notice it immediately when you try to use it on your side. But in your implementation, if I understand correctly, the refresh token is reusable, since it is hardly possible to implement it without saving the token value itself to the database.
Thanks a lot 🙏🏻🙏🏻 You have made it super clear.. and you managed to talk about i guess everything that related to authentication and authorization unlike other youtubers
Hi, I have a question. The refresh token is only use when you reload the page or re-login. What's happen if the access token is expired then you call an API without reload the page? I'm so confused, please help me awnser this. Thank you!
Sir , your tutorial was amazing, i have an one question, my question is when you try to refresh the token at that point is it possible to clear the session with sign-out and redirect to the login page?
That is the nature of JWT auth. There is no real way to honor the user's request to sign out (to invalidate a JWT token) because of this the users are going to stay logged in until the access token expires. In order to solve this issue, you are going to have to look to session based authentication (also known as cookie-based authentication). Because you can save the session tokens in the database, it is very easy to de-authenticate the users - just delete the session token or mark it as invalid.
thanks for the video 🙏🙏❤❤, I was curious how to handle role base authorization, at 1:25:07, you created middleware only for those who have sessions, but what if I have a dashboard for users and a dashboard for admin or maybe a dashboard for sellers? I like the way you solved the refresh token problem. I usually use axios interceptors like you taught me in the past.
Thank you so much. your tutorials helped me on my own project. A project idea if its ok, users triggers long running job from client side seeing live status of the said job. Something that can handle lot of users kicking off long running job/script etc
Thanks. Typically, Node.js is not good on long CPU intensive jobs. although, its performance on I/O intensive jobs is great. so it is better to use microservice architecture for this kind of jobs.
With this implementation if i provided a correct token i can Access any endpoint with all the ID's.. that means that i can access any profile i want if i have its id
That's right, we should have done some extra validation for that, for example we can extract the id of the user from the access token and authorize the user to get the profile if it is its own profile.
When the session expires and the tokens refresh, if you don't press F5, it keeps calling the API thousands of times and when the Refresh expires it gives a lot of errors.
Briefly skimmed through the vide and it look like exactly, what I was looking for. Just had a quick question, my backend for user authentication is developed in Django, but this will be the same right? Thanks!
At 1:23:44 when you refresh it still has the username in the sessions (top right). How is a good way to have all of this updated as well when the accessToken expires?
Thanks alot for the amazing videio but now what will happend if the refreshToken expired? How I can force the user to logout ? That the main issue i faced when i tried many times to implement the NextAuth.
Good video except that you left out an important part: Checking if the refresh token is expired. In a comment below u mentioned that you should just call the sign out function in this case but inside the jwt callback it is not possible to call that function. Yes you could run it inside the protected page but that is also not practical if there are multiple protected pages. Then there is also the middleware.ts but when calling the sign out function there and redirecting the user, a window is not defined error is being thrown...
@@SakuraDevI found a very simple solution for this. We can include the "session" option in inside [...nextauth].ts right after the "callbacks" option. There we set strategy to jwt and maxAge to the same lifetime that we specified for the refresh token in the custom backend. The session lifetime and refresh token lifetime will be synchronized that way. If the lifetime for the refresh token is 7 days (and session maxAge 7 days) and the user visits the page after 7 days, the session (from the session option) will be expired and the user will be logged out. Hope this helps anyone having the same issue
There is also another big issue: When reloading a page manually the jwt callback is being triggered, but the jwt callback is not being triggered on page transitions. So if the user stays on the same page until the access token expires and then e.g. submits something using a button click, he will provide the invalid access token because it has not been refreshed. I also figured out a solution for that which includes using the refetchInterval option from the SessionProvider component
tks for your kindness sharing this nestjs, this is i am looking for.. please make another video full stack using nest js and next js, like marketplace or airbnb or linked in.. tks
Hi thanks for the video, I have a question, at the 47:17 mark in the video, I have an error that "Parameter 'req' implicitly has an 'any' type." so it's really an any type or something other type? I'm fixing it by add ''@Request() req: any" but do you have any better idea?
Wonderful tutorial! I would like to ask a question that i couldn't understand in the NextAuth docs: Lets say that we have two computers: "A" and "B". - I log in with with my account in computer "A" - Then i log in with the same account in computer "B" I understand that computer "B" should have the refreshed token, and computer "A" should have it's own token as invalid (therefore the refresh endpoint would give an error). But how does NextAuth deals when the HTTP call inside the refreshToken function gives an error? Does it erases the cookie? Sorry for the bombarding of questions, and again, many thanks for the tutorial! EDIT: I think the problem of my question is more about the business model of the api (if the backend allows two active tokens at the same time for example), but i still would like to know what should happen if that refreshToken gives an error hehehe
Hi, In this project, the backend does not keep track of the jwts, so it allows multiple valid jwt as far as they are valid and not expired. if you want to keep track of active jwts, you should store them in a db when you are creating them.
Great tutorial! How can i implement both Credentials and oAuth providers in Auth.js, but with my backend logic in NestJs? That is, store my users in DB, but only NestJs can read/write database?
Monorepo with nextjs + nestjs using drizzle and next-auth with the drizzle adapter would be cool video to watch. Where both next and nest share this drizzle db
Thank you so much for this video.I have done authentication with cookies using nestjs and using the api with nextjs 13.on my local host , it works very well and sets the cookie and persists on page refresh.but when i deployed the nestjs api the cookies does not set at all.the login is successful but the cookies dont set.I have tried several solutions but i still get same issue.any idea on how i can go about this? i will really appreciate help on this.Once again thank you so much
Thank you so much this video is awesome I have a question. at the 1:41:30 mark in the video, there's a question about how to hide the session information that appears in the network tab every time you access the web, specifically the "GET /api/auth/session" request, which shows session details such as user and backendTokens. Is there a way to conceal this information? The reason for wanting to hide it is that the token values are being exposed. Do you have any advice on this matter?
I love this tutorial! I have been looking for something like this but then I have an issue. I started following the tuorial as I did not have any issues on the backend setting up the things I set up but then I had serious issues with the Next.js next-auth. I am hitting the endpoint but then I am not getting results. I have tried to log the response to see what it contains but then I see nothing in the console. I suspect that it does not log anything because the page refreshes everytime I enter the credentials. Also my return object from the backend is different yours in the video but I was under the impression that I should be able to customixze it to do what I want to, but back to my question, what do you think could be the reason for this?
Hi there, Nice video... but i have a question, when you navigate into other tabs and came back, it really does the refresh token, but it does not work well while navigation into others routers and reloading page (f5, and others reloads methods) there is an method to solve this problem, to when it reloads the page it does the refreshToken, if accessToken expired? I know in other video that you made, it works but in the client side, but i want to know if there is an way to do in the server side, thanks
Appreciate your dedication! I have a question about the token stuff! In real-world projects I think, refresh token stuff works like when accessToken expires then again call for access token (till refresh token not expire), and when refresh token expire then user should logged out meaning need to login and new refresh token add. But in your case, it's not working like that, may I know why?
@@SakuraDev I think you're doing that with client side, because i didn't get any of that idea properly from backend! That's why get confused, plus you didn't send any token in cookies through backend
@@hasanulhaquebanna there are two approach for authentication in backend. Stateless which uses jwt and stateful which uses session in backend. You are talking about session based auth and I talk about stateless auth.
in min 22:00, why you didn't provide the hash salt (which you set to 10 breviously) while comparing the given password and the stored password hash? N.B: here is the code snippet I am asking about : await compare(dto.password, user.password)
@@ahmedf2 Really nice question. The compare function's role is simply to check if the two hashes match. The salt and the number of rounds used for hashing are known and stored with the hashed password, so there's no need to specify them in the comparison function.
İ have a small and important question. We have an api that lists one product. We will ensure that the products are listed by using this api in the admin panel. Let's assume that we get the token information thanks to NextAuth, so we need to use it in the api as headers: {Authentication: 'Bearer {token}'}. When the page is first loaded, NextJS does not know what this "token" information is, so it crashes while fetch. And the products unfortunately do not appear on the screen. Is there any chance we can do this without putting a talk like if(token) ?
Hi, It seems you are fetching your product in a client component. I would recommend to fetch data in a server component and the create a loading.tsx page in the same level of that page and then inside the loading just render a spinner or a loader or... The next.js will show the loading page, while your data if fetching
Hey, can you please make the video where you combine custom credentials and Google Provider for example? It works cool for now, but in my app, I want to add OAuth and I can't figure out how I need to combine these 2 flows. Like we need a password for user creation, right? Do we need to create a separate model for OAuth users? Thank you again friend!
Hello Sakura Dev, today I watched a lot of videos of you. But I still have some questions, please help me :((. I'm building a fullstack website with NextJS. I'm using NextAuth for authentication. And now I can login by credentials and some third app, but I want to have a jwt token to middleware protect when success logged in. But in my session, I don't have any jwt token. How can I achieve it or Do I have to do it? Is safe when return the id in the session? I have tried to return the public information of user in session, and they id I save in jwt, is that right?
@@SakuraDev Yes, I want protected my post api, because I return the user id in session, so I nervous that can be got by somebody, and they can do a post api
Very nice tutorial. I tried to follow up the client side with Next-Auth, cause my authentication backend is already running in ASP. I noticed one issue, and maybe you can explain what is going on. When I authenticate, I'm having correct user data, access token, refresh token and expires in values, till the first refresh call. Refresh endpoint returns correct data, and the same way I'm returning new token with modified backendTokens, but then on every jwt callback, there are still the same values. So it keep refreshing token on every request. But what funny is, when I use getServerSession in Server Action, there the token is correct (refreshed one). So I ended up refreshing token on each and every request after first one expires. Has anyone noticed anything like that before?
i have a question , we have the api for auth using nestjs why we must do the nextjs server api ? is this because the next-auth package want it that way ? i never use the next auth package so i need some explain about that
I 'd faced the problem of CORS Error when sends POST request by await fetch(Backend URL + "/auth/register" {...}) from the client side. Will be very thankful for answer.
i have a question. like we know next auth is default to 7d but when we use refresh token like this that back end token will more than 7d right . so if the nextauth session was expire what happen here ?
@@SakuraDev no. coZ back end refresh token is keep refreshing so it is mean that the time of refresh token is keep longer and longer . back to our next auth session we just use the default to 7day so this point it will not sync . what i want is to make sure that next auth session is expire when the refresh token is expire to keep it sync i hope you get my purpose
Thank you for your response. But Sometimes, the tokens might be good but the user has been deactivated while logged in, which will cause the user profile to be 401. At that point, I'd like to log the user out. Please how can I achieve this? Cause at that point, the user is still authenticated but the profile details getting are throwing a 401 error. Thank you for all you do.
آقا وحید من یه چالش تو پروژه شرکتمون دارم که ساخت فرم ساز هستش بک اندمون لاراول هستش ورودی های فرم همون اینپوت هاش ساختار جی سان ذخیره میشه مثلا تایپ اینپوت تکست یا نامبر خیلی هم ابتدایی ینی ایونتارو فعلا ذخیره نمیکنیم من خواستم با formbuilder پیادش کنم متاسفانه پکیجش جی کوئری هستش برا ری اکت شما چه پکیجی رو توصیه میکنید من هرچی گشتم چیزی پیدا نکردم که خوب پوشش بده مسئله ساخت فرم انگار باید از اول چرخ بسازم و ددلاینمون همش یک هفتش مونده از تایپ اسکریپتم استفاده میکنم و نکست جی اس
مثلا اکثر پکیجایی که برای ساخت cms هستن اشتراکای سنگین دارن که برا بلند مدت کاربرد ندارن مثلا فایل منیجر sync fusion یا x data grid جداول متریال یو آی که پجینیت ای پی آی یا اینفینیت اسکرول ندارن بنظرم کانسپتای خوبی هستن برای تولید محتوا
age dorost motevajeh shode basham, shoma mikhahid be sorat dynamic ye form ro besazid ke har dafe tedad input ha motefavet hast. agar masale in hast kheili rahat ba reach-hook-form mitoonid anjab bedin.
are masalan ye sidebar hast dakhelesh anvae objectaye form hast button checkbox input type ha bad ba dnd kit inaro drop konim to content nahayat json sakhte shode az on sidebar to db zakhire konim va samte front roosh map bznim karbar btoone poreshoon kone va submit kone @@SakuraDev
No it's not better. I just wanted to show how auth works deep inside nestjs. you can use passport. you can check my recent NestJs Full course for that.
@@SakuraDev thank you for the reply, i just got one more question to ask! when i refresh the tokens.. the old access token should not work anymore right ? but i noticed that it's still working for me
Hi, There is a small issue with the current Nextjs setup. Say that an endpoint is going to be hit on a button click in client side. If the token has expired, the jwt callback does not get called. It gives a 401 unauthorized. Any suggestions on how to fix it? I apprecaite your content. ♥
@@SakuraDev Awesome video, but for my project I have stumbled on the same issue. I found your older video where you manually update session, should I use that approach when hitting 401 on client side? th-cam.com/video/RPl0r-Yl6pU/w-d-xo.html
❤Please Support me by subscribing to my channel 👉🏻www.youtube.com/@sakuradev?sub_confirmation=1
i'm already subscribed sir 😇🤗🙃. and thanks your all tutorial videos 🙏. god bless you sir
A masterclass. Your video is the most complete on TH-cam. Most of them always skip an important step, so their video become useless.
You've made everything from A to Z, thanks a thousand time 🙏
Thank you so much for your nice words 💞. I'm really happy that you like it 😊
Not an easy transition to the NextJS section if you're following along with code, but if you can figure it out, hands down one of the best tutorials out there for refresh tokens for both client and server.
Thanks 👍
I'm also havind difficulties transitioning to the NextJS. It doesn't even build! How did you manage to follow along the tutorial?
I can assure you, this is one of the best explanations on implementing authentication in Nest/NextJs
Thank you so much for your support 💖🙏
wow... this is the video I've been waiting for, thanks man
Hope you enjoyed it!
Hey thank you so much, you made this very clear to me, I'm using session and not JWT, but your content is currently helping me a ton to setup all this stuff ☺
Very good tutorial, perfect u said a lot of things can not find in others tutorials, especially how to refresh the accessToken silently.
Thanks, I am glad you like it 🙏
@@michaeltrembovler8301 thanks 🙏 it was for the mic settings. I have fixed it.
I will also learn this Tutorial, The combination in this tutorial is awesome !
I see how amazing things NestJS can do !
I am still waiting for NestJS Postgres TypeORM, JWT Token, Key Cloak authentication, user role and OTP login !oo
Hey, I am really glad you like it. Since I have not worked with Key Cloak, I need to do some research and find out how we can integrate it with node.js frameworks.
@@SakuraDev I appreciated your replied, I like how you teach a lot. it simple and easy to understand for beginner, but I have given some intermediate task that not much good tutorial available form y usecase, you're kind of my last hope lol
Thank you so much, NextJS Auth explained well with external BE... amazing
I'm glad you found it helpful! Combining it with an external backend adds a layer of complexity, but understanding the core concepts is crucial.
Thanks for the great tutorial. I just want to make one clarification for those who are not familiar with JWT authorization. The refresh token must be implemented in such a way that it cannot be used more than once. And if an malicious user gets your refresh token and uses it, you will notice it immediately when you try to use it on your side. But in your implementation, if I understand correctly, the refresh token is reusable, since it is hardly possible to implement it without saving the token value itself to the database.
This is far better than those paid courses out there 😍
I am really glad that you liked it 😊
Thanks a lot 🙏🏻🙏🏻
You have made it super clear.. and you managed to talk about i guess everything that related to authentication and authorization unlike other youtubers
Thanks 🙏🙏
good job bro ! A most comprehansive tutorial I've seen.
Thanks 🙏🙏🙏🙏
Amazing video tutorial. Everything explained and detailed to its core perfection!
Thank you so much 🙏🙏🙏🙏
Thank you, a very clear and useful tuto ❤
Thank you so much 🙏. The newer version of this video will be uploaded next Monday which covers a lot more new features.
I was looking for a tutorial, not for a mayor!
(brazilian meme to show how grateful I was for find this!)
So, I hope you like it 😉
This was insanely helpful for me. Thank you!
Thank you so much for your support 🙏💓
just thank you! You achieve new spectator!
Thanks for visiting and welcome to my channel 👋
i'm wordless, you helped me alot. thank you so much for posting this content!!!!
Thanks 🙏🙏. I am really happy it was helpful for you
that is realy what i was looking for a while... thank you a lot
Glad I could help!
Thank u, one of underrated awesome content out here.
Glad you think so!
You're the best, Brother! Hope you have a wonderful life ahead of you!
Thanks for your nice words 💖. I hope you do well ❤️🩹
thank you so much! A real masterclass.
You're very welcome!
Hi, I have a question. The refresh token is only use when you reload the page or re-login. What's happen if the access token is expired then you call an API without reload the page? I'm so confused, please help me awnser this. Thank you!
Usually you're making a call for a refresh token before current access token expired
Thank you so much friend it's been really useful tutorial!
I am really happy it was helpful for you😃🌹
In CreateUserProfile section you can also replace id with +id so it will convert the string to number
Thanks for the heads up!
coming here again, very useful video
Thank you so much 🙏🙏🙏
thanks bro you are the best teacher!
Thanks 🙏👍, I am really glad to hear that from you ☺️
Hey ! Nice video!
I've just got one question: how do you ensure that, on the Next side, the user is automatically logged out when their token expires?
Sir , your tutorial was amazing, i have an one question, my question is when you try to refresh the token at that point is it possible to clear the session with sign-out and redirect to the login page?
Point on. Just tested: in case of invalidated refresh token, the user session remains valid. I could even navigate to routes assumed protected.
Yeaa , and even i con't call logout function in server component also ,
That is the nature of JWT auth. There is no real way to honor the user's request to sign out (to invalidate a JWT token) because of this the users are going to stay logged in until the access token expires. In order to solve this issue, you are going to have to look to session based authentication (also known as cookie-based authentication). Because you can save the session tokens in the database, it is very easy to de-authenticate the users - just delete the session token or mark it as invalid.
best video ever. love from Bangladesh.😍😍
❤️❤️
thanks for the video 🙏🙏❤❤, I was curious how to handle role base authorization, at 1:25:07, you created middleware only for those who have sessions, but what if I have a dashboard for users and a dashboard for admin or maybe a dashboard for sellers?
I like the way you solved the refresh token problem. I usually use axios interceptors like you taught me in the past.
Hey can you make a video with both google and oauth provider like google with capabilities of storing both of these in a database
In your components you have manually added the Bearer totken which is not a easily maintainable approach, what if refresh token in invalid?
Cant wait the next video
I am really happy that you like my video. In the next video I will refactor the nest.js project and use Drizzle ORM for that. I hope you will like it.
Amazing tutorial. Thanks a million
You're very welcome!
Thank you so much. your tutorials helped me on my own project. A project idea if its ok, users triggers long running job from client side seeing live status of the said job. Something that can handle lot of users kicking off long running job/script etc
Thanks. Typically, Node.js is not good on long CPU intensive jobs. although, its performance on I/O intensive jobs is great. so it is better to use microservice architecture for this kind of jobs.
@@SakuraDev interesting, do you know any example repo i can look at? my main goal is to run playwright.js browser automation scripts
Greate video , Thank you for sharing 🥰
Thanks a lot 🙏. You can also check out my latest Nestjs course playlist.
Great Content ! Keep Up The Good Work !
Thanks, you too! I am really glad You liked it.
@@SakuraDev I am already watching it for a second Time ! keep up the Good Work ! Great Content
This is .... damn! so goooood. thank you a lot ....couldn't help subscribing :)
Thanks 👍
With this implementation if i provided a correct token i can Access any endpoint with all the ID's.. that means that i can access any profile i want if i have its id
That's right, we should have done some extra validation for that, for example we can extract the id of the user from the access token and authorize the user to get the profile if it is its own profile.
You are awesome as always :) ! Thank you.
Thanks 😃🌹
Thanks!
Thanks a lot for your support. ❤❤🌷🌷
Thank you very much. This video was very helpful.
Really glad it was helpful
When the session expires and the tokens refresh, if you don't press F5, it keeps calling the API thousands of times and when the Refresh expires it gives a lot of errors.
Thank you so much for the video
Thanks 👍🌹🙏
Definitely great!
🌷🌷🙏
Briefly skimmed through the vide and it look like exactly, what I was looking for. Just had a quick question, my backend for user authentication is developed in Django, but this will be the same right? Thanks!
Hey 👋. Thanks 👍. Yes the nextjs part is the same.
At 1:23:44 when you refresh it still has the username in the sessions (top right). How is a good way to have all of this updated as well when the accessToken expires?
Thank you for this beautiful video
Thank you too, Our pleasure!
This was a nice tutorial... what if a user change their system time won't it keep their token from expiring
I have created a new version of this video in which I addressed this issue. It will be uploaded tomorrow
Thanks alot for the amazing videio
but now what will happend if the refreshToken expired? How I can force the user to logout ? That the main issue i faced when i tried many times to implement the NextAuth.
Good video except that you left out an important part:
Checking if the refresh token is expired.
In a comment below u mentioned that you should just call the sign out function in this case but inside the jwt callback it is not possible to call that function. Yes you could run it inside the protected page but that is also not practical if there are multiple protected pages.
Then there is also the middleware.ts but when calling the sign out function there and redirecting the user, a window is not defined error is being thrown...
Thanks for bringing that to my attention 🙏
@@SakuraDevI found a very simple solution for this.
We can include the "session" option in inside [...nextauth].ts right after the "callbacks" option. There we set strategy to jwt and maxAge to the same lifetime that we specified for the refresh token in the custom backend.
The session lifetime and refresh token lifetime will be synchronized that way.
If the lifetime for the refresh token is 7 days (and session maxAge 7 days) and the user visits the page after 7 days, the session (from the session option) will be expired and the user will be logged out. Hope this helps anyone having the same issue
There is also another big issue: When reloading a page manually the jwt callback is being triggered, but the jwt callback is not being triggered on page transitions.
So if the user stays on the same page until the access token expires and then e.g. submits something using a button click, he will provide the invalid access token because it has not been refreshed.
I also figured out a solution for that which includes using the refetchInterval option from the SessionProvider component
tks for your kindness sharing this nestjs, this is i am looking for..
please make another video full stack using nest js and next js, like marketplace or airbnb or linked in.. tks
Thanks 🙏, I will do that
Nice effort. we have learned a lot
Thank you! I'm glad you learned a lot.
Hi thanks for the video, I have a question, at the 47:17 mark in the video, I have an error that "Parameter 'req' implicitly has an 'any' type." so it's really an any type or something other type?
I'm fixing it by add ''@Request() req: any" but do you have any better idea?
Wonderful tutorial! I would like to ask a question that i couldn't understand in the NextAuth docs:
Lets say that we have two computers: "A" and "B".
- I log in with with my account in computer "A"
- Then i log in with the same account in computer "B"
I understand that computer "B" should have the refreshed token, and computer "A" should have it's own token as invalid (therefore the refresh endpoint would give an error). But how does NextAuth deals when the HTTP call inside the refreshToken function gives an error? Does it erases the cookie?
Sorry for the bombarding of questions, and again, many thanks for the tutorial!
EDIT: I think the problem of my question is more about the business model of the api (if the backend allows two active tokens at the same time for example), but i still would like to know what should happen if that refreshToken gives an error hehehe
Hi, In this project, the backend does not keep track of the jwts, so it allows multiple valid jwt as far as they are valid and not expired. if you want to keep track of active jwts, you should store them in a db when you are creating them.
Terima kasih.
Thank you so much for your support ❤️🙏
Great tutorial! How can i implement both Credentials and oAuth providers in Auth.js, but with my backend logic in NestJs? That is, store my users in DB, but only NestJs can read/write database?
Hi thanks 🙏. About your question, yes we can it is little different. Actually I am planning for creating a video about it.
Monorepo with nextjs + nestjs using drizzle and next-auth with the drizzle adapter would be cool video to watch. Where both next and nest share this drizzle db
Ok, This is a nice suggestion. I put that in my list
Great job sir 👏
Many thanks
Thank you so much for this video.I have done authentication with cookies using nestjs and using the api with nextjs 13.on my local host , it works very well and sets the cookie and persists on page refresh.but when i deployed the nestjs api the cookies does not set at all.the login is successful but the cookies dont set.I have tried several solutions but i still get same issue.any idea on how i can go about this? i will really appreciate help on this.Once again thank you so much
I have one doubt. How to logout user when refresh token is expired?
Thank you so much this video is awesome
I have a question. at the 1:41:30 mark in the video, there's a question about how to hide the session information that appears in the network tab every time you access the web, specifically the "GET /api/auth/session" request, which shows session details such as user and backendTokens. Is there a way to conceal this information? The reason for wanting to hide it is that the token values are being exposed. Do you have any advice on this matter?
Yes, but it isn't a big deal because if the user is not authenticated, it is not shown in the network tab.
Thanks 👍
@@SakuraDev thank you!
@@SakuraDev How about XSS issue?
Hey, Thanks it's realy cool tutorial!
Thanks, 🙏 I am really glad you like it
Great tutorial! How do we generate random SSL Keys on Windows machines?
Hi, You should install open ssl on your windows machine and then run this command:
openssl rand -hex 32
I love this tutorial! I have been looking for something like this but then I have an issue. I started following the tuorial as I did not have any issues on the backend setting up the things I set up but then I had serious issues with the Next.js next-auth. I am hitting the endpoint but then I am not getting results. I have tried to log the response to see what it contains but then I see nothing in the console. I suspect that it does not log anything because the page refreshes everytime I enter the credentials. Also my return object from the backend is different yours in the video but I was under the impression that I should be able to customixze it to do what I want to, but back to my question, what do you think could be the reason for this?
Check about the useSession. If you are using the NextJS 14 with server components, it will not work.
Awesome Tutorial........... Can you make one with GRAPHQL please
Put it on my list
Amazing ❤❤❤
Thanks 😊👍
How to use Google Provider with it? Client is not sending password to check the authenticity of the user.
Hi there, Nice video... but i have a question, when you navigate into other tabs and came back, it really does the refresh token, but it does not work well while navigation into others routers and reloading page (f5, and others reloads methods) there is an method to solve this problem, to when it reloads the page it does the refreshToken, if accessToken expired? I know in other video that you made, it works but in the client side, but i want to know if there is an way to do in the server side, thanks
why use nest for back-end? is this for educational purpose or next can't handle back-end services?
Next.js can handle backend services. But for scale projects, definitly, you need a powerfull backend framework like nest.js.
@@SakuraDev thank you sir.
@@SakuraDev what is so powerfull in nestjs? next can handle all this easily. If you don't use backend for other projects, you can use next
@@johnkucharsky6927 for example , with nest.js you can easily create microservices.
awesome !
but I got issu when I refresh the token for the first time it's work but then will refresh secend time it's send the same old refresh token
Appreciate your dedication! I have a question about the token stuff!
In real-world projects I think, refresh token stuff works like when accessToken expires then again call for access token (till refresh token not expire), and when refresh token expire then user should logged out meaning need to login and new refresh token add.
But in your case, it's not working like that, may I know why?
Exactly. My solution is following that approach. Is there a problem with that?
@@SakuraDev I think you're doing that with client side, because i didn't get any of that idea properly from backend! That's why get confused, plus you didn't send any token in cookies through backend
@@hasanulhaquebanna there are two approach for authentication in backend. Stateless which uses jwt and stateful which uses session in backend. You are talking about session based auth and I talk about stateless auth.
@@SakuraDev thank you so much for clarification but with jwt we can also get both approaches right? That is what I tried to say
@@hasanulhaquebanna yes we can use both. 🙏👍
in min 22:00, why you didn't provide the hash salt (which you set to 10 breviously) while comparing the given password and the stored password hash?
N.B: here is the code snippet I am asking about :
await compare(dto.password, user.password)
Hey, when comparing, we don't need to pass the salt rounds.
@@SakuraDev why, isn't the salt affect how the hash output will look like?
@@ahmedf2 Really nice question. The compare function's role is simply to check if the two hashes match. The salt and the number of rounds used for hashing are known and stored with the hashed password, so there's no need to specify them in the comparison function.
İ have a small and important question.
We have an api that lists one product.
We will ensure that the products are listed by using this api in the admin panel.
Let's assume that we get the token information thanks to NextAuth, so we need to use it in the api as headers: {Authentication: 'Bearer {token}'}.
When the page is first loaded, NextJS does not know what this "token" information is, so it crashes while fetch. And the products unfortunately do not appear on the screen. Is there any chance we can do this without putting a talk like if(token) ?
Hi, It seems you are fetching your product in a client component. I would recommend to fetch data in a server component and the create a loading.tsx page in the same level of that page and then inside the loading just render a spinner or a loader or... The next.js will show the loading page, while your data if fetching
Hey, can you please make the video where you combine custom credentials and Google Provider for example? It works cool for now, but in my app, I want to add OAuth and I can't figure out how I need to combine these 2 flows. Like we need a password for user creation, right? Do we need to create a separate model for OAuth users?
Thank you again friend!
Yeah
Hello Sakura Dev, today I watched a lot of videos of you. But I still have some questions, please help me :((.
I'm building a fullstack website with NextJS. I'm using NextAuth for authentication. And now I can login by credentials and some third app, but I want to have a jwt token to middleware protect when success logged in. But in my session, I don't have any jwt token. How can I achieve it or Do I have to do it? Is safe when return the id in the session? I have tried to return the public information of user in session, and they id I save in jwt, is that right?
Hey. So you want to protect some pages with next auth middleware?
@@SakuraDev Yes, I want protected my post api, because I return the user id in session, so I nervous that can be got by somebody, and they can do a post api
Great
Very nice tutorial. I tried to follow up the client side with Next-Auth, cause my authentication backend is already running in ASP. I noticed one issue, and maybe you can explain what is going on. When I authenticate, I'm having correct user data, access token, refresh token and expires in values, till the first refresh call. Refresh endpoint returns correct data, and the same way I'm returning new token with modified backendTokens, but then on every jwt callback, there are still the same values. So it keep refreshing token on every request. But what funny is, when I use getServerSession in Server Action, there the token is correct (refreshed one). So I ended up refreshing token on each and every request after first one expires.
Has anyone noticed anything like that before?
Same problem here. Did you found the solution mate?
what about the deprecation warnings for bcrypt dependecies? You didn't get that on your installation but I saw more people with this issue
I will upload an update for this video
Thank you so much!
You're welcome! 🌷
🤗Obrigado amigo! Você é um amigo!
Thank you so much. It means a lot to me 🙏❤️
Thanks
You’re welcome 😊
i have a question , we have the api for auth using nestjs why we must do the nextjs server api ? is this because the next-auth package want it that way ? i never use the next auth package so i need some explain about that
Awesome👍👍👏😊😊
Thanks for the visit
can we save user records from Next Auth google provider to nestjs and then database?
Yes we can. In next auth events and callbacks we can do that. In my next video I will do that.
@@SakuraDev ty great
I 'd faced the problem of CORS Error when sends POST request by await fetch(Backend URL + "/auth/register" {...}) from the client side. Will be very thankful for answer.
I solved that problem by adding `app.enableCors()` to main.ts of Nest.js project.
i have a question.
like we know next auth is default to 7d but when we use refresh token like this that back end token will more than 7d right . so if the nextauth session was expire what happen here ?
so you want the backend tokens to be expired when next-auth session is expired?
@@SakuraDev no. coZ back end refresh token is keep refreshing so it is mean that the time of refresh token is keep longer and longer . back to our next auth session we just use the default to 7day so this point it will not sync . what i want is to make sure that next auth session is expire when the refresh token is expire to keep it sync
i hope you get my purpose
Thank you for your response. But Sometimes, the tokens might be good but the user has been deactivated while logged in, which will cause the user profile to be 401. At that point, I'd like to log the user out. Please how can I achieve this? Cause at that point, the user is still authenticated but the profile details getting are throwing a 401 error.
Thank you for all you do.
In such cases, you can use the "sign out" function from next auth
@@SakuraDev I can't call signout as a function or use signout in my [...nextauth] route . Maybe I'm not doing it well tho
آقا وحید من یه چالش تو پروژه شرکتمون دارم که ساخت فرم ساز هستش بک اندمون لاراول هستش ورودی های فرم همون اینپوت هاش ساختار جی سان ذخیره میشه مثلا تایپ اینپوت تکست یا نامبر خیلی هم ابتدایی ینی ایونتارو فعلا ذخیره نمیکنیم من خواستم با formbuilder پیادش کنم متاسفانه پکیجش جی کوئری هستش برا ری اکت شما چه پکیجی رو توصیه میکنید من هرچی گشتم چیزی پیدا نکردم که خوب پوشش بده مسئله ساخت فرم انگار باید از اول چرخ بسازم و ددلاینمون همش یک هفتش مونده از تایپ اسکریپتم استفاده میکنم و نکست جی اس
مثلا اکثر پکیجایی که برای ساخت cms هستن اشتراکای سنگین دارن که برا بلند مدت کاربرد ندارن مثلا فایل منیجر sync fusion یا x data grid جداول متریال یو آی که پجینیت ای پی آی یا اینفینیت اسکرول ندارن بنظرم کانسپتای خوبی هستن برای تولید محتوا
age dorost motevajeh shode basham, shoma mikhahid be sorat dynamic ye form ro besazid ke har dafe tedad input ha motefavet hast. agar masale in hast kheili rahat ba reach-hook-form mitoonid anjab bedin.
are masalan ye sidebar hast dakhelesh anvae objectaye form hast button checkbox input type ha bad ba dnd kit inaro drop konim to content nahayat json sakhte shode az on sidebar to db zakhire konim va samte front roosh map bznim karbar btoone poreshoon kone va submit kone
@@SakuraDev
Thank you very much
Thanks, I hope it was helpful
Sir its almost second week. When will the video wiith drizzle come
Is this better than using passport ? and how can I fix the issue of importing the JwtService in every module i have ?
No it's not better. I just wanted to show how auth works deep inside nestjs. you can use passport. you can check my recent NestJs Full course for that.
and for your second question, I guess registering that in the app module will do the trick for you.
@@SakuraDev thank you for the reply, i just got one more question to ask! when i refresh the tokens.. the old access token should not work anymore right ? but i noticed that it's still working for me
@@nidhalchelhi2655 Yeah, we need to invalidate the tokens. You can just watch this to do that: th-cam.com/video/dUTKVYkDtx0/w-d-xo.html
Hi, can we please have a video on how to make all routes '/admin/**': { ssr: false }
Hi, There is a small issue with the current Nextjs setup.
Say that an endpoint is going to be hit on a button click in client side.
If the token has expired, the jwt callback does not get called. It gives a 401 unauthorized. Any suggestions on how to fix it?
I apprecaite your content. ♥
Yes that's one of the edge cases. let me see how I can handle that. I will let you know. BTW thanks for bringin that to my attention
@@SakuraDev Any update on this ? or do you have any suggestions how it should be handled. So I might look into this as well.
@@muhammadusama7121 Hi, In the next week I will come up with solution.
@@SakuraDev Awesome video, but for my project I have stumbled on the same issue. I found your older video where you manually update session, should I use that approach when hitting 401 on client side?
th-cam.com/video/RPl0r-Yl6pU/w-d-xo.html
HI, I came up with a solution. Let me know whether you need me to share the code to have a look!
How can I add google-provider with this method
I am going to create a video about it,
Nice video!
Thanks for the visit
hello sakura how to authenticate nextjs with nestjs backend with oauth nextauth
Sir, how to handle it if the refresh token is not expired, it will log out automatically