Build a Login and Registration User Interface in React.js With JWTs and Refresh Tokens

Repository: github.com/Tom...
📚 Concepts & technologies covered
- React
- Next.js
- TypeScript
- JWTs and refresh tokens
- Cookies
🌎 Follow me here:
Discord: / discord
Twitter: / tomdoes_tech
Facebook: / tomdoestech​
Instagram: / tomdoestech​
TikTok: / tomdoes_tech
☕ Buy me a coffee: www.buymeacoff...

[@lolbozland]

This is amazing. I wrote 70% of the video code. I saw that there is still a sequel, I was delighted! I'm from Ukraine and now I work as a vue developer, but it's still interesting to learn the backend.
In general, my English is bad, but I watch it with subtitles, I appreciate your efforts.
Thanks!

[@TomDoesTech]

Your English is fine my dude, so glad you liked the video :)

[@PsychoDude]

for those on 17:10. the new way to do nonempty is .min(1, {
message: "Name is required",
}

[@ugurdev]

Thanks again Tom. Your videos are a great step up in an ocean of basic stuff for a hobbyist like me.
I just had one minor problem with this setup, I don't know if you will respond after a long time (understandably), but after 15 mins, when accessToken expires, user is logged out. And despite swr doing requests on it's own or with a page refresh, user won't log back in because browser won't include expired cookies in the request.
I solved this with a quick change to the "deserializeUser" middleware by changing `if (!accessToken) {return next();}` to `if (!accessToken && !refreshToken) {return next();}` and `if (expired && refreshToken) {` to `if ((expired && refreshToken) || (!accessToken && refreshToken)) {`.
But I am pretty sure there are much better ways to do this, and I am just wondering how you would solve this if you don't mind sharing.

[@AbhinavPrasad]

please let me know if you could solve this issue through any other way. i am facing the same problem.

[@samisbgh6253]

Perfect Man 💪😍

[@martiserramolina5397]

Why did you need to pass context.req.headers in get server side props? Why is this required to be able to send the cookies to the backend?

[@TomDoesTech]

There's 2 requests. First is the one that the user makes to the app, the second one is the request that next sends to the backend. So we need to include the user's cookies in the 2nd request

[@michaelumeokoli]

very little explanations as to why you're doing anything, why use swr? what does it do differently from axios in this particular example? why is the fallback been passed into useSwr. All the unnecessary type setting in the end. also why is the T generic being set on the useSwr and not the fetcher? how does the context get access to the cookies? Everything is just so confusing.

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++++++++++++++++++ Thank you 🙂

[@sohamvishwas6795]

Thanks, Tom🙂

[@majkel1381]

ah yes for 16 11 2023 nothing seems to work anymore :D

[@TomDoesTech]

Like what? This is part of a series

[@farhanfauzan8355]

how about the logout? because we use res.cookie should we setup a new res.cookie after logout & set the expired to true?

[@mohamedaljoke8679]

Hi I think the end of the video got cut off, there is some error when we do the server side request

[@lukaszbolach506]

Hey there! Anyone working with this series lately?Im done with 2 first parts and found them very usefull, but in this I got stucked around 9min. Typescript complains on {errors.email?.message} it throws : Type 'string | FieldError | Merge | undefined' is not assignable to type 'ReactNode'. Dependencies are outdated? Any hints appreciated

[@EP-pp1fo]

i have the same problem, i fix it with this
{errors.email?.message?.toString()}

[@MiguelRodriguez-ng9wc]

Amazing, thank you for such great tutorial!! c:

[@TomDoesTech]

Glad you liked it!

[@MiguelRodriguez-ng9wc]

​@@TomDoesTech hope not to bother, probably a newbie question haha. What should be done to handle the accessToken not being sent when its cookie has expired. Just increase the expiration time of the cookies?

[@TomDoesTech]

@@MiguelRodriguez-ng9wc Set the cookie expiration to slightly longer than the JWT expiration. Sending an invalid access token and not sending one, but sending a refresh token should do the same thing.

[@AlejandroRL868]

good bro

[@rhodler_]

Hello Tom,
Do we have to create a new session in the database each time a user logs in after logging out or do we just have to update the first session they created when they first logged in?

[@AbhinavPrasad]

I think when the user logs out, the session validity also needs to get expired. they'll have to login again and then a new session will be created with new access and refresh token.

[@vladimirvucetic4466]

What is the reason you attach user to 'res' and not 'req' object?

[@TomDoesTech]

No particular reason, I believe you could use req.locals.

[@Skia_]

You might wanna try something called tRPC

[@TomDoesTech]

Why?

[@brahimo4701]

@@TomDoesTech tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation.

[@ayushpaharia5452]

Awesomeee!

[@sinaukode]

19:35

[@tarik3958]

OAuth next?

[@TomDoesTech]

Yup! Google OAuth

[@pawekica4109]

yeeeeeeees!

[@_hasib_]

lastpart missing

[@TomDoesTech]

huh?

[@mashinataFC]

@@TomDoesTech The video at the end is cut

[@reknine]

Indeed!

[@LuisAlbertoSandovalArevalo]

@@TomDoesTech Good videos, Will you upload a new video with the full lenght or can update this for the missing part?

[@TomDoesTech]

@@LuisAlbertoSandovalArevalo probably not, I don't have the files for this video anymore.