AWS Amplify: onStatusChange then render main page

Question

I am trying to render the main entry point of my application when an auth status change occurs but when I do try to go to the main entry point of my application I get a blank screen. I'm assuming I can't go to a main page if it isn't being called within the render function itself? If so, how do I render the main Page of my app when I established signIn?

index.js

class App extends Component {

  /*
  constructor(props) {
    super(props);
    this.state = {
        authState: null,
        authData: null
    }
}
*/
handleAuthStateChange(state) {
  alert(state)
  if (state === 'signedIn') { 
    alert('here');
    return ( // go To Entry point of app
      <ApolloProvider store={store} client={client}>
      <AppWithNavigationState/>
      </ApolloProvider>
    );
  }
}

    render() {
      //const { authState, authData } = this.state;
     // const signedIn = (authState === 'signedIn');


        return (
         <Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}>
        <Login/>
        </Authenticator>

      );
    }

}
export default App = codePush(App);

Login.js

export default class Login extends Component {


    render() {

       const { authState, onStateChange } = this.props;

       if (!['signIn', 'signedOut', 'signedUp'].includes(authState)) {
           alert('login')
        return null;
       }


        return (<View style={styles.container}>

            <View style={styles.backgroundContainer}>
            <Image source={images.icons.LoginImage} style={styles.backgroundImage} />
            </View>
            <View style={styles.overlay}>
            <Button iconLeft light rounded style={styles.facebookLoginButton}>
            <Icon style={styles.facebookIcon} name='logo-facebook' />
            <Text style={styles.facebookButtonText}>Login with Facebook</Text>
            </Button>
            <Button rounded bordered light style={styles.loginLaterButton}
            onPress={() => onStateChange('signedIn')}>
            <Text style={styles.buttonText}>Sign In Test</Text>
            </Button>


            </View>

            </View>

        );
      }
    }

score 3 · Answer 1 · answered Feb 14 '19 at 19:22

If you resolved it I hope it will help someone else.

I think the following is a better option than using 'onAuthStateChange':

from Amplify dox :

import { Auth } from 'aws-amplify';

Auth.currentAuthenticatedUser({
    bypassCache: false  // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
}).then(user => console.log(user))
.catch(err => console.log(err));

You can add your logic within '.then(user => ...' to add route to your protected pages. Also you can redirect to Login page from '.catch(err => '.

If you include above code within a function and call it from 'componentWillReceiveProps' it should be called every time auth status changes.

score 2 · Accepted Answer · answered Jan 28 '18 at 15:41

This is really about rendering and state (and not anything to do with AWS Amplify). First, set up state in your constructor:

constructor(props) { super(props); this.state = { authState: '' }; }

Then, your onAuthStateChange() becomes:

onAuthStateChange(newState) { if (newState === 'signedIn') { this.setState({ authState: newState }); } }

Finally, in your render() method, you adjust your rendering so that it does "the right thing" based on your auth state.

render() { if (this.state.authState === 'signedIn') { return (<ApolloProvider ...><MyApp/></ApolloProvider>); } else { return (<Authenticator .../>); } }

You can abstract this away with a HOC as well (the same way the withAuthenticator() HOC from AWS Amplify does it). Basically, the Authenticator gets displayed initially. Once the signedIn state is received, the internal component state is updated and that causes a re-render of the component with the rest of your app.

Thanks but how do you handle auth state when you restart the app? the state would get reset by calling this.setState in the initial constructor method for this class — john, Jan 31 '18 at 01:14
Several ways to do it. I would store the accessToken in a redux store and persist using redux-persist. On entry into the authenticator, check the expiry date of the accessToken - if not expired, then set state to signed in and register it. — Adrian Hall, Jan 31 '18 at 01:21

AWS Amplify: onStatusChange then render main page

index.js

Login.js

2 Answers2

Linked