Wow, I literally couldn't find any information how to use my own login form instead of the NextAuth provided and then found this video, which is even 10000% better! WOW!
Very nice video! Was wondering what would be the best setup to let users start on a sign up / sign in page and once user is authenticated the actual component tree loads
Thank you @Sakura Dev for Great Content. But i have a question that is how do we catch error exception incase lets say someone put wrong username or password.
Hi Sakura lovely to see the video. Very comprehensive, keep it up. Btw could create one for Drizzle ORM, PlanetScale, role based auth, credential login & email login?
Hello there! Thank you so much for your kind words, I'm glad you enjoyed the video. I really appreciate your suggestions! Creating content about Drizzle ORM, PlanetScale, role-based authentication, credential login, and email login sounds like a great idea. I'll definitely consider these topics for future videos. Stay tuned for more comprehensive content, and feel free to reach out if you have any more suggestions or questions. Keep learning and exploring!
How can I redirect to the login page based on the role for example if I am trying to access a admin page and I didn’t log in then redirects me back to the admin login page if i am training to access a user page and I didn’t login then redirect me back to the user login how can i do this, i create the login pages like you did using next-auth
Nice content dude .... I'm currently working in a side project using next 13 and next-auth ... but we have a separate backend written in golang ... I'm doing the google oauth flow and after success I need to send this data to the backend and it return our own jwt ... question... where is the best place to make this google backend sync .... currently im doing inside the jwt callback so I can pass all user obj adicional data and jwt ... is there any place in other callback maybe that it woul make more sense ? Because the only place that I've seen to chage the session obj is through jwt and session callbacks .. And please if possible make and project simulating an other backend so we can see if it changes a bit or have its nuances 🎉
@SakuraDev I did in the signIn callback in the first time but the problem is that in the signin callback, we can not mutate the user object (or can we?)... we simply return true or false if the user should continue the signflow ... the only place I saw I could mutate the user obj was using your strategy of combining jwt and session callback
Nice video bro keep up the good work. I got a question for you. I am stuck on this from quite a while now hope you can figure it out. I am using the next auth middleware to catch on the server if someone who's token is expired or does't have one and he is trying to access a private page should be redirected straight to login page (which contains only input fields nothing else) and that works perfectly, but since i am rendering the header on the client and i am using the next auth session there, once the user is redirected to login page the header does not dissapear immediately and there is a flicekr effect, also when you hit refresh and the page on which you are is SSR first it loads the page and after that the header shows up, since it's on the client.. Is there a solution for this i would be happy if you make a video on this topick, thanks
Hey ! sakura, im trying to implement next14 with nextauth and cognito... any ideas of how can i do it ? Im stuck over here for weeks and I dont find any solution for the provider! I would be very appreciated if you give me a hand over here
Halo sakura, after login success my page redirect to dashboard, and on dashboard page i console.log using useSession and i get the token from next auth, but when i refresh the page on dashboard the console log useSession token to be null, can you help me this issue
hello, how can i write my custom handler request? I want to add a new key under the session option in the next auth options according to the data from the post request, but it is not possible to do this without writing my own custom post request data because by default this way the data from the request is kept in the authorize provider.
Hello everyone - I am trying to implement this, but when i set the pages object, signIn property, to '/signin', it redirects to 'api/auth/signin', not signin route at the app directory level. I think originally i had the object set to 'api/auth/signin' and then changed it, but the redirect isn't working after the update. anyone encountered this before or know what might be going wrong?
@@SakuraDev I used the signIn() function, and I am using the callbackUrl. I actually missed a key detail in my comment: I am using middleware to protect all pages, and when i set signIn: ‘/signin’ (at the app directory), it is trying to redirect to a route at api/auth/signin instead. I must be misinterpreting the docs or something. I have tested it and created a route at api/auth/signin, and it does redirect there, but for whatever reason I can’t get it to go to a route at the /app level. Hope that makes sense and appreciate the reply!
Guys, modern approach to web development really sucks. That's should speed up process of development, but I just wasting a hours to learn such hipster abstractions
Wow, I literally couldn't find any information how to use my own login form instead of the NextAuth provided and then found this video, which is even 10000% better! WOW!
Thank you so much 🙏💖. I'm really glad that it was helpful for you 💖
Its been two days watching your content and I must confess that you are the best tutor for nextjs
Thank you so much for your nice words 💖
This helped me so much THANK YOU!!!!
Thanks 🙏, I am really glad that it was helpful
Amazing @Sakura Dev!! thanks a lot!
Very nice video! Was wondering what would be the best setup to let users start on a sign up / sign in page and once user is authenticated the actual component tree loads
Thanks for sharing Sakura.
Thanks 🙏😃
Thank you @Sakura Dev for Great Content. But i have a question that is how do we catch error exception incase lets say someone put wrong username or password.
When an error occurs, we get back an error in the queryParam , and it is retrievable on the page props
@@rockNbrain Thank you so much i will try that
you explain documentation black holes really good
Thanks.🌹🙏
Hi Sakura lovely to see the video. Very comprehensive, keep it up. Btw could create one for Drizzle ORM, PlanetScale, role based auth, credential login & email login?
Hello there! Thank you so much for your kind words, I'm glad you enjoyed the video. I really appreciate your suggestions! Creating content about Drizzle ORM, PlanetScale, role-based authentication, credential login, and email login sounds like a great idea. I'll definitely consider these topics for future videos. Stay tuned for more comprehensive content, and feel free to reach out if you have any more suggestions or questions. Keep learning and exploring!
Hi, thanks alot. how do I use it for custom registeration page? I get JWT token from backend when signing up
Can you make the default home page is a landing page, and have role base auth in there? Like for crud or blog site but using all of this 😊
Hey. I already have video on role based authorization, but yes In should create a new one. I will create it soon.
How can I redirect to the login page based on the role for example if I am trying to access a admin page and I didn’t log in then redirects me back to the admin login page if i am training to access a user page and I didn’t login then redirect me back to the user login how can i do this, i create the login pages like you did using next-auth
you can do it in next auth middleware. I have old video on that but I am going to create a new one. ua-cam.com/video/xJ6efexXJ7I/v-deo.html
What is the point of intercepting Login form?
and what's the point on using a modal if it's still redirecting to the login page?
Nice content dude .... I'm currently working in a side project using next 13 and next-auth ... but we have a separate backend written in golang ... I'm doing the google oauth flow and after success I need to send this data to the backend and it return our own jwt ... question... where is the best place to make this google backend sync .... currently im doing inside the jwt callback so I can pass all user obj adicional data and jwt ... is there any place in other callback maybe that it woul make more sense ? Because the only place that I've seen to chage the session obj is through jwt and session callbacks ..
And please if possible make and project simulating an other backend so we can see if it changes a bit or have its nuances 🎉
hey, 🖐🏻I think you can do it in the "signIn" event in next-auth route handler. this event will be called every time user signiIn successfully.
@SakuraDev I did in the signIn callback in the first time but the problem is that in the signin callback, we can not mutate the user object (or can we?)... we simply return true or false if the user should continue the signflow ... the only place I saw I could mutate the user obj was using your strategy of combining jwt and session callback
@@rockNbrain signIn "event" is different from callbacks. You can have events as well as callbacks.
@@SakuraDev nice, tks a lot dude, I'll try to see the signIn event, I was actually only using signIn callback !
@@rockNbrain 👍
Could you try a combination of frontend nextjs while backend to be Django+django restframework
Well, I am not a Django expert so I didn't think I can do it. 🙏🙏
Its okay,no problem@@SakuraDev
❤❤❤❤❤
Thanks 🙏🌹
Nice video bro keep up the good work. I got a question for you. I am stuck on this from quite a while now hope you can figure it out. I am using the next auth middleware to catch on the server if someone who's token is expired or does't have one and he is trying to access a private page should be redirected straight to login page (which contains only input fields nothing else) and that works perfectly, but since i am rendering the header on the client and i am using the next auth session there, once the user is redirected to login page the header does not dissapear immediately and there is a flicekr effect, also when you hit refresh and the page on which you are is SSR first it loads the page and after that the header shows up, since it's on the client.. Is there a solution for this i would be happy if you make a video on this topick, thanks
Hey! 🖐🏻. Do you use custom login or using next auth default login?
@@SakuraDev next auth login with credentials
@@martindimitrov4696 yes that' why. you should create custom login page for next auth. in th video I explained how to do that.
@@SakuraDev what about the second case?
You hit refresh on a ssr page and page loads before header
(header is conditionally rendered based on session)
And what about protect the routes? I would like to protect the / page( root page) how can i do it?
With next auth middleware we can do that. Thanks for watching👋
Hey ! sakura, im trying to implement next14 with nextauth and cognito... any ideas of how can i do it ? Im stuck over here for weeks and I dont find any solution for the provider! I would be very appreciated if you give me a hand over here
Well I don't have much experience with this stack but as far as I know you should handle that in authorize function of the next-auth provider
Thanks again ❤
You're welcome 😊
Halo sakura, after login success my page redirect to dashboard, and on dashboard page i console.log using useSession and i get the token from next auth, but when i refresh the page on dashboard the console log useSession token to be null, can you help me this issue
Hi, the first time you refresh the page, it returns null, but then it will update the session with appropriate value and re-render the page
Thanks!
Thank you
Thanks
And welcome to my channel
Thank's for help
Thanks 🙏🙏🙏
hello, how can i write my custom handler request? I want to add a new key under the session option in the next auth options according to the data from the post request, but it is not possible to do this without writing my own custom post request data because by default this way the data from the request is kept in the authorize provider.
Hey 👋, you should customize the next auth session type.
Thanks you sir, it really helped me
Thanks 🙏🙏🙏
thanks a lot for help
Thanks a lot
Here's one more subscriber
Thanks for your support 🙏
Hello everyone - I am trying to implement this, but when i set the pages object, signIn property, to '/signin', it redirects to 'api/auth/signin', not signin route at the app directory level. I think originally i had the object set to 'api/auth/signin' and then changed it, but the redirect isn't working after the update. anyone encountered this before or know what might be going wrong?
Hey!, do use signIn() function or using a Link to navigate to login page?
@@SakuraDev I used the signIn() function, and I am using the callbackUrl. I actually missed a key detail in my comment: I am using middleware to protect all pages, and when i set signIn: ‘/signin’ (at the app directory), it is trying to redirect to a route at api/auth/signin instead. I must be misinterpreting the docs or something. I have tested it and created a route at api/auth/signin, and it does redirect there, but for whatever reason I can’t get it to go to a route at the /app level. Hope that makes sense and appreciate the reply!
Will this work with Auth JS beta?
but you are losing the context, whats the point of the modal then? you are leaving the home
Using parallel routes will fix that. Thanks for bringing that to my attention.
how to handle locale ?
my urls are "/locale/page"
Thanks for sharing, nextjs nestjs please
Oh yes with drizzle. I remember. expect it in my next video.
Hi sir can you make a admin dashboard site with custom login page. Thank you
Absolutely!. put it on my list
tksssss
Thanks a lot
why would i need 2 sign in page in my app?
We don't need 2 sign in pages. We just replace the first one
@@SakuraDev ohh alright thanks
Guys, modern approach to web development really sucks. That's should speed up process of development, but I just wasting a hours to learn such hipster abstractions