How to Manage Backend JWT Access Tokens in Next Auth and Next.js 13

  Рет қаралды 95,735

Sakura Dev

Sakura Dev

Күн бұрын

Пікірлер: 278
@minhphan3287
@minhphan3287 Жыл бұрын
Thank you so much for this video Sakura 😄
@SakuraDev
@SakuraDev Жыл бұрын
Thank you so much 🙏🙏🙏
@__Who-am-i__
@__Who-am-i__ Жыл бұрын
This is the best and most informative video I've seen on this topic ❤ Meanwhile, tens of popular channels are playing around with github credentials with no further context
@eliphazbouye
@eliphazbouye Жыл бұрын
Exactly 💯💯💯💯💯
@SakuraDev
@SakuraDev Жыл бұрын
Thanks. I'm glad you found the video helpful
@Snegurjan
@Snegurjan 9 ай бұрын
1000%
@spcs999
@spcs999 Жыл бұрын
Why other youtube channels doesnt address this problem at all? Had to go through other channels, to come across yours, that has the right solution. thanks!!
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🙏. I am glad you like it
@gabrielframeschi
@gabrielframeschi Жыл бұрын
Thank you so much! You were the only one who could give the problem a working and clean solution, with an awesome explanation!
@SakuraDev
@SakuraDev Жыл бұрын
thank you so much for your nice feedback. 🌷🌷
@marcelos1lva
@marcelos1lva Жыл бұрын
Tks for this content, Sakura. You having a great help me. 🙌🏼 Sorry my "English" 😂
@SakuraDev
@SakuraDev Жыл бұрын
Glad it was helpful.
@HidaytRahman
@HidaytRahman Жыл бұрын
Thanks a lot, one of the gem tutorial on external API handling with auth
@SakuraDev
@SakuraDev Жыл бұрын
thanks
@ARiyou2000
@ARiyou2000 5 ай бұрын
داداش ありがとうございました It really saved me. By the way your content is amazing. I just subscribed.
@SakuraDev
@SakuraDev 5 ай бұрын
سلام. ممنون از حمایتتون
@johnaroj
@johnaroj Жыл бұрын
WOw literaly saved my life! thank you
@SakuraDev
@SakuraDev Жыл бұрын
Really happy that it was helpful for you 🌹🌹. Your nice feedback encourages me to move forward ⏩
@AirdropsWhitelistHub
@AirdropsWhitelistHub Жыл бұрын
I love you, I was having this problem for two days, this is so good bro
@SakuraDev
@SakuraDev Жыл бұрын
Hi🌷🌷 thanks for your nice feedback
@omkararora
@omkararora Жыл бұрын
You have been solving all my NextAuth issues, thanks!!
@SakuraDev
@SakuraDev Жыл бұрын
glad it was helpful. 🌷🌷
@Lucky-jm5if
@Lucky-jm5if Жыл бұрын
Thank I have been looking for this today the whole day...
@SakuraDev
@SakuraDev Жыл бұрын
Thanks. I hope this was helpful for you.
@LashchevDev
@LashchevDev Ай бұрын
Great tutorial, especially `as any` part
@carloschavezlucero9142
@carloschavezlucero9142 Жыл бұрын
Best video ever
@SakuraDev
@SakuraDev Жыл бұрын
Thank you so much 🙏
@r4grez591
@r4grez591 Жыл бұрын
you saved me a lot of headaches, thanks a lot!
@moe3551
@moe3551 Жыл бұрын
Absolute lifesaver! Thanks :)
@SakuraDev
@SakuraDev Жыл бұрын
Thanks, I am really happy that it was helpful for you 🌹🌹
@khoily3031
@khoily3031 Жыл бұрын
Thanks so much. This is exactly what I was looking for.
@SakuraDev
@SakuraDev Жыл бұрын
Glad it was helpful 🌹
@yazanali1454
@yazanali1454 Жыл бұрын
this approach only modifies the client side session what if I want to get the accessToken in some serverComponent where I can't use useSession() ?? getServerSession() is giving me the original session without any info but (name, email, image)
@CryptoKosh
@CryptoKosh 11 ай бұрын
just use getServerSession(authOptions);
@wildzone
@wildzone 4 ай бұрын
Did you find solution ?
@yazanali1454
@yazanali1454 4 ай бұрын
@@wildzone Yes The solution was to not use next auth check clerk I think it's more stable and production ready
@saiyanman6497
@saiyanman6497 11 ай бұрын
Great! You saved my days.
@eliphazbouye
@eliphazbouye Жыл бұрын
Your are the best thanks 🙏🏾❤❤❤❤❤
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🌹🌹🌹. I am glad it was helpful for you.
@eliphazbouye
@eliphazbouye Жыл бұрын
@@SakuraDev ^^ Yeah your are the only one who make it on real use case thanks again
@SakuraDev
@SakuraDev Жыл бұрын
@@eliphazbouye can I see your authorize fucntion?
@eliphazbouye
@eliphazbouye Жыл бұрын
Send me your discord link I will show on discord
@SakuraDev
@SakuraDev Жыл бұрын
@@eliphazbouye my discord server: discord.gg/BWN3yUqu
@ShubhamKashyap-c8w
@ShubhamKashyap-c8w Жыл бұрын
Thanks for the great video, I am able to get attach the user data to session object. The only problem I am having is this attached user object information is only available at client side (when using useSession() ) but when using getServerSideSession this information is not there - server session only have the user's name and email. How can i pass the same information (user information) to server session as well?
@kyrregjerstad
@kyrregjerstad Жыл бұрын
did you find a solution to this? I'm facing the same issue!
@TesterHs
@TesterHs 11 ай бұрын
Did you solve it ?​@@kyrregjerstad
@islamsayed8
@islamsayed8 Жыл бұрын
Thank you so much. God bless you and your family 🤍
@SakuraDev
@SakuraDev Жыл бұрын
Thanks for your nice word. 🙏🙏🙏🙏🌹 God bless you too🌹🙏
@clint-twenty-one
@clint-twenty-one 9 ай бұрын
nice, just one question, how to deal with TS?
@SakuraDev
@SakuraDev 9 ай бұрын
Hi 🖐🏻 It's already on TS. Do you have any specific problem with that?
@acloudonthebluestsky9687
@acloudonthebluestsky9687 4 ай бұрын
My nextAuth don't even have a credential when i open a new tab (tab 2); it's require me to login again, although I log in at tab 1
@jedi_v
@jedi_v Жыл бұрын
Awesome,thank you very much for making this video.
@SakuraDev
@SakuraDev Жыл бұрын
thanks 🌷🌷🌷
@fixesdev
@fixesdev Жыл бұрын
Hello, thanks for the video. I have everytihin but the access token. do i have to configure it in the database?
@WebWithWes
@WebWithWes 4 ай бұрын
Great video, I've been working on a similar problem. The issue is by marking your provider as "use-client" now you've limited all of the children / pages of your apps to be client components. Is there a way to do this with NextAuth so that the server or cache refreshes after login updating the session state for server components?
@mohamedelnaggar8572
@mohamedelnaggar8572 4 ай бұрын
Marking a provider to "use client" does not mean all of its children will be client components. Server components will be server side as normal. The case where children become client too is instead of passing them as a children you directly call them in the component.
@WebWithWes
@WebWithWes 4 ай бұрын
@@mohamedelnaggar8572 interesting Yeah I was just doing {children} to render the child components from layout.tsx which was making them inherit the "use-client" or client compoennt
@alimodz6253
@alimodz6253 Жыл бұрын
great video thanks, sir how do you make the session expires at the time the jwt token from the backend expires?
@SakuraDev
@SakuraDev Жыл бұрын
Hey 👋, just set the same expiry time for both frontend and backend
@benjamingoller6267
@benjamingoller6267 10 ай бұрын
I understand that you need the access token for client side fetch requests (which is why I only use server actions instead). However, I am wondering if that is not a security risk, because you are storing the access token inside the session, which is not secure, as it exposes the access token. That is also why the session does not have the token by default. I am confused there is no securer way to do this...
@jessdhoctor7834
@jessdhoctor7834 Жыл бұрын
i have question, it is does matter if JWT on back-end expire first before on front-end? or they need both expire at the same time?
@SakuraDev
@SakuraDev Жыл бұрын
good question. they dont need to be expired in the same time. if backend jwt is expired at any time, you should use the refresh token api to renew it. If next auth jwt is expired, user must login agin. it is recommended to set the expiry time of backend REFRESH TOKEN JWT and nextauth jwt to the same time.
@SamuelPares
@SamuelPares Жыл бұрын
@@SakuraDev how would you store the refresh token returned from backend in next auth ?
@SakuraDev
@SakuraDev Жыл бұрын
@@SamuelPares hi, use the same approach that we use for access token.
@Jj-bo1dm
@Jj-bo1dm Жыл бұрын
Thank you so much, brother!
@SakuraDev
@SakuraDev Жыл бұрын
You're welcome!
@ivaylohristov8886
@ivaylohristov8886 Жыл бұрын
Very helpful video. Thank you!
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🌷
@Hunterhuni
@Hunterhuni Жыл бұрын
First of all it's a great lesson. I really appreciate it! But I have a question: What happens if the access token that I get from the server expires, how can I also expire the NextAuth session in that case? As I want to user to be logged out.
@tarunkhubchandani5869
@tarunkhubchandani5869 8 ай бұрын
Hey, have you got your query done?
@alfonsomartinangeles6176
@alfonsomartinangeles6176 4 ай бұрын
did you find solution about this?
@SakuraDev
@SakuraDev 4 ай бұрын
@alfonsomartinangeles6176 I have recorded a comprehensive tutorial that includes a solution for this. It will be uploaded next week
@alfonsomartinangeles6176
@alfonsomartinangeles6176 4 ай бұрын
@@SakuraDev very timely i really needed this. Thank you so much for your videos!
@alfonsomartinangeles6176
@alfonsomartinangeles6176 4 ай бұрын
when will you upload the tutorial? Thank you so much!
@gcsandesh
@gcsandesh Жыл бұрын
Helped me get the idea of next auth with credentials and how I can use it with a login server that already exits. Thank you.
@SakuraDev
@SakuraDev Жыл бұрын
Thanks and welcome to my channel
@martinriedl1505
@martinriedl1505 Жыл бұрын
Legend
@saiyanman6497
@saiyanman6497 11 ай бұрын
It is hard to combine Next-auth with iron-session to secure cookies data
@ladyduckel7733
@ladyduckel7733 Жыл бұрын
Thanks. very useful.
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🙏👍
@Gurralanarayanareddy
@Gurralanarayanareddy Жыл бұрын
Thank you so much such a wonderful video, how can we save accessToken when we using any provider like google. the jwt is method is not working in that case.🙌
@SakuraDev
@SakuraDev Жыл бұрын
It is a little complicated. I will create a vid on this topic soon.
@SakuraDev
@SakuraDev Жыл бұрын
🌹🙏
@stevebendersky2056
@stevebendersky2056 Жыл бұрын
Thank you for the video. I have a feq questions. if I wrap in the layout with the provider and its a use client, does it make all of my components a client components? also, is this the best practice to handle the accessToken? because as far as I know we should store it as a cookie. is it secured this way?
@sudam-d
@sudam-d Жыл бұрын
I appreciate you
@SakuraDev
@SakuraDev Жыл бұрын
Thanks
@fixesdev
@fixesdev Жыл бұрын
Hi thanks for your video, I dont understan how is the authorization validated in the backend? If I use postman and send any code as the authorization i will retrieve the information
@lowenathan9692
@lowenathan9692 Жыл бұрын
Thanks so much. This is exactly what I was looking for. For the token part where you add "as any", i think it might as well be possible to define a JWT interface that extends the User. Please, tell me what you think about it.
@SakuraDev
@SakuraDev Жыл бұрын
Yeah that right. Thanks for bringing that to my attention. I will do this in my next videos 👋👍
@MonaKumar-em3jd
@MonaKumar-em3jd Жыл бұрын
Where is the api that you used a the end to retrieve posts defined?
@SakuraDev
@SakuraDev Жыл бұрын
Hi, it is on a backend node,js project. the link to backend project is in description.
@ekimcemulger8101
@ekimcemulger8101 Жыл бұрын
Wow u didnt forget! thank you.
@elruinnou
@elruinnou Жыл бұрын
Hi Sakura, so if I’d like to use tue credentials provider, the token that’s acquired from database should be also set in cookie - next auth session token, right?
@mark1086
@mark1086 Жыл бұрын
Hi did you find the answer to this? Thanks
@ameralali6363
@ameralali6363 Жыл бұрын
Hi sakura, thanks for your effort, just wanna ask is it safe to store the access token in the session?
@SakuraDev
@SakuraDev Жыл бұрын
hi, storing the access token in the Next-Auth session is generally considered safe, since the whole session is turned into jwt and kept inside httpOnly cookie.
@karimdakrouri
@karimdakrouri 10 ай бұрын
hi, when do i use useSession and getSession? Also, what is the point of having use client at the top??
@FabricioTrujillo-k5w
@FabricioTrujillo-k5w Жыл бұрын
I have tried several apps with next-auth and they all work ok in development, but none in a droplet in digital ocean, any ideas?
@SakuraDev
@SakuraDev Жыл бұрын
Well I haven't used digital ocean, so I need to do some research on it.
@fesani
@fesani Жыл бұрын
@@SakuraDev it would be appreciated any light that mate thanks
@guti3435
@guti3435 Жыл бұрын
How can i do that with Google Provider?
@АртемД-в1т
@АртемД-в1т Жыл бұрын
Thank you!
@SakuraDev
@SakuraDev Жыл бұрын
"Thanks! I'm glad you found the video helpful
@programmersohel
@programmersohel Жыл бұрын
Thanks brother ❤
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🙏🙏
@lyonelpierce
@lyonelpierce Жыл бұрын
Great video, quick question. How do you handle the sign out when token is expired?
@SakuraDev
@SakuraDev Жыл бұрын
Thanks. we can handle with refresh token
@pierreblas1517
@pierreblas1517 Жыл бұрын
how to protect the route api/auth/session/ where you can directly see the token?
@SakuraDev
@SakuraDev Жыл бұрын
hi, you can protect it with next-auth middleware. see this video: kzbin.info/www/bejne/nIqyk6WoaM-ZZtk
@mr-gear-360
@mr-gear-360 Жыл бұрын
Such an amazing video, thanks for sharing. I'm trying to follow this tutorial but have a small issue. Nextauth redirect to error page when credentials are invalid. I'm using django on backend. can you provide a small code on error handling? my backend give { non_field_errors: [ 'Unable to log in with provided credentials.' ] } when invalid credentials and {password/email: ["Password/Email fields are missing"] when I miss any of the fields. also let me know how to show this custom error on the frontend? thanks
@SakuraDev
@SakuraDev Жыл бұрын
Hi, you can try catch on authorize func and throw the error to login page and there, show a proper message to user based on the error.
@erde5289
@erde5289 10 ай бұрын
sir how to set access token and refresh token in cookies pls help me 🙏
@ayhmhamame1333
@ayhmhamame1333 Жыл бұрын
very useful thank you
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 😊👍
@itsabun
@itsabun Жыл бұрын
How to make the backend that provide decode jwt like that?
@SakuraDev
@SakuraDev Жыл бұрын
Hi, you can watch this: kzbin.info/www/bejne/oZmxqKV8f5KLp9U
@bennybenbenw
@bennybenbenw 9 ай бұрын
Last part, 1.How about token expired, need to use refresh token get new token 2. Should session exp set up same as refresh token exp?
@SakuraDev
@SakuraDev 9 ай бұрын
Yeah, usually we set the same expire time for both session and refresh token.
@osamaehsan4926
@osamaehsan4926 Жыл бұрын
I had spent a lot of time looking for this particular solution then I came across your tutorial, Thanks a lot it really helped me.! Now I am looking for a solution for how to handle google login with custom backend using next auth. Can you briefly explain me here or can you create another video for that. Thanks again !
@SakuraDev
@SakuraDev Жыл бұрын
Hi, thanks. I am glad it was helpul. I should test some solution for it. And then I let you know or if it was complicated I will create a tutorial for that. 👋
@tarunkhubchandani5869
@tarunkhubchandani5869 8 ай бұрын
Hello, I have a query..!! Whenever we use useSession() hook, data which it returns changes from undefined to session object which flickers the rendered UI for a moment as it state changes from undefined to session object..!! How to deal with that problem..!! What fallback to show between that flickering moment?
@SakuraDev
@SakuraDev 8 ай бұрын
Hi You can use a loading state or use getServerSession to get the session from server
@tarunkhubchandani5869
@tarunkhubchandani5869 8 ай бұрын
@@SakuraDev I think Skeleton UI for navlink can be used while loading session, but is it a good option to show some fallback for navlinks in a navbar? Another query is when we attach the raw token to the session's object and then using that session in the client component would not pose any security issue?
@mustaneerhaider515
@mustaneerhaider515 Жыл бұрын
what if im using a custom backend using a framework like NestJS and the jwt token is generated by the backend so i don't need next-auth to generate a jwt for me
@SakuraDev
@SakuraDev Жыл бұрын
hi, this video is exactly about what you have said.
@thomasdergent414
@thomasdergent414 Жыл бұрын
Hi Sakura, great video! I have one question about this set-up. Is the session object from nextauth a httpOnly cookie or is it stored locally on the client side?
@Blazerg2
@Blazerg2 Жыл бұрын
You never got an answer for this but I have actually the same question, do you know now?
@mark1086
@mark1086 Жыл бұрын
@@Blazerg2 and @thomasdergent414 did any of you figure this out? Thanks
@Geuni620
@Geuni620 Жыл бұрын
I'm enjoying the video. Thank you so much. I have one question. How can I validate the accessToken on the api server?
@SakuraDev
@SakuraDev Жыл бұрын
Hi, Thanks. See my next video . I have explained it thoroughly. It will be uploaded in next few days.
@Geuni620
@Geuni620 Жыл бұрын
@@SakuraDev Wow... Thank you so much!!! I'll watch the video and comment again. Looking forward to it. :)
@iamomag
@iamomag Жыл бұрын
hey nextauth is not sending session to the rootlayout but storing in cookies despite using the same methods that you were teaching in last video how could I solve this problem? right know I am using next/cookies.get() to get session
@SakuraDev
@SakuraDev Жыл бұрын
hi. sorry for delay. Just wrap your rootLayout with sessionProvider without any props. and then get the session using useSession hook. by the way, I am creating video that will answer all the question.
@RajaVarri
@RajaVarri 8 ай бұрын
Hi Sakura, I have implemented a new app with nextjs 13 my initial route ("/") should be signin page and then when user logins in i should redirect him to home page. i have more screens like forgot password,sign up,verify otp in auth module. inside home i have some other screens. now i have an api for signin from where i get all data related to user and token will be sent in the response, once user login and we get a token from backend api,i need to redirect user to home page. How should i build my layout properly in order to build this whole thing properly. Because with current app folder structure i am unable to implement this. Can you pls provide some inputs in this.
@siyapandey8799
@siyapandey8799 11 ай бұрын
can this same thing be done with Google provider? I'm just getting name , expires at , image etc , but not the accessToken
Жыл бұрын
How do You suggest structuring auth with the app if I want to have nothing, except the login form in the middle of the screen with no app bar, etc? Now my appar is in layout above the children.
@SakuraDev
@SakuraDev Жыл бұрын
hi, if you don't want appbar in login page, you can use route separation. with route separation, you can have different layout tree for your routes. you can watch this video for this feature : kzbin.info/www/bejne/bJnXdXRsq5l5hq8
Жыл бұрын
@@SakuraDev I have almost no idea how to implement it :)
@ext_0015
@ext_0015 Жыл бұрын
Thank you
@SakuraDev
@SakuraDev Жыл бұрын
🌹🙏
@annayeung789
@annayeung789 Жыл бұрын
Thanks for the video! I got a question is that the token object passed into my async jwt() only contains keys name, sub, id, password, iat, exp and jti, there isn't any "access token" in it. Is the latest version of next auth change the format of the token object? Thank you very much!
@heenix5803
@heenix5803 Жыл бұрын
Having the same issue... Have you figured it out?
@gabrielcampos9948
@gabrielcampos9948 Жыл бұрын
Thanks!!!!!!
@SakuraDev
@SakuraDev Жыл бұрын
Thanks 🌷
@kisstamas6675
@kisstamas6675 Жыл бұрын
thank you, its a great video. What do you think is it possible to use different authentication provider (facebook, google etc.) and a custom backend. So when I authenticate with facebook, somehow my backend should know about that, and also give me an accessToken.
@SakuraDev
@SakuraDev Жыл бұрын
Yes, we can. We can do it in signIn callback of next auth
@kisstamas6675
@kisstamas6675 Жыл бұрын
@@SakuraDev it would be nice see a working example... :P
@SakuraDev
@SakuraDev Жыл бұрын
@@kisstamas6675 I will create a short video on it
@kisstamas6675
@kisstamas6675 Жыл бұрын
@@SakuraDev you are amazing :)
@djalalmaster1018
@djalalmaster1018 Жыл бұрын
Very informative video, I just want to ask , how does the backend returns a jwt token
@SakuraDev
@SakuraDev Жыл бұрын
Thanks. You can watch these videos. Creating JWT in Nest.JS framework: kzbin.info/www/bejne/qqjEhpeBp5VpoaM JWT creation in Next.js: kzbin.info/www/bejne/nYjKhJiVbsSii80
@djalalmaster1018
@djalalmaster1018 Жыл бұрын
@@SakuraDev Thank you so much ✨
@emrahcansahinoglu2342
@emrahcansahinoglu2342 Жыл бұрын
Please give me an advice, I really need it. For a social media apps what is the best way to fetch data such as all posts, single post etc.? Fetching on client or server?
@SakuraDev
@SakuraDev Жыл бұрын
I would definitly fetch on server side if it is possible.
@tunaralyarzada
@tunaralyarzada Жыл бұрын
My friend, i have everything like jti and etc, except accessToken in session object. why do u think it doesnt appear in my session object?
@SakuraDev
@SakuraDev Жыл бұрын
backend should include access token inside the response of login request.
@ramaalfinbaehaqi7872
@ramaalfinbaehaqi7872 4 ай бұрын
amazing
@SakuraDev
@SakuraDev 4 ай бұрын
Thanks 🙏🙏
@ramaalfinbaehaqi7872
@ramaalfinbaehaqi7872 4 ай бұрын
@@SakuraDev How to implement refresh token in this way?
@SakuraDev
@SakuraDev 4 ай бұрын
@ramaalfinbaehaqi7872 hi, I will upload a video on this topic on Monday
@ramaalfinbaehaqi7872
@ramaalfinbaehaqi7872 4 ай бұрын
@@SakuraDev okayy, keep it up bro🔥
@jeffinj7707
@jeffinj7707 Ай бұрын
how to do the same but for a signin endpoint with OAuth, instead of credentials, if the backed send back the JWT token after OAuth
@yashkum095
@yashkum095 27 күн бұрын
oauth does not set jwt from what i realised, some of them do, and their formats differ
@SakuraDev
@SakuraDev 26 күн бұрын
Hi, do you want to handle OAuth in the back end or your NextJS project?
@jeffinj7707
@jeffinj7707 20 күн бұрын
@@SakuraDev OAuth setup is done using passports in a nest project. Let's say we have an endpoint in Nests to start the auth flow. The auth callback, also in Nests, handles the user creation, creates a JWT token, and sends it back to the next app. In this case, nextjs does not handle the auth but uses the JWT returned to create a session, make API calls, and validate the user. What I have done is storing the JWT in secure cookie from nextjs API endpoint (nestjs redirect back to this API with JWT ) and redirect to home page.
@丶-s3u
@丶-s3u Жыл бұрын
is there any difference if you put next auth /pages/api/auth/[...nextauth] and app/api/auth/[...nexauth]/route.ts
@SakuraDev
@SakuraDev Жыл бұрын
A new video about it will be uploaded in 2 or days.
@mrmistyeye7076
@mrmistyeye7076 Жыл бұрын
Hi! Thanks for the explanation, it was super userful :) I have a question though: it seems that after the authentication, before the callback function comes to play, next.js decodes by itself the jwt to make it more human readable, what if i just want to retrieve the entire jwt?
@SakuraDev
@SakuraDev Жыл бұрын
well, for safety reasons, next auth does not allow direct access to the cookie that contains that JWT.
@spencerbigum1309
@spencerbigum1309 Жыл бұрын
Super helpful man thank you. I have 1 question still - How did you know about the route "/test/user/1/posts" because it's not defined in the app? How is that route working? Cheers. Thank you for not doing a github login lol
@SakuraDev
@SakuraDev Жыл бұрын
🌷🌷🌷thanks. the route is on a backend project which I just call it. the link to the github repo of backend project is in the description.
@spencerbigum1309
@spencerbigum1309 Жыл бұрын
@@SakuraDev Oh interesting, ok so the backend is actually responsible for creating the JWT. How is Next-Auth aware that a JWT token is being sent? Just by setting the session strategy to JWT?
@SakuraDev
@SakuraDev Жыл бұрын
@@spencerbigum1309 yes backend creates JWT and send it to next.js. but this not because we set strategy of next auth session to JWT. In fact the session in next auth can be kept in two ways: JWT and database. If you choose JWT the session is turned into a jwt token and will be kept inside http cookie. In database strategy we have to setup a db in our next.js app and the session will be kept in db. So we should not confuse the backend JWT and the next auth session JWT.
@spencerbigum1309
@spencerbigum1309 Жыл бұрын
@@SakuraDev This was very helpful! Thank you for explaining. Really enjoyed your videos today!
@SakuraDev
@SakuraDev Жыл бұрын
@@spencerbigum1309 Thanks 😊
@kadiruretir
@kadiruretir Жыл бұрын
Çok teşekkürler
@SakuraDev
@SakuraDev Жыл бұрын
🌷🌷
@rorn-dev
@rorn-dev Жыл бұрын
How about if we use Serverside component how can we use that access token ?
@SakuraDev
@SakuraDev Жыл бұрын
hi, we can use getServerSession()
@GodYutaru
@GodYutaru Жыл бұрын
Thank u!!! new sub ❤ Amazing content you are sharing, keep on hacking!
@SakuraDev
@SakuraDev Жыл бұрын
Thanks for your support 🙏
@webdevnav
@webdevnav 8 ай бұрын
Where can I see the backend code? How is user session verified?
@SakuraDev
@SakuraDev 8 ай бұрын
Hey, you can watch this: kzbin.info/www/bejne/oZmxqKV8f5KLp9U&lc=UgwgFcc0XR2NZ3pwttV4AaABAg
@juangabriel2559
@juangabriel2559 Жыл бұрын
I love u
@SakuraDev
@SakuraDev Жыл бұрын
Thanks👋. Hope my wife doesn't see that 😅😅
@kidzeroll99
@kidzeroll99 Жыл бұрын
how to do automatic logout when token expired?
Жыл бұрын
Where in Your files is api router /auth/login?
@SakuraDev
@SakuraDev Жыл бұрын
Well, this Is a separate back end node.js project.
@jorgechimal5204
@jorgechimal5204 Жыл бұрын
can you provide us with an example handler for this requests to the backend? I'm still learning and I don't know how to validate if the token is correct/valid when it is sent to the backend. For now I only validate if the token exists on the headers (using a node.js API server with express)> Thanks a lot for your video
@SakuraDev
@SakuraDev Жыл бұрын
Hi, see this video : kzbin.info/www/bejne/ZpbYZZKigauefc0 It is a full stack authentication with next.js. And if you want to see only backend auth example, see this : kzbin.info/www/bejne/qqjEhpeBp5VpoaM
@alexdin1565
@alexdin1565 5 ай бұрын
please can you make video on how we can refresh token if expired?
@SakuraDev
@SakuraDev 5 ай бұрын
Yeah of course. I will upload it in the next week
@hussainbhagat8855
@hussainbhagat8855 8 ай бұрын
But how do I get the jwt token that is generated by next-auth?
@SakuraDev
@SakuraDev 8 ай бұрын
why do you want to get that?
@hussainbhagat8855
@hussainbhagat8855 8 ай бұрын
​@@SakuraDevThe backend API's are dependent on it! Anyways found out a way to get it! Basically use the getToken() function to get the token but that's in the JWE format so you can change the encoding and decoding formats in the options passed in the NextAuth function.
@nmrisrl11
@nmrisrl11 Жыл бұрын
Hello Sakura Dev, thank you for this video! I have a question. I'm using Next13 and I implemented an Authentication with Facebook and Google providers. When I login using Facebook or Google. I already got the user object with access_token from these providers. Then after that on success I'm also doing another login with external API endpoints to actually get user data from our application. This also returned user object with access_token and refresh_token. My question is how can I pass or access this user object from external API to another page so that I can make request from different endpoints that require a Bearer Token. I need to use the access_token from external API not from the providers I used (Facebook/Google). I hope you notice my question and help me out with this one. Thank you!
@Jibs-iq1em
@Jibs-iq1em 10 ай бұрын
Hello Israel, how are you doing? If you were able to fix the issue, could you please provide a solution? Thanks.
@codingcambodia
@codingcambodia Жыл бұрын
How do we handle refresh token with next auth
@samuelliotta9437
@samuelliotta9437 Жыл бұрын
Great stuff! :) Will the token with this method be available also in getserversession? In case we need it for fetching data in ssr.
@SakuraDev
@SakuraDev Жыл бұрын
Hi, no its not available in the getserverSession. I'm looking for a solution and if I found a solution I will let you know.
@samuelliotta9437
@samuelliotta9437 Жыл бұрын
@@SakuraDev thanks! :)
@vladlanov
@vladlanov Жыл бұрын
just encountered the same issue here: need to protect my API routes, but getServerSession always returns null when I set it up in my /pages/api/route (((
@vladlanov
@vladlanov Жыл бұрын
we somehow need to pass httpOnly cookies like next-auth.session to api route. The point is: when you call getServerSession in getServerSideProps, passing context.req, context.res and authConfig, all works fine. But when you try to make further request here, to next api route, this data is lost. And when we can figure out, how to pass this data, we win))
@vladlanov
@vladlanov Жыл бұрын
well, eventually I decided to leave it be xD Because I remembered that API should be stateless, so I just get my session in "getServerSideProps" and pass header Authorization with the token from session. Works like a charm)) And on the API route itself getServerSession is still working, when you access this route from browser. To make API route more secured I added this to handler: const session = await getServerSession(req, res, authOptions); let accessToken = 'Bearer '; if (session) { accessToken += session.tokens.access; } else { accessToken = `${req.headers.authorization}`; } And after that I pass to axios request's config: headers: { Authorization: accessToken, },
@mzulfanw
@mzulfanw Жыл бұрын
how about with sso (google / facebook), i'm getting issue when hit to external API
@versaleyoutubevanced8647
@versaleyoutubevanced8647 Жыл бұрын
i'm getting an error Unauthorized 401 whenever i try to make a request inside authorize function, probably i missing the csrf token, but i have no idea where to send it, can you help me?
@SakuraDev
@SakuraDev Жыл бұрын
Are you using my backend project?
@versaleyoutubevanced8647
@versaleyoutubevanced8647 Жыл бұрын
@@SakuraDev no, i'm making a request to next api route, checks if users exists on database, check passwords... then return user data and token, basic stuff but i getting that error
@SakuraDev
@SakuraDev Жыл бұрын
@@versaleyoutubevanced8647 well, try to call the api using postman to see if you still get the error.
@versaleyoutubevanced8647
@versaleyoutubevanced8647 Жыл бұрын
@@SakuraDev just used insomnia just now, making post request to "/auth/signin/credentials" it does set my cookies, but return no response, and post request to "/login" which is my next route endpoint, is returning everthing as expected, so the problem must be related to authorize function
@versaleyoutubevanced8647
@versaleyoutubevanced8647 Жыл бұрын
I'm loggin the api response inside authorize function and it's returning everthing fine, the Unauthorized is being throw in the callback route, after authorize function, at "/auth/callback/credentials"
@Yu-ChihChung
@Yu-ChihChung 9 ай бұрын
I am using Next 14, do you know if this method can also apply to server component?
@SakuraDev
@SakuraDev 9 ай бұрын
No you can watch the other video about it
@SakuraDev
@SakuraDev 9 ай бұрын
kzbin.info/www/bejne/ZpbYZZKigauefc0
@codeheaven559
@codeheaven559 Жыл бұрын
Hi Can you help? I'm getting this error 'Cannot POST /api/auth/callback/credentials'
@TornVeil7
@TornVeil7 Жыл бұрын
¡Thanks! Just in time
@TornVeil7
@TornVeil7 Жыл бұрын
@@SakuraDev Sure! Thank you
@anuragdixit3581
@anuragdixit3581 8 ай бұрын
I am using app router how it is gonna work in that ?
@SakuraDev
@SakuraDev 8 ай бұрын
Still the same. At the time of recording the video, the API folder should have been placed in the Pages folder. now you can just create the API folder in your app folder. that is all you need to do.
@low_scarlet
@low_scarlet 6 ай бұрын
nice, but what if backend have access and refresh token
@SakuraDev
@SakuraDev 6 ай бұрын
The solution in this video: kzbin.info/www/bejne/fXiZZ6mHnMhkjMk
@Sasuke-px5km
@Sasuke-px5km 9 ай бұрын
Can we use Django as backend using this configuration?
@SakuraDev
@SakuraDev 9 ай бұрын
Yes, it actually doesn't matter what is your backend
@Sasuke-px5km
@Sasuke-px5km 9 ай бұрын
@@SakuraDev Django of Python sir, I should use NextJs v13 right?
@Sasuke-px5km
@Sasuke-px5km 9 ай бұрын
@@SakuraDev How I can implement when I'm on router not pages?
@sahazanomenarazafimandimby734
@sahazanomenarazafimandimby734 10 ай бұрын
It doesn't work with Firefox, but it works well with Edge
Authentication with Next Auth and Next.js 13
27:07
Sakura Dev
Рет қаралды 96 М.
NextJS 13. Аутентификация и приватные роуты
33:59
Михаил Непомнящий
Рет қаралды 52 М.
Session Vs JWT: The Differences You May Not Know!
7:00
ByteByteGo
Рет қаралды 347 М.
Refresh Token Rotation With Next-Auth V5 || Managing Tokens With A Custom Backend
48:28
tapaScript by Tapas Adhikary
Рет қаралды 12 М.
How is this Website so fast!?
13:39
Wes Bos
Рет қаралды 1,4 МЛН
Full Stack Authentication With Next.JS | Next Auth | Nest.JS
1:33:47
Authentication Flow in Next.js (Complete Tutorial)
30:37
Cosden Solutions
Рет қаралды 43 М.
Next-Auth on App Router - Solid Auth, Super Fast
17:20
Jack Herrington
Рет қаралды 126 М.
Next.js App Router Authentication (Sessions, Cookies, JWTs)
11:31