Load the State from the Session

Tonny · August 30, 2019, 5:26am

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?

jayair · September 2, 2019, 4:10pm

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.

jayair · September 2, 2019, 4:11pm

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

ztc212 · September 4, 2019, 2:26am

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.

jayair · September 8, 2019, 5:55pm

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

ztc212 · September 19, 2019, 1:26am

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…

jayair · September 28, 2019, 6:27pm

I see. So whats the issue you are having now?

bgirr · October 9, 2019, 2:14am

Thanks a lot! That made my day!

yveshema · April 13, 2020, 9:31pm

Show only the login and signup pages when user not logged in

First let me just say how much I have enjoyed this guide. Honestly, it’s the best tutorial I have ever come across, period.
With regard to login session handling, I noticed that when the user logged out, they are redirected to the login page, however, if you manually enter the home page path in the browser, the home page still shows. I am not sure if this is the desired effect.
I tried to add a redirect within the catch block of the onLoad function after error handling, but this had no effect when the user clicks on the home link.
I was wondering if there was a way to make the Login page the default for non-logged in users even when they manually navigate to a different route.

jayair · April 25, 2020, 4:38pm

Thanks for the kind words.

Right now the home page is not an authenticated route, you’ll need to switch it over. That’ll make it redirect to the login page as well.

github.com

AnomalyInnovations/serverless-stack-demo-client/blob/master/src/Routes.js#L18


import Login from "./containers/Login";
import Notes from "./containers/Notes";
import Signup from "./containers/Signup";
import NewNote from "./containers/NewNote";
import Settings from "./containers/Settings";
import NotFound from "./containers/NotFound";


export default function Routes() {
  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <UnauthenticatedRoute exact path="/login">
        <Login />
      </UnauthenticatedRoute>
      <UnauthenticatedRoute exact path="/signup">
        <Signup />
      </UnauthenticatedRoute>
      <AuthenticatedRoute exact path="/settings">
        <Settings />

JakeMetz8 · April 28, 2020, 12:21pm

I believe I am running into this same issue as I created my user in the AWS console. The account status is FORCE_CHANGE_PASSWORD . However, when I try to run the CLI command provided it fails and states:

You must specify a region. You can also configure your region by running "aws configure".

Fundamentally, I’m not understanding the root issue.

jayair · May 3, 2020, 1:06am

I think your AWS CLI needs a default region set.

Akash76 · January 21, 2021, 5:56am

I have followed the tutorial as it was mentioned… But I am not able to upload a file to S3 bucket. “AWSS3Provider - ensure credentials error cannot get guest credentials when mandatory signin enabled” This is the error. Kindly please help me!

jayair · May 15, 2021, 8:30pm

It looks like the user isn’t logged in? At which step are you seeing this?

Sparky · July 23, 2021, 4:41am

Hello guys,
Can anyone help me out here, I am new with react.
So the issue I am having is I have an extra field in my db that takes care of user type so like user, employee or admin. I am creating a dynamic nav so it will be different for each type of user I have tried using context but when the page is refreshed it is getting reinitialized with the default value. Do you know any way to do it. It will be great help!
P.S. I want a secure way that can’t be seen on browser or can be edited by user so I came across local storage but its not secure.

Topic		Replies	Views
Add the Session to the State Chapter Comments	55	4550	March 30, 2020
Clear the Session on Logout Chapter Comments	15	3282	December 18, 2018
Redirect on Login Chapter Comments	8	1660	January 3, 2021
Use the Redirect Routes Chapter Comments	7	2362	September 22, 2018
Handle Routes with React Router Chapter Comments	17	2875	April 22, 2019

Load the State from the Session

Show only the login and signup pages when user not logged in

Related Topics