React Router - 延迟认证后重定向

Question

I am trying to redirect once authentication in my react app is completed. I use cognito (with aws amplify) to do the authentication (SSO). Once authentication is completed, cognito will redirect the app to a page that we specify inside cognito ( /Dashboard ). And once the authentication is completed, our app page gets refreshed, as cognito redirects to a specific page.

The problem here is, when cognito redirects to an endpoint url that we specify, after successful login, the token data is added to localstorage with a delay. This cause my custom route component to check the local storage and says there is no token and user is not logged in.

So as a workaround, im checking a condition in ' /Dashboard ' (Dashboard.js) if userDataInLocalstorage? <ShowAppHome>: <div>Loading...<div> userDataInLocalstorage? <ShowAppHome>: <div>Loading...<div>

Now if someone who is not logged in comes and hits the ' /Home ' - They will see only Loading... . It wont redirect to /Login

Approach in my mind: Adding a timer of 5 second or something to check if cognito puts token. After 5 sec, ill check again if token is there, if not ill redirect to /Login

Its a bit messy stuff, but i would be greatful if someone can give some idea.

1. User Logged In: Login > Cognito > cognito redirects to /Dashboard > Dashboard checks for user and its true

2. User NOT logged in: Hits /Dashboard > Dashboard checks for user and its false > shows Loading...

App.js

<Switch>
      <PublicRoute component={Login} path="/Login" exact />  //To redirect to /Dashboard/Home if  user is already logged in and hits /Login
      <Route path="/" exact>
          <Redirect to="/Login" />
      </Route>
      <Route component={Dashboard} path="/Dashboard" />
      <Route component={PageNotFound} />
</Switch>

PublicRoute.js

function PublicRoute({ component: Component, ...rest }) {
  const [userData, setUserData] = useState()
  const validateCurrentUser = async () => {
    try {
      const data = await Auth.currentAuthenticatedUser();
      setUserData(data.attributes)
      console.log("Public route currentAuthenticatedUser", userData);
    } catch (err) {
      console.log("Public route Please login to continue", userData);
    }
  };
  validateCurrentUser();

  return (
    <div>
      <Switch>
        <Route
          {...rest}
          render={(props) =>
            userData ? <Redirect to="/Dashboard/Home" /> : <Component {...props} /> 
          }
        />
      </Switch>
    </div>
  );
}

Dashboard.js

userDataInLocalstorage? (
        <SideNavComponentForAllPages/>
        <Switch>
            <Route path="/Dashboard" exact>
              <Redirect to="/Dashboard/Home" />
            </Route>
            <Route component={Home} path="/Dashboard/Home" exact />
            <Route component={Home2} path="/Dashboard/Home2" exact />
            
      </Switch>

) : <div>Loading...<div>

Answer 1

What about wrapping the function that checks localStorage inside a useEffect()? This will ensure that the component has rendered before the check takes place.