React losing session if refresh browser

Question

I'm keeping my user session in a redux state.

I have a login reducer with the initialState below

const initialState = {
    logged: false,
    user: null,
}

After login, I set the logged to true and the user details.

Then, I have a Navigation folder using react-router-dom to manage my navigation with a PrivateRoute function to validate if user is logged.

const PrivateRoute = ({ component, ...options }) => {
  const login = useSelector((state) => state.login);
    console.log(login);
  const finalComponent = login.logged ? component : Login;

  return <Route {...options} component={finalComponent} />;
};

const Navigation = () => {
  
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <PrivateRoute exact path="/checkRegister" component={CheckRegister} />
      </Switch>
    </Router>
  )
}

export default Navigation;

Everything works just fine if I open the application login and start to navigate. However, if I refresh the browser or, after login, change the browser from localhost:3000/ to localhost:3000/checkRegister it kills the state and return to the login page because the state login.logged is back to the initial value which is false.

If you're using redux everytime you refresh the store the app will reset the state to its default value, take a look at this library if you want to persist the state: github.com/rt2zz/redux-persist if you don't want a library you will have to build custom logic that triggers the request to authenticate before rendering the page in order to update the state with the current user before the page has loaded. — jean182
– jean182, Commented May 26, 2021 at 18:27
You can try the react-redux-session API. Its very simple to use : npmjs.com/package/redux-react-session — shyam padia
– shyam padia, Commented May 26, 2021 at 18:27
@jean182 Thank you. If you want post it as answer, I will accept. Here is a good example of what you just explained: dev.to/bhatvikrant/redux-persist-v6-in-detail-react-10nh — myTest532 myTest532
– myTest532 myTest532, Commented May 26, 2021 at 18:47

Satwinder Singh · Accepted Answer · 2021-05-26 18:49:47Z

3

There are two options

You could use redux-persist as already mentioned by other users.
Save your user object in local storage after login. Now when you initialize user state check if you have some value saved in local storage then get that and assign else set it to null.

answered May 26, 2021 at 18:49

Satwinder Singh

2292 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jean182 · Accepted Answer · 2021-05-26 18:57:26Z

2

Redux is a client based library, so like react if you perform a refresh the state will be set to the initial state.

You can always use a library like redux persist to persist the state in multiple ways, even if the tab is refreshed: https://github.com/rt2zz/redux-persist

As a sidenote as I mention in the comment, you can actually re arrange your code in order to make some side effects before rendering content if you want to avoid using an external library.

answered May 26, 2021 at 18:57

jean182

3,5332 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

React losing session if refresh browser

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related