How to solve these questions in react?

Question

React

Hello.
Please do not criticize much (since I can write nonsense, but I would like to figure it out) and help with advice or literature.
Question 1: Where to store the data received from the server after authorization (id, access_token (this is a jwt that lives for 3 minutes), refresh_token (this is a crypto key that lives until you log in or do a refresh access_token))
whatever like this: the user refreshed the page and the authorization was gone, since the data from the state was dumped.
Now I have this:
After authorization, I write the received data to authReducer and save it to local storage using redux-persist, but it confuses me that this is all visible, since VK is also on react, but at the same time there are no tokens, no user data in local storage ( the data is in the vk object).
Question 2: How to allow a unique url for the profile page, Mongo is used on the server and its id is "5d314338655a4b0e64813823" and the address localhost:3000/account/5d314338655a4b0e64813823 is not really easy to remember.
Now I have this:
There is a table "page" in the database that contains two fields (title, url) in the title contains the user id (if he did not change the address), the new address of the profile page (if he changed the address) and page addresses that cannot be used, and the url is written id user (who owns the address) and url of pages whose title cannot be used.
In React, there is a route that redirects the request ( localhost:3000/account/:id) to the account container component from which a request is sent to the server with this id, whether this user or such an address exists at all. It seems to me not right to make such a request every time you go to the account page.
What would you like to receive in response to the questions:
1) Have I done the right thing now.
2) If not right, then how to do it right.
3) Literature that would help to get closer to the VK on the implementation of this issue.
4) I would also very much like to know where you can find literature that would help make the application as safe as possible.
Thanks in advance.

Answer 1

since vk is also on react

VK is not written in React. There may be new React modules, but all the main functionality is written in vanilla JS.
VKs on the web client store tokens in an HTTP Only Cookie. And the key for requests to the backend is returned in the code of the authorized page.
As far as user data is concerned, there is little point in storing it in localStorage. They can be requested during application initialization.
Your decision should take into account the security requirements of a particular application. It's safest not to store anything anywhere. In second place is the use of HTTP Only Cookies.
Add a unique field like userName.

What would you like to receive in response to the questions:
1) Have I done the right thing now.
2) If not right, then how to do it right.
3) Literature that would help to get closer to the VK on the implementation of this issue.
4) I would also very much like to know where you can find literature that would help make the application as safe as possible.
1) Well, in theory, data is easy to steal, for example, using a browser extension, a malicious library, or if there is a hole that allows XSS to be executed. If I'm not mistaken, then simple XSS attacks like:
have not been working for a long time.
2) Difficult question and different developers have different answers to it. Study other people's experiences and discussions.
3) There is no need to wait until the VK developers decide to write an article about this or talk about their experience at the conference. You can also do reverse engineering of their client on your own or look for articles / posts of people who did it.
4) Start with the web application security checklist .