Load the State from the Session

const childProps = {
    isAuthenticated: this.state.isAuthenticated,
    userHasAuthenticated: this.userHasAuthenticated
  };

Wouldn’t you normally use a Redux Store for sharing the state across containers, rather than depend on props in so many layers?

It is okay to lift your state up this way. You don’t have to rely on Redux for this. Redux can be quite useful but might not be a great choice when you are first starting out. This article can help you decide if you want to use Redux.

I haven’t been able to get the session loading working properly. I have no clue what’s wrong. I have gone to the point where I literally copy and pasted the file from github and it still does not save my session upon refresh.

I confirmed that isAuthenticated is changing to false after the refresh.

Any ideas? the only page that was edited in this chapter is App.js and I literally have that copied off of the github page for this project

The “isAuthenticated” variable is true but nothing is saved to local storage

What is not working for the session loading? It doesn’t log the user out or doesn’t keep them logged in?

It logs the user out upon refresh

Figured it out. I had gone back and manually created a user in the console. This meant that my user was still on status FORCE_CHANGE_PASSWORD. That was the problem :frowning:

2 Likes

I see. Glad you figured it out.

Thanks for clearing this. I ran into the same issue.

This is quite a weird case as the account seems to be in limbo - it can be signed in without errors, but is unusable (at least in this Lessons context).

1 Like

Hi, I have a question regarding Auth.currentSession(). It always returns a state of “rejected” with the reason being “No userPool”.

I have checked both of my Cognito User Pool and my Identity Pool. The admin@example.com user has an Account Status of “Enabled / CONFIRMED” and the Identity Pool has been properly configured.

I also tried testing Invoking the API Gateway using the IAM Policy Simulator and when I ran the simulation, I got “allowed” as the result so it seems that it should be fine. But when I tried actually testing it out on the browser, I always get the “no userPool” error upon the component mounting.

I was wondering if you guys have encountered this problem before or know of a way to fix it?

Just an update to the situation. I seemed to have found out the reason why it wasn’t working. I did not configure Amplify before rendering App.

I mistakenly added Amplify.configure() below ReactDOM.render() in the index.js file. After moving Amplify.configure() above ReactDOM.render(), the “No userPool” error went away.

1 Like

Oh good catch. Glad you figured it out.

1 Like

While I understand what the conditional expression is supposed to accomplish here, I am confused about the actual implementation. The docs state isAuthenticating it’s there because “loading the user session is an asynchronous process” but we’re using await before Auth.currentSession() and then setting state.isAuthenticated to true via userHasAuthenticated(true) so shouldn’t the user session be guaranteed to have already loaded by the time isAuthenticating is set to false? I also see that userHasAuthenticated() calls setState() which we can’t be sure will run right away due to batching, but I don’t see anything else that triggers another render() prior to that specific setState() being set…?

Separate but related, the only time state.isAuthenticating = true is right after the App is constructed. Assuming someone explains what I am missing above, shouldn’t we set this back to true at some point when the user logs out in preparation for another async user session call?

Just thought I’d chime in here to say I had the same issue, which I fixed by changing my user’s password.

AWS wouldn’t let me do it via the console, so I ended up working out how to do it via the CLI.

For anyone else who wants to do this, here’s the command to run:

aws cognito-idp admin-set-user-password --user-pool-id [User pool ID] --username [Username] --password [New password] --permanent

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…