How to correctly organize the work of redux?

Question

JavaScript

Hello!
Question only for experienced developers.
What should happen after user authorization on the page?
In my case:
Do dispatch -> loginUser ( username, password )
Send to backend. If everything is OK, return access_token and access_token_expires_at . And if the authorization is unsuccessful, then we simply return - 401 Unauthorized.
When we receive an access_token, we store it in localStorage. For example:

localStorage.setItem('access_token', response.access_token)

.
Question... How would you implement this? Why in some examples, in localStorage, user data is stored in the user cell? If you think about it, they can also change, such as the username or surname. It turns out that until the next authorization we will have invalid user data.
What do we do at the very beginning of the application launch? Where exactly do we check if we have a token? Shouldn't we still check it on the backend? Well, at least send a request to /api/auth/me ?
I read somewhere that cookies are better than localStorage. True, I did not quite understand why. What is your opinion on this matter?
Please describe in detail the correct implementation of authorization in React.

Answer 1

I am for this option:
Keep trying to solve problems on codewars, if you don’t understand what to do, go and google.
Why - most likely, your problem is that you just don’t know how to approach tasks yet. After seeing a few solutions (but you need to honestly understand what they do), you will understand the practical basics and it will be easy to do next.
Google is not bad, as long as you understand what you are using and what it does. It is bad when there is no such understanding.

Answer 2

On YouTube, there is a cycle of lessons by Alex Lushchenko - I like it, the lessons are simple but give an understanding of how to work in practice.

Answer 3

"still didn't come to my answer" - if you already have your answer, then what's the point of asking here?))
Speak English?
https://www.pluralsight.com/codeschool
https://www.udemy.com/

Answer 4

In any case, you will need to store access, refresh, access_expires_in, refresh_expires_in in some secure place inaccessible to other applications but accessible from js. I use localStorage for this.
So you don't need to store this data in redux, as well as send it there via dispatch, let localStorage be the only source of truth. There is nothing specific to React here either.
Write your own small auth service that will encapsulate the logic for checking tokens for relevance, authorization, authentication, updating tokens, clearing them and storing them in localStorage.
Before each request, check the access token, if it has expired, then do a refresh, postponing all subsequent requests until it resolves, if the refresh fails, then just throw the user to login. Axios intercepters can help you with this.
I think you will figure out the rest :) You can
also read about how to organize work with tokens well here https://gist.github.com/zmts/802dc9c3510d79fd40f9d...