Your programming skills are fantastic, a true fullstack! 👏👏👏 Thank you very much for sharing your knowledge, this tutorial has helped me a lot, I just needed this. I hope you continue like this! thank you! 🙏
Yeah, I have the same problem. I don't think it is supposed to work with NextJS 14 as the new features of 14 is the async rendering. The best is probably to look for an alternative and use redux only on client side slices.
incredibly useful content. thank you very much Bryan. I am studying the whole series but somehow the Dashboard does not load after login. I don't see the cookies being set and the /api/jwt/verify/ fails with 400 (Bad Request) since there is no token. Did anyone encounter the same issue? Everything seems to work except that the response with the cookies seem ignored by the browser..
Did you set up CORS headers correctly? Also might be because you're running on localhost instead of 127.0.0.1, Next.js currently has issues if you're using localhost. I'd also double check in your Django settings the CORS_ALLOWED_ORIGINS and CORS_ALLOW_CREDENTIALS settings, and make sure in your apiSlice you have in the baseQuery "credentials: 'include'"
Hi, in case you haven't figured it out yet, this is happening only when we are using Chrome and we don't have HTTPS, so if we are using Chrome on localhost with HTTP is not gonna work, I verified the cookies storage on Firefox and Safari and works on localhost with HTTP, but not on Chrome. Bryan mentioned this in the video somewhere around 2:17:00. Anyway just wanted to say that again, of course, this is just in case your CORS settings in Django are correct and you have in the baseQuery "credentials: include". Good luck.
@@phaniophrero8007 thank you for your help. i am beginner for it. trying to solve verifying. does it have to verifying with token? after login, it s sending verify request twice when refreshing page. so it come from backend right?
Hi bryan. Very nice and complete tutorial. Thanks a lot. Can you prepare another video for when a user enters the site and the program automatically makes proper navbar for user based on a database user access table and the navbar menu may have a tree like structure with many levels ? I mean implementing access rights. 🙏🏻🙏🏻🙏🏻
Hey there, fantastic video, thank you for that. I have one question, have you considered the future support for Safari Browsers. I believe that you hit the limitations with Samesite option set to None.
Hey, great video! I saw that you've changed so the access and refresh token have both the same 1 day life time. But is there a way so i can still make them have different lifetimes? Like 5 min access token and 1 day refresh token. Also, is it possible to deploy both back and front together? Thanks!
@brayn hi there, this is one of the finest professional work i have ever seen, i am a junior nextjs devloper, and honestly the redux you implemented, i am unable to keep up and understand and yet i must understand and learn this, can you give me some guidance or directional meterial that can help from where to start.
So the verify endpoint isnt reading the cookie or the cookie for the verify has some issue for me - anyione else experiencing this? I login and it says success but then the verify endpoint gets hit and i get redirected to the login
@@ryanthedeveloper I figured it out. It’s an issue with the sameSite cookie. Firefox dev now defaults sameSite.noneRequiresSecure to false. To fix that: about:config on the search bar > set network.cookie.sameSite.noneRequiresSecure to false. That should work. If you still facing the issue: Clone the tutorial source code (both front and backend), run it OUTSIDE docker (docker can introduce some bugs as well), clear the cookies and that should work fine.
As with the backend tutorial thank you for so good material. I have right now a little problem, When I go to the activation page, it showas the success and error toast at the same time. Honestly I have tried to do my own best to fix it but i could. Anyone can Help me please?
Welldone for making this tutorial. i watched the first full auth and now watching this. Thank you. Just one question, what do you think will make auth, reauth itself even after logging out. When i hit the logout button, it logs me out but when i just refresh the page, it logs me in automatically
Hi! Bryan. There is problem, I have removed access and refresh token from response body in the return statement of custom views. Only using cookies. It works fine for the whole App I have developed a complete Blogging web, the only problem is I am facing is I have to learn django channels, and I want to automatically be authenticated as in other views I am automatically authenticated if in the cookies headers their is token present, this same thing doesn't work for django channels, I search much more than possible 😂, but nothing worked for me. Please if there is some short next totorial you can make is this playlist was only for Authentication, I have moved the app to next level. But the authentication stucked in the middle, because of not working with django channel, if you just can make a short simple text messages with admin side user side, both are authenticated through backend and their names coming in the chat from backend. That's all.
guys please help after the user enter credentials for some reason django is throwing badreq 400 i saw on the preview "{"non_field_errors":["State could not be found in server-side session data."]}" this only happens when i use nextjs from postman it works just fine, please any one help.
Hello, I had a problem when adding RequiredAuth to the layout, the isLoading condition for some reason works all the time, even during authorization. If you remove isloading altogether, then everything works. What could be the reason? I write the code in JS, I looked it all 3 times, I do everything correctly.
That's it, I watched your two lessons to the end. These are excellent two guides that clearly do not compare with others (which do not exist at all). I would also like to see NextAuth, perhaps it would be easier with it. Look forward to this package. And of course, thank you very much)
Hey Bryan, loved your content and it is very appreciable 🤩. I am having a problem in my app, When I login I redirect to the dashboard and then I reload the page (dashboard page) I redirected back to the login page. Although my access and refresh tokens are still there in the cookies but I don't know why am I facing this issue.
@@baothe5197 make change in django cookies setting to lax actually in local host dint work only wok in production liver server with the cookies setring mention this developer
If you don't mind me asking; since the cookies are not sent in the headers, ho do you fetch data from the backend in Nextjs? It works perfectly while testing with postman. I would really appreciate it if someone can help me with this
You can make your unauthorized requests on the next.js backend, then for requests that need authorization you can do that on the client side with rtk query so that you can also make use of the re-authorization logic that was put together
@@ndifrekeumoren3548is that Works for you? Could you give me an example of code? I dont get it how can i make request to the endpoint which requires token in headers
Thanks for the great tutorial. I keep having this error that says " useRegisterMutation is not a function or its r is not iterable" the error comes when i import it in my register component like this "const [register, { isLoading }] = useRegisterMutation();". some one please help on me how to solve this error.
I m having issues on verifying.. everytime i refresh page, it send POST request twice and cannot verifying and after login, and refresh it s not working. have you ever take that kind of error. i m completely stuck. thank you so much for your help
I think this has to do with Next using Strict mode per default, inside next.config.ts. I'm using Next 15. I don't think it's recommended to set Strict to false though. It's for dev mode only. Change it like so: const nextConfig = { reactStrictMode: false, }; Please respond if you solve it and how it went. :)
I think this has to do with Next using Strict mode per default, inside next.config.ts. I'm using Next 15. I don't think it's recommended to set Strict to false though. It's for dev mode only. Change it like so: const nextConfig = { reactStrictMode: false, }; Please respond if you solve it and how it went. :)
just 36mins in and all i can say is thank you for making this quality videos for free. this is exactly what I have been looking for
Production grade tutorial with a perfect auth implementation, struggled to find a resource and finally I'm here.
Your programming skills are fantastic, a true fullstack! 👏👏👏
Thank you very much for sharing your knowledge, this tutorial has helped me a lot, I just needed this.
I hope you continue like this! thank you! 🙏
Best video by far on the topic, great skills and props for your teaching abilities, GG
This was probably the best and most eloquent tutorial I've seen about a topic in web development - thank you Bryan, this content is top tier quality!
Appreciate it, glad it was helpful!
Thank you for the very detailed explanation! It's the most comprehensive tutorial I have ever gone through!
Muchas gracias habia estado buscando algo así no habia encontrado uno tan completo como este
Hello great tutorial, will redux will work with next 14? i added redux but when i navigate to different pages my state is lost.
Yeah, I have the same problem. I don't think it is supposed to work with NextJS 14 as the new features of 14 is the async rendering. The best is probably to look for an alternative and use redux only on client side slices.
incredibly useful content. thank you very much Bryan. I am studying the whole series but somehow the Dashboard does not load after login. I don't see the cookies being set and the /api/jwt/verify/ fails with 400 (Bad Request) since there is no token. Did anyone encounter the same issue? Everything seems to work except that the response with the cookies seem ignored by the browser..
Did you set up CORS headers correctly? Also might be because you're running on localhost instead of 127.0.0.1, Next.js currently has issues if you're using localhost. I'd also double check in your Django settings the CORS_ALLOWED_ORIGINS and CORS_ALLOW_CREDENTIALS settings, and make sure in your apiSlice you have in the baseQuery "credentials: 'include'"
i have the same issue...help
Got the same issue. Any solution so far?
Hi, in case you haven't figured it out yet, this is happening only when we are using Chrome and we don't have HTTPS, so if we are using Chrome on localhost with HTTP is not gonna work, I verified the cookies storage on Firefox and Safari and works on localhost with HTTP, but not on Chrome. Bryan mentioned this in the video somewhere around 2:17:00. Anyway just wanted to say that again, of course, this is just in case your CORS settings in Django are correct and you have in the baseQuery "credentials: include". Good luck.
@@phaniophrero8007 thank you for your help. i am beginner for it. trying to solve verifying. does it have to verifying with token? after login, it s sending verify request twice when refreshing page. so it come from backend right?
Hi bryan. Very nice and complete tutorial. Thanks a lot. Can you prepare another video for when a user enters the site and the program automatically makes proper navbar for user based on a database user access table and the navbar menu may have a tree like structure with many levels ? I mean implementing access rights. 🙏🏻🙏🏻🙏🏻
Amazing video man!!!
Hey there, fantastic video, thank you for that. I have one question, have you considered the future support for Safari Browsers. I believe that you hit the limitations with Samesite option set to None.
Hi Mr.
When I refresh the page, the cookies are deleted.
How can i fix it ? plz
Hey, great video! I saw that you've changed so the access and refresh token have both the same 1 day life time. But is there a way so i can still make them have different lifetimes? Like 5 min access token and 1 day refresh token. Also, is it possible to deploy both back and front together? Thanks!
@brayn hi there,
this is one of the finest professional work i have ever seen, i am a junior nextjs devloper, and honestly the redux you implemented, i am unable to keep up and understand and yet i must understand and learn this, can you give me some guidance or directional meterial that can help from where to start.
how to set isAuthenticated on server side page to redirect to other page? Any idea how to do it.
Thank you so much for this awesome content i have been looking for.
Hey Bryan, can you show us how to deploy this frontend on vercel and the backend on heroku? Thanks!
So the verify endpoint isnt reading the cookie or the cookie for the verify has some issue for me - anyione else experiencing this? I login and it says success but then the verify endpoint gets hit and i get redirected to the login
Same here. But for me is just with the social auth
@@fabioroma yeh man - im still stuck on this lol - lmk if you figure it out - ill do the same.
i got it@@fabioroma
same issue. Any solution?
@@ryanthedeveloper I figured it out. It’s an issue with the sameSite cookie. Firefox dev now defaults sameSite.noneRequiresSecure to false. To fix that: about:config on the search bar > set network.cookie.sameSite.noneRequiresSecure to false. That should work. If you still facing the issue: Clone the tutorial source code (both front and backend), run it OUTSIDE docker (docker can introduce some bugs as well), clear the cookies and that should work fine.
This is incredibly amazing!!! thank for the tutorial🍷
When social account login it overwrites normally registered account's first_name, last_name. How can I fix this?
As with the backend tutorial thank you for so good material. I have right now a little problem, When I go to the activation page, it showas the success and error toast at the same time. Honestly I have tried to do my own best to fix it but i could. Anyone can Help me please?
would be awesome to have this on Nuxt 3 in the frontend :D
How could i set the protect routes using next middleware? I've heard its better since its faster and more secure.
Been a while, sir!
would you prefer this over your express layer abstraction for jwt
I would also make sure to run verıfy once ın each load so maybe we should use effectRan to check ıf verıfy alread execed
Does it make sense tu use redux when the caching layer could be provided by nextjs?
Hi. Is it better to move the backend logic in api directory with route.ts structure? as per nextjs documentation
Welldone for making this tutorial. i watched the first full auth and now watching this. Thank you. Just one question, what do you think will make auth, reauth itself even after logging out. When i hit the logout button, it logs me out but when i just refresh the page, it logs me in automatically
The credentials must not be getting cleared when you log out for some reason
express my eternal gratitude
Hi! Bryan. There is problem, I have removed access and refresh token from response body in the return statement of custom views. Only using cookies. It works fine for the whole App I have developed a complete Blogging web, the only problem is I am facing is I have to learn django channels, and I want to automatically be authenticated as in other views I am automatically authenticated if in the cookies headers their is token present, this same thing doesn't work for django channels, I search much more than possible 😂, but nothing worked for me. Please if there is some short next totorial you can make is this playlist was only for Authentication, I have moved the app to next level. But the authentication stucked in the middle, because of not working with django channel, if you just can make a short simple text messages with admin side user side, both are authenticated through backend and their names coming in the chat from backend. That's all.
guys please help after the user enter credentials for some reason django is throwing badreq 400 i saw on the preview "{"non_field_errors":["State could not be found in server-side session data."]}" this only happens when i use nextjs from postman it works just fine, please any one help.
Amazing job!
Hello, I had a problem when adding RequiredAuth to the layout, the isLoading condition for some reason works all the time, even during authorization. If you remove isloading altogether, then everything works. What could be the reason? I write the code in JS, I looked it all 3 times, I do everything correctly.
That's it, I watched your two lessons to the end. These are excellent two guides that clearly do not compare with others (which do not exist at all).
I would also like to see NextAuth, perhaps it would be easier with it. Look forward to this package.
And of course, thank you very much)
please can you make for nuxt.js too?
Hey Bryan, loved your content and it is very appreciable 🤩. I am having a problem in my app, When I login I redirect to the dashboard and then I reload the page (dashboard page) I redirected back to the login page. Although my access and refresh tokens are still there in the cookies but I don't know why am I facing this issue.
AUTH_COOKIE_SAMESITE = "None"
AUTH_COOKIE_SECURE = True
same problem here
@bryanbrkic kindly provide the solution for nextjs 14
when i login cookies get set but when i refresh page in frontend the cookies get deleted please help me sort this
I also have the above error and am looking for a fix
@@baothe5197 make change in django cookies setting to lax actually in local host dint work only wok in production liver server with the cookies setring mention this developer
If you don't mind me asking; since the cookies are not sent in the headers, ho do you fetch data from the backend in Nextjs? It works perfectly while testing with postman. I would really appreciate it if someone can help me with this
You can make your unauthorized requests on the next.js backend, then for requests that need authorization you can do that on the client side with rtk query so that you can also make use of the re-authorization logic that was put together
Thanks Bryan! You're an 😇
@@ndifrekeumoren3548is that Works for you? Could you give me an example of code? I dont get it how can i make request to the endpoint which requires token in headers
why does verify in authApiSlice does not take any arguments? even though the endpoint does need the token? Am I missing something?
ooo nvm, it's handled in the CustomTokenVerifyView.
Thanks for the great tutorial. I keep having this error that says " useRegisterMutation is not a function or its r
is not iterable" the error comes when i import it in my register component like this "const [register, { isLoading }] = useRegisterMutation();". some one please help on me how to solve this error.
Maybe check in the authApiSlice that the register mutation was set up and exported correctly
I m having issues on verifying.. everytime i refresh page, it send POST request twice and cannot verifying and after login, and refresh it s not working. have you ever take that kind of error. i m completely stuck. thank you so much for your help
I think this has to do with Next using Strict mode per default, inside next.config.ts. I'm using Next 15. I don't think it's recommended to set Strict to false though. It's for dev mode only. Change it like so:
const nextConfig = {
reactStrictMode: false,
};
Please respond if you solve it and how it went. :)
Thanks greatly for this. 😊
Hello Bryan. When i use safari, verify is okey not have problem. But when i use chrome or something. it's not working. Bad request. How can i fix it ?
I still can't figure it out :/
AUTH_COOKIE_SAMESITE = "None"
AUTH_COOKIE_SECURE = True
Thank you so much!!!
Thank so much .... 🙏🏻
2:20.00
Wooowww amazing
thank you
Amazing video, but in Next14 i got DOUBLE verify/ requests on each page reload. Next13 was without that problem, anyone have some problem?
I think this has to do with Next using Strict mode per default, inside next.config.ts. I'm using Next 15. I don't think it's recommended to set Strict to false though. It's for dev mode only. Change it like so:
const nextConfig = {
reactStrictMode: false,
};
Please respond if you solve it and how it went. :)
Amazing job!