amplify-js: Amplify React Native auth.signout() does not return to Sign In page when called from App component

@markmckim - I simply do this in my App component to load the sign in component again. App is passed to the withAuthenticator.

Auth.signOut() .then(() => { this.props.onStateChange(‘signedOut’, null); }) .catch(err => { console.log('err: ', err) })

When using the Auth.signOut from within the withAuthenticator it will not sign out because it is only updating the session locally in AsyncStorage. You need to have a way to rerender the actual withAuthenticator component.

You can accomplish this with something like this:

// main component (index.js or something)
import MainApp from './App.js'
class AuthWrapper extends React.Component {
  rerender = () => this.forceUpdate()
  render() {
    return <MainApp rerender={this.rerender} />
  }
}

// component that is being wrapped with withAuthenticator component
class App extends Component {
  signOut = async () => {
    await Auth.signOut()
    this.props.rerender()
  }
  render() {
    return (
      <div style={styles.container}>
        <p style={styles.welcome}>Hello World</p>
      </div>
    );
  }
}

// new default export for withAuthenticator (this is to receive props & force the rerender)
export default props =>  {
  const AppComponent = withAuthenticator(App)
  return <AppComponent {...props} />
}

Let me know if this works @ejdigby @markmckim

Just implemented this today and can confirm it works.

Thanks @dabit3

Hey I did a mix of @dabit3 solutions because I needed my Auth.signOut() in an other component. Maybe it can work for you as well @anirudh-goyal

Navbar.jsx

import { Auth } from "aws-amplify";

export default function SimpleMenu(props) {
 return (
  <div>
   <button onClick={() => Auth.signOut()}>Sign out</button>
  </div
}

App.js

import Navbar from "./components/navbar.jsx";
import Amplify from 'aws-amplify';
import { Authenticator} from "aws-amplify-react";

class App extends React.Component {
  constructor(props) {
    super(props);
  };

componentDidMount() {
    Hub.listen('auth', (authData) => {
      console.log('authData: ', authData)
      if (authData.payload.event === 'signOut') {
        this.props.onStateChange('signedOut', null);
      }
    })
  }

render() {
    return (
      <div>
        <Navbar ></Navbar>
      </div>
    );
  }
}

class AppWithAuth extends React.Component {

  render() {
    return (
      <Authenticator>
        <App />
      </Authenticator>
    );
  }
}

export default AppWithAuth;

@et304383 Another way to handle this would be to use the Hub class & listen for auth changes.

import { Hub } from 'aws-amplify'

componentDidMount() {
  Hub.listen('auth', function(authData) {
    console.log('authData: ', authData)
    if (authData.payload.event === 'signOut') {
      // rerender or do something here in the hamburger menu
    }
  })
}

https://aws-amplify.github.io/docs/js/hub#listening-for-messages

@markmckim so if I am understanding correctly, is it something like:

class App extends Component {
     signOut() {
           const { onStateChange } = this.props;
           Auth.signOut().then(() => {
                    onStateChange('signedOut');
           });
     }
     
     render() {
         return (
               <Button onPress={this.signOut} text='sign out'/>
        )
     }
}

export default withAuthenticator(App);

@et304383 sorry you’re having trouble. I’ve put together a gist at https://gist.github.com/dabit3/6c4f0a06b5e39fd53567a4a521143efa

import React from 'react'
import { View, Text } from 'react-native'
import { withAuthenticator } from 'aws-amplify-react-native'

function App(props) {
  function signOut() {
    Auth.signOut()
      .then(() => {
        props.onStateChange('signedOut', null);
      })
      .catch(err => {
        console.log('err: ', err)
      })
  }
  
  return (
    <View>
      <Text>Hello World</Text>
      <Text onPress={signOut}>Sign Out</Text>
    </View>
  )
}

export default withAuthenticator(App)

Have a look & let me know if that helps out. It should be a full working example.

Maybe this commit caused it: https://github.com/aws-amplify/amplify-js/commit/8352bdb

Specifically the changes around line 90