Amplify-js: Authenticator authState is not updated on successful Auth.SignIn request

[mchilds04]

Describe the bug
I'm using the aws-amplify-react-native Authenticator's authState prop to manage showing and hiding my signin/signup screen s and my main screen. On a successful sign in request the authState is not updated and as a result the app just sits on the sign in screen until I reload the app. Once the app is reloaded this triggers the authState to transition from "loading" to "signedIn" as expected.

To Reproduce
Steps to reproduce the behavior:

1. Download the sample project from here and run it.
2. On the sign in screen (the username and password should be prepopulated) click the sign in button.
3. Observe the black banner at the bottom of the app that prints out the current authState

Expected behavior
On a successful sign in request I expect the authState to be updated to "signedIn" and the signin screen to be hidden and the main app screen to be displayed.

Code Snippet

const AppContainer = ({ authData, authState }) => {

  const AuthNavigationWithProps = () =>
    <AuthNavigation authState={ authState } />

  return (
    <React.Fragment>
      <Stack.Navigator>
        {
          authState === "signedIn" ?
            <Stack.Screen name="Root" component={ BottomTabNavigator } /> :
            <Stack.Screen
              name="Auth"
              component={ AuthNavigationWithProps }
              options={ { headerShown: false } }
            />
        }
      </Stack.Navigator>
      <View style={ { backgroundColor: "#000", padding: 10 } }>
        <Text style={ { color: "white", fontSize: 16, textAlign: "center" } }>
          AUTH STATE: { authState }
        </Text>
      </View>
    </React.Fragment>
  );
};

export default function App(props) {
  return (
    <View style={ styles.container }>
      <NavigationContainer linking={ LinkingConfiguration }>
        <Authenticator hideDefault={ true } container={ false }>
          <AppContainer />
        </Authenticator>
      </NavigationContainer>
    </View>
  );
}

Video
View video here

What is Configured?

Environment

System:

OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)

CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz

Memory: 8.54 GB / 15.44 GB

Container: Yes

Shell: 5.8 - /usr/bin/zsh

Binaries:

Node: 12.18.1 - /usr/bin/node

npm: 6.14.5 - /usr/bin/npm

Browsers:

Firefox: 77.0.1

npmPackages:

@babel/core: ^7.8.6 => 7.10.2

@expo/vector-icons: ~10.0.6 => 10.0.6

@react-native-community/masked-view: 0.1.6 => 0.1.6

@react-native-community/netinfo: 5.9.2 => 5.9.2

@react-navigation/bottom-tabs: ^5.3.1 => 5.5.2

@react-navigation/native: ^5.2.1 => 5.5.1

@react-navigation/stack: ^5.2.16 => 5.5.1

aws-amplify: ^3.0.17 => 3.0.17

aws-amplify-react: ^4.1.16 => 4.1.16

aws-amplify-react-native: ^4.2.0 => 4.2.0

babel-preset-expo: ~8.1.0 => 8.1.0

expo: ~37.0.9 => 37.0.12

expo-asset: ~8.1.0 => 8.1.5

expo-constants: ~9.0.0 => 9.0.0

expo-font: ~8.1.0 => 8.1.1

expo-linking: ^1.0.1 => 1.0.1

expo-splash-screen: ^0.2.3 => 0.2.3

expo-web-browser: ~8.2.0 => 8.2.1

jest-expo: ~37.0.0 => 37.0.0

react: ~16.9.0 => 16.9.0

react-dom: ~16.9.0 => 16.9.0

react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4

react-native-gesture-handler: ~1.6.0 => 1.6.1

react-native-safe-area-context: 0.7.3 => 0.7.3

react-native-screens: ~2.2.0 => 2.2.0

react-native-web: ~0.11.7 => 0.11.7

npmGlobalPackages:

@aws-amplify/cli: 4.21.1

create-react-app: 3.4.1

eslint: 6.8.0

expo-cli: 3.20.3

Smartphone (please complete the following information):

• Device: Google Pixel
• OS: Android 11

[sammartinez]

@mchilds04 The fix should now be in unstable, can you test the unstable version and validate it resolves your issue? Thanks ahead of time.

[mchilds04]

@mchilds04 The fix should now be in unstable, can you test the unstable version and validate it resolves your issue? Thanks ahead of time.

Sorry @sammartinez I'm a little new to this is unstable a branch, a tag, or something else?

[cedricgrothues]

@mchilds04 – unstable refers to the package version. You can add it to your project using either yarn add aws-amplify-react-native@unstable or npm i aws-amplify-react-native@unstable.

[mchilds04]

@cedricgrothues @sammartinez thanks for all of the help. I just tested the fix and now everything works as expected.