I am building my first app with AWS Amplify and React and I'm using withAuthenticator to force users to sign in. When I hit the sign out button it redirects back to the login page but if I refresh the page it logs back in and displays my app again, obviously, this isn't useful as I need it to pletely sign the user out of my app and remove all their data from the browser. What am I doing wrong? I've even made a button to trigger Auth.signOut() but I'm still getting the same issue where I just can't log out from my app.

I've even used the global sign out here but it's still signing back in when I refresh the page. /lib/auth/emailpassword/q/platform/js#sign-out

my code:

import React from 'react';
import logo from './SE_logo.jpg';
import './App.css';
import Amplify, { API, Auth } from 'aws-amplify';
import {withAuthenticator} from 'aws-amplify-react';
import '@aws-amplify/ui/dist/style.css';

async function onSignOutClick() {
  //await Auth.signOut()
  //    .then(data => console.log(data))
  //    .catch(err => console.log(err));
  console.log(Auth.signOut());
 }

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={onSignOutClick}>Log Out</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App, true);

I am building my first app with AWS Amplify and React and I'm using withAuthenticator to force users to sign in. When I hit the sign out button it redirects back to the login page but if I refresh the page it logs back in and displays my app again, obviously, this isn't useful as I need it to pletely sign the user out of my app and remove all their data from the browser. What am I doing wrong? I've even made a button to trigger Auth.signOut() but I'm still getting the same issue where I just can't log out from my app.

I've even used the global sign out here but it's still signing back in when I refresh the page. https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js#sign-out

my code:

import React from 'react';
import logo from './SE_logo.jpg';
import './App.css';
import Amplify, { API, Auth } from 'aws-amplify';
import {withAuthenticator} from 'aws-amplify-react';
import '@aws-amplify/ui/dist/style.css';

async function onSignOutClick() {
  //await Auth.signOut()
  //    .then(data => console.log(data))
  //    .catch(err => console.log(err));
  console.log(Auth.signOut());
 }

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={onSignOutClick}>Log Out</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App, true);

• javascript
• reactjs
• aws-amplify

• Are you using some kind of localStorage or cookies to persist the user's authenticated state? – Bassem Commented May 15, 2020 at 15:05
• I'm not sure I've only just started using Amplify and Authentication so I've left everything to the Amplify framework so presumably, it's storing the access token somewhere so when I refresh the app it finds them, knows they are still valid and goes straight into the app rather than prompting login again. – Matt M Commented May 15, 2020 at 15:08

6 Answers 6

I've just discovered useAuthenticator hook which has signOut function. I'm sharing it in hope that it'll help somebody:

import React from 'react';
import logo from './SE_logo.jpg';
import './App.css';
import { withAuthenticator, useAuthenticator } from 'aws-amplify-react';
import '@aws-amplify/ui/dist/style.css';

function App() {
  const { signOut } = useAuthenticator()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={() => signOut()}>Log Out</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App, true);

It seems like there are two options:

Wrap your app in a <Authenticator.Provider> ponent then use this hook call

const { signOut } = useAuthenticator();

or... wrap your app in a <AmplifyProvider> ponent and import the Auth ponent

import { Auth } from 'aws-amplify';
...

Auth.signOut()

I haven't read enough of the documentation to know which is preferreed

You can try to redirect the user after logout like this

async function handleLogout() {
  await Auth.signOut();

  userHasAuthenticated(false);

  history.push("/login");
}

You can use this tutorial to set up the browser history and redirect the user: https://serverless-stack./chapters/redirect-on-login-and-logout.html

remove your localstorage data / cookies / ect or try this

async onSignOutClick() {
 await Auth.signOut()
     .then(data => console.log(data))
     .catch(err => console.log(err));
}

In angular you can do this....

signOut(){
    console.log('...signing out ....');
    Auth.signOut();
    this.router.navigate(['/login']);
  }

I fixed it by removing the following code from my Apmlify.configure section, not sure what it does but I was there in the AWS docs so I left it in mine. I tried to delete all cookies and local storage content and it broke my sign in and just kept ing up with no current user so I found that removing the code below was the fix for that and its fixed my not signing out issue too?

      cookieStorage: {
      // REQUIRED - Cookie domain (only required if cookieStorage is provided)
          domain: '.mydomain.co.uk',
      // OPTIONAL - Cookie path
          path: '/',
      // OPTIONAL - Cookie expiration in days
          expires: 365,
      // OPTIONAL - Cookie secure flag
      // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
          secure: true
      },