Authorization - where to initialize?

Question

React

Good afternoon!

I don't know where it would be more correct to initialize and what logic to choose for the cookie-based session authentication service to work.

When we authenticate, we receive the corresponding cookies.
Next, we dispatch the user.

When the application loads or when the page is reloaded, the state of the application no longer knows that we are authorized.

I would probably create a cell in localStorage and write the user's data there.
When loading, if the cell is present, then temporarily we are in the state of the application will be authorized, at the same time, we will send a request to the server for user data.

The latter for two reasons.

The first is to make sure that we are really authorized.
Second - Update user data.

Question: How do they do it in general and how to implement it competently?
Add. question: What files to create, where should they be?

The last question is probably more about architecture.
How should this ideally be implemented? Although I know that there are no strict standards in the js world.

Current architecture:

src

- components

-- Something.js


- containers

-- App.js


- actions

-- someActionCreator.js


- reducers

-- someReducer.js
-- rootReducer.js


- index.js

- store.js

Thank you!

Answer 1

When the application loads or when the page is reloaded, the application state no longer knows that we are authorized.

Why? If the server gives you a token during authorization, then save it in cookies.
Further, if the server address matches the web page address, then the browser will automatically send cookies in each request, i.e. any of your request to the server will pass the authorization check and you won't have to write any logic.
When reloading the page, if the profile data did not come due to the fact that you are not authorized, then send the user to the login page.

I would probably create a cell in localStorage and write the user's data there.
When loading, if the cell is present, then temporarily we are in the state of the application will be authorized, at the same time, we will send a request to the server for user data.

It makes no sense to use localStorage and you have nothing to show the user if this cell is present. Make a request, and the server will return or not return the data to you. Everything is simple.