Clear the Session on Logout

Chapter Comments
1

From @jayair on Mon Apr 10 2017 01:04:07 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/clear-the-session-on-logout.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/41

2

I kept logging out after a refresh. I have checked the code twice and event copied it from your github repository, but still kept logging out.

Any ideas what to do/check?

3

Hmmm we ensure that we load the session when the page loads back in this chapter - https://serverless-stack.com/chapters/load-the-state-from-the-session.html

So it is the componentDidMount method in the App.js that you should check.

4

Jep I have!

import React, { Component, Fragment } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import { Nav, Navbar, NavItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
    
  }

  async componentDidMount() {
    try {
      if (await Auth.currentSession()) {
        
        this.userHasAuthenticated(true);
      }
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }

    this.setState({ isAuthenticating: false });
  }

  userHasAuthenticated = authenticated => {
    this.setState({ isAuthenticated: authenticated });
  }

  handleLogout = async event => {
    
    await Auth.signOut();

    this.userHasAuthenticated(false);

    this.props.history.push("/login");
  }

  render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated
    };
    
    return (
      !this.state.isAuthenticating &&
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {this.state.isAuthenticated
                ? <Fragment>
                    <LinkContainer to="/settings">
                      <NavItem>Settings</NavItem>
                    </LinkContainer>
                    <NavItem onClick={this.handleLogout}>Logout</NavItem>
                  </Fragment>
                : <Fragment>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </Fragment>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes childProps={childProps} />
      </div>
    );
  }
}

export default withRouter(App);
5

The other area to check is your Routes.js and make sure it is using the childProps and AppliedRoute - https://serverless-stack.com/chapters/add-the-session-to-the-state.html

6

It’s the same like the instruction. Like I said, I even copied the file from your github repository. I expect it’s has something to do with Amplify.

I also see a error message when I do an API call:

cannot get guest credentials when mandatory signin enabled

7

In that case, it is worth checking the settings for your Identity Pool. Maybe you are allowing access for unauthenticated users?

8

I see this error in the console: API - ensure credentials error: “cannot get guest credentials when mandatory signin enabled”

9

If you go to your Identity Pool > Click Edit identity pool > Expand Unauthenticated identities. Does it look like this?

06%20PM
Screen Shot 2018-05-29 at 3.27.06 PM.png1670×1138 126 KB

10

Yes it does :frowning:
I created a new pool, but the same.

11

You mentioned the APIs, did you test them successfully by following this chapter?

12

I have it working with the AWS mobile hub.

I saw that I had an older amplify version, but couldn’t upgrade. So maybe it had something to do with that.

Thanks for your help!

13

Hello. I have the same issue. I think this issue should be escalated.
Basically I followed the guide step by step and when I reached the Create Note page chapter, the response to clicking the Create Button is an alert box saying “Error: Network Error”, in console it says:

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://vipxx07lin.execute-api.us-east-2.amazonaws.com/prod/notes. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).”.

So I add the header in the API.POST method and I get the same alert box but in console it says:

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://vipxx07lin.execute-api.us-east-2.amazonaws.com/prod/notes. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).”

14

Just to add. The IAM Policy simulator responds an “allowed”. Also when running API mehtods in cli using invoke I had no issue.

15

You might need to debug this with some logging. It is most likely related to an error while running the Lambda function. The error message is a little misleading at times.

Enable logging for Lambda and API Gateway and post the logs here.

16

Found the answer here

1 Like