Fullstack Authentication with Refresh Access Tokens (Node, Next.js, Typescript)

Timeline
00:00 Intro
00:45 Refresh Access Token Auth
04:44 Demo Application
07:28 Project setup
09:20 Sign In with GitHub
18:45 Refresh Tokens
21:43 Logout API
22:49 Setup Frontend
24:50 Client Side Authentication
27:31 Server Side Authentication
29:50 Logout Frontend
31:01 Websocket Server
32:42 Realtime Frontend
34:24 Deployment
40:16 Wrap Up

[krimod]

Amazing !! Excited to see more of your dev content

[Anonymose]

Oh man!
What you did is letterly amazing!
If someone looks for something similar he/she has to spend at least 5 hours watching several tubes and eventhough you’ll may not find what you search
I appreciate it man
Thank you very much you save my life!

[andrews]

This is gold!
From the very basic to highly advanced!

[hillcountrydev]

nice clean vid. Looking fwd to more dev content for sure.

[waynelinks]

Very nice tutorial, hope more is coming, subscribed.

[darky]

I didn't watched the full video but it looks promising, thanks :)

[eminqasimov]

This is the one of the best tutorials I have ever watched. especially not wasting time to type code and having deployment section.
Your implementation is so elegant.
I have some questions in my mind.
1. Seems it is possible to /refresh access token from server side when access token get expired. Why client needs to renew access token if server can do it?
2. What about if API needs to support mobile app, does adding tokens to cookie in this case work?



Sorry if questions sound silly, auth is hard topic to grasp well.

[haochima]

Hey man, thanks for taking the time to put this together. I think in general you are moving a little quickly, especially for people who wish to follow along. I also think it could be helpful to approach it from a 'here's the problem, and this is the solution' manner with a bit more explanation about the decision making process, rather than simply saying 'this is what I am doing'.
It could also be because this is just slightly beyond my level, but I did have to do a fair bit of googling on the way through, and some things I still don't know the answer to because you didn't say what was happening. However, this is a bigger reflection on me than it is on your content.

[jamesdcosta]

You look like a luftwaffe pilot dude. And you speak like flying an ✈️ aircraft! Certainly you are intelligent and knowledgable 👍 this is a nice project!

[ChildrenOfDemiurgos]

Bro, where you at? Let me buy you a beer :D. This was awesome!

[Mike-xrfk]

Hi Florian! thank you for making this amazing video.
What is the point of storing both the refresh token and access token together in the cookie? I mean, in this case, if the access token is leaked, the refresh token can be also leaked and be abused by a hacker for a long time, right?

[yogeshbhatt]

I see a cool dev using ubuntu.

I subscribe.

[losingyourgrip]

Hello, you have made an excellent video with an even better explanation, the implementation with Typescript is admirable too. I'm trying to implement it in my project but my backend/API is separated from the frontend, in a different URL. In this case, should the API return both tokens to me in the login response and from the frontend store them in cookies or is there a better implementation? I would appreciate your words :)

[coderjoe]

Kudos! Wish all tutorial videos are like this, well prepared, clean and informative.

On a technical note, as 'Refresh Token Rotation' is nowadays quite mandatory to improve security, I wonder if you can simply change the logic in your token-utils.refershTokens() function to simply create a new signed refreshToken regardless.

An interesting question is that when you do this, if you also increase the tokenVersion for the corresponding User in your DB, can your perhaps achieve a version of 'Automatic Reuse Detection' simpler than Auth0 implemented with the chains/families of refreshTokens?
I feel the answer is perhaps No unfortunately, as if you don't keep track of the chains/families and origin of each (thinking each chain/family representing a different browser/device logged by the same user and the user expect each of the these 'session' stay logged in without interference with each other, like Netflix), then you would naturally create race conditions.

[andrewfallen]

Hey, thank you so much for your video. It helped a lot not only in understanding the ssr auth flow, but also with OAuth (from scratch, with raw provider api, without libs (e.g. PassportJs)). But i have a question, how can I add to this custom withUser getServerSideProps method an opportunity to fetch my data from backend which is protected with acessToken: on page request simultaneously call /me endpoint and then call my data e.g list of posts. Thanks in advance!

[aggies]

This tutorial is really awesome and clear! But Next.js has undergone significant changes. Is there a possibility of releasing a NEXT.JS 13 version? I hope I'm not making an excessive request~T_T~BTW Love your channel! Thanks a lot.

[al-doori]

Thanks for the video Folrian, can I ask what about protecting the nextjs pages if user is authenticated ? how would I implement that?
- I have a .NET Core API and I am getting the JWT from it.
- I want to protect the pages and component routes if users is authenticated only - I tried to use context but I am facing a lot of problems may I know what do you suggest, thank you.
Edit - did not watch the whole video

[grif.n]

Hi! Is there a reason you use the client-side fetcher function to handle the token refreshing when there is a 401 error instead of keeping that logic server-side before returning any response? Ie. if the client will receive a 401, refresh the tokens server-side and immediately respond with the payload and updated token.

[raymondmichael]

Struggling with such.
How to add roles authorization into the mix

[techintime]

need to separate between api and client, can not set cookie after logged in... and nextjs dose not set cookie on headers