Auth.signOut dosent sign out as expected

user_10337560 0
Viewed 7756

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 completely 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);
aws-amplify reactjs javascript
5 Answers

In angular you can do this....

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

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);
user_9236420
user_50695050

remove your localstorage data / cookies / ect or try this 

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

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 coming 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
      },
user_103375600
Related