auth state is not updated after sign in and sign out private routes can access at first click

[s-hussain639]

I have added routes as following <ProppedRoute exact path="/auth" render={AuthComponent} props={childProps}/> <ProtectedRoute exact path="/adminpanel" render={AdminPanel} props={childProps}/> <ProtectedRoute exact path="/logs" render={Logs} props={childProps}/> As i sign out and go to some ProtectedRoute is can be access on send hit its state updated and it goes Protected. It not redirects after sign in to that page.

[jjmerri]

You need to handle the redirect in handleStateChange and you need to create a method to handle an authState that is not 'signedIn' and update the handleStateChange method to call it. In App component:

const handleUserNotSignedIn = () => {
    setAuthState({ isLoggedIn: false });
  };
  const childProps = {
    isLoggedIn: authState.isLoggedIn,
    onUserSignIn: handleUserSignIn,
    onUserNotSignedIn: handleUserNotSignedIn,
  };

In AuthComponent:

const handleStateChange = (state: any) => {
    console.log(state);
    if (state === 'signedIn') {
      props.onUserSignIn();
      
      const queryParams = queryString.parse(props.location.search);
      props.history.push(queryParams.redirect)
    } else {
      props.onUserNotSignedIn();
    }
  };

I used the query-string npm package for queryString.parse