Load the State from the Session

I have a problem, so far in the App.js the this.state.isAuthenticated is returning `true and is working as expected.

However, the childProps object sent to the Routes doesn’t seem to be updated because when I call this.props.isAuthenticated from the New.js or List.js file the value is false. Can you guys help me?

Hmm I think you might be a little confused about what the isAuthenticating and isAuthenticated flags are doing here. I’m not entirely sure what the concern here is but let me expand on what is being done.

The entire session is managed not by our app code but by the Cognito SDK. We need to use some React state to handle the checking process.

  • When our app first loads, we don’t know if the user is logged in or not.
  • So we want to hold off rendering the app. That’s the purpose of isAuthenticating. And it’s the reason why we don’t need to reset it after the user logs out.
  • To check if the user is logged in we need to run await Auth.currentSession(). Once that check is done we set isAuthenticated is they are and set isAuthenticating to false to render our app.

That’s really strange. Have you compared your code to the one in the repo?

Thanks Jay, this was really helpful! Just today I noticed a page that was rendering with no data and then refreshing with data immediately after. FWIW, it was a Lambda that called another AWS resource.

Hmm what do you mean refreshing immediately after? Do you mean it was loading after a delay?

Thanks Jay, when I sent that message I had a good understanding of React’s downward rendering flow but I wasn’t thinking about Routes (using react-router) as “screens”. I was also experimenting with async methods and I had removed the isAuthenticating code (from my prior message). The combination of those led to a Route being rendered before the async data was returned and what I referred to as a “refreshing”. I don’t believe the whole DOM ever refreshed, just the part in the Route component…