React Login using Access & Refresh Tokens

👉 Check our website: scalablescripts.com
Learn how to Authenticate using Access & Refresh tokens using React.
Source Code: github.com/scalablescripts/re...
Backends:
NodeJS: • NodeJS Authentication ...
Want to learn to login using two-factor authentication or using your google account?
Check out these courses:
The Ultimate Authentication Course with NodeJS and React: scalablescripts.com/p/react-n...
Get access to all my NodeJS courses for $8/month:
NodeJS Bundle: scalablescripts.com/p/nodejs-...
Get access to all my courses: scalablescripts.com/p/membership
#react #authentication #javascript

[@hilariousness4393]

I've been trying to solve this for over a week now. I had to scroll all the way down to find this gem. You're a great teacher man. Note: Always scroll down on KZbin for quality and straight to the point video.

[@hamedayinde9434]

This is the simplest explanation and implementation of refresh token I've seen on KZbin. Every other ones are just overly vague and complex. Thank you and you earned a new subscriber.

[@linhpink]

Hi. I'm working on a real project, and I'm having this situation. I found your approach by accident. Although it has few views, the quality is much better than the videos I found. I want to say thank you very much. Very good and realistic video :3

[@eliyahomalca3513]

Finally someone who knows how to make a video that really explains, you are the king bro👑👑👑

[@powarrcan1959]

this was the clearest explanation of the videos i have watched. thank you so much bro

[@andrewmukare3433]

Thank you so much! All other implementations I found were too vague

[@atuldubey8146]

Wanted to tell you that you made my life easy after this.😌

[@ridamsinghal1073]

Best video I have been searching for this all day. Thank you

[@RABAH126]

Thank you very much, How to proceed if I store the refresh token in the database ?

[@tejasvijb4228]

Thank you very much!! subscribed!!!

[@mretineh1172]

This save my life.. lol Thank you very much for this video

[@patrickudeh5869]

Good one.... Please can you share the link for the back end?

[@twanabrno875]

Is that safe way to save tokens, can attacers(XSS, CSRF) easly attack or it's secure in some way?

[@sakshitawani7906]

Hi,Where can i find the server side code?

[@josephuzuegbu7431]

I love this. keep it on

[@saurabhrawat3878]

hi where you have written server code

[@shashankpandey8346]

I think I missed the backend part. can anyone pinpoint it to me? I want to see if it is similar to mine.

[@KeepItFresh02]

If you're navigating unauthorized routes for that 30s then want to navigate to the authorized route the access token expires. Then the axios interceptor calls the /refresh route, but the /user endpoint fails again. This does not seem like a good user experience. You have to navigate away from the authorized route then back again to see the UI or the user name. Is this just how the updating with the Authorization header works? its not asynchronous on the frontend. I checked the code on github and its doing the same thing.

[@codingroom928]

thanks a lot!

[@eliyahomalca3513]

מלך 👑

[@eyadambri9382]

With mysql ???

[@desmondodion9046]

How are you receiving and storing the cookie on the browser when the server and client are on different domains? I have been battling with this for days. I have read more articles, chat GPT, stack overflow etc in 5 days than I have in an entire year. The cookie is sent from the server but the browsers doesn't store it because if from a separate domain so please HOW 😢

[@KeepItFresh02]

You may have already solved it but I had the same issue. I added these two extra options to the cookie: sameSite: "none", secure: true,

[@MohamedAmineTalib]

very good bro

[@it2184]

Хороший ролик, спасибо

[@twanabrno875]

what if i refresh the page, will that token be removed?

[@pulkitgupta669]

The refresh token will not be removed as it is stored as cookie.

[@sujit_ghimire]

the cookie is set on the postman and but isn't being set on the browser while using react . What might be the problem?

[@desmondodion9046]

Did you solve this problem? I have been having this issue for almost a week* server sends, browser ignores

[@sujit_ghimire]

@@desmondodion9046 sent it as a response

[@eyout7973]

@@desmondodion9046 if it is in production the host name must be same in order to obtain the cookies

[@abdassalamnaciri-tk4cb]

@@desmondodion9046 did you solve that problam please

[@anhnguyenhoai9003]

haha how i love your accent so cute

[@mohamedyoussef8835]

Awesome ++++++++++++++++++++++++++

[@isberabah1]

with django

[@ScalableScripts]

Next week probably

[@nedimkacanofficial]

Are you king ?

[@nourhanashraf592]

when I use WithCredentials in axios call I got this error: Access to XMLHttpRequest at '****************************' from origin 'localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

[@hungle-bp5qt]

use cors from server man its worked for me