useAuthenticator is making me unauthenticated.

[MrFarhan]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

Authenticator

How is your app built?

npx create-react-native-app

What browsers are you seeing the problem on?

Android (React Native)

Which region are you seeing the problem in?

No response

Please describe your bug.

useAuthenticator is making me unauthenticated, when i close my react native app.

This happens randomly, some times it requires 2 to 3 times close then it makes my unauthenticated, and sometimes it does after 6 to 7 times reopening the app.

Below is the code:

import React from 'react';

import Navigations from './src';
import { Authenticator } from '@aws-amplify/ui-react-native';
import awsconfig from './aws-exports';
import { Amplify } from 'aws-amplify';
import Toast from 'react-native-toast-message';
import store from './src/store/store';
import { Provider } from 'react-redux';

Amplify.configure(awsconfig);

function App() {
  console.log("app")
  return (
    <Authenticator.Provider>
      <Provider store={store}>
        <Navigations />
        <Toast visibilityTime={4000} topOffset={60} />
      </Provider>
    </Authenticator.Provider>
  );
}

export default App;

Navigation file:

export default function Navigations() {
  console.log("navigation")

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          contentStyle: { backgroundColor: '#fff' },
          cardStyle: { backgroundColor: '#fff' },
        }}>
        <Stack.Screen name="Splash-screen" component={SplashScreen} />
        <Stack.Screen name="Onboarding" component={OnboardingScreen} />
        <Stack.Screen name="Main" component={BottomNavigation} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Splash screen:

import LinearGradient from 'react-native-linear-gradient';
import { Styles } from './Style';
import { colors } from '../../Themes';
import React, { useEffect } from 'react';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useAuthenticator } from '@aws-amplify/ui-react-native';
import { useDispatch, useSelector } from 'react-redux';
import { getCurrentUserData, getUserLocation } from '../../service/auth';
import { saveUserDetails } from '../../store/slice/userSlice';
import { ActivityIndicator, View } from 'react-native';
import { saveLocation } from '../../store/slice/locationSlice';

const SplashScreen = () => {
  const { reset } = useNavigation();
  const { authStatus } = useAuthenticator(context => [context.route]);
  const isLoggedIn = authStatus === 'authenticated';

  console.log("splash", authStatus)
  const isFocused = useIsFocused();
  const dispatch = useDispatch()

  const fetchLoc = async () => {
    const { response } = await getUserLocation();

    dispatch(saveLocation({
      country: response?.country,
      currencyFormated: response?.price_unite,
      currency: response?.currency,
      currencyCode: response?.currency_code
    }));

    if (isLoggedIn) {
      console.log("isLoggedIn", isLoggedIn, authStatus)
      const { user, success } = await getCurrentUserData();
      if (success) {
        console.log("isLoggedIn", isLoggedIn, "user", user)
        dispatch(saveUserDetails(user))
      }
    }
  };

  const checkAuth = async () => {
    const isAppFirstLaunched = await AsyncStorage.getItem('isAppFirstLaunched');
    await fetchLoc()
    if (authStatus !== "configuring") {
      reset({
        index: 0,
        routes: [
          {
            name:
              isLoggedIn
                ? 'Main'
                : isAppFirstLaunched == 1
                  ? 'Sign-in'
                  : 'Onboarding'
          },
        ],
      });
    }
  };
  useEffect(() => {
    checkAuth();
  }, [isFocused, authStatus]);


  return (
    <LinearGradient
      colors={[colors.primary, colors.primary, colors.gray]}
      style={Styles.linearGradient}
    >
      <View style={{ flex: 1, justifyContent: 'center', }}>
        <ActivityIndicator size={55} />
      </View>
    </LinearGradient>
  );
};
export default SplashScreen;

Also the access token expiry time is 1 day.

What's the expected behaviour?

It must not make me unauthenticated...

Help us reproduce the bug!

Use my provided code, open the app, and close it a few times.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[timngyn]

👋 Hi @MrFarhan, I saw that npx create-react-native-app is deprecated. Have you tried setting up your app withthe react native CLI or Expo instead?

Docs for react native cli: https://reactnative.dev/docs/getting-started-without-a-framework

Docs for Expo: https://reactnative.dev/docs/environment-setup#start-a-new-react-native-project-with-expo

[MrFarhan]

yes, i am using the latest react native cli.

Below is my react native version:

"react-native": "0.73.7",

[timngyn]

Got it, thanks @MrFarhan. What version of Amplify are you using? If possible, could you copy and paste your package.json?

[MrFarhan]

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "reactNativePermissionsIOS": [
    "Camera",
    "MediaLibrary",
    "Microphone",
    "PhotoLibrary",
    "PhotoLibraryAddOnly"
  ],
  "dependencies": {
    "@aws-amplify/react-native": "^1.1.1",
    "@aws-amplify/ui-react-native": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/datetimepicker": "^8.1.1",
    "@react-native-community/netinfo": "^11.3.2",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.2.5",
    "@shopify/flash-list": "^1.6.4",
    "accordion-collapse-react-native": "^1.1.1",
    "aws-amplify": "^6.3.4",
    "axios": "^1.7.2",
    "formik": "^2.4.6",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.30.1",
    "react": "18.2.0",
    "react-native": "0.73.7",
    "react-native-actions-sheet": "^0.9.6",
    "react-native-camera": "^4.2.1",
    "react-native-dotenv": "^3.4.11",
    "react-native-element-dropdown": "^2.12.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-crop-picker": "^0.40.3",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-permissions": "^4.1.5",
    "react-native-qrcode-scanner": "^1.5.5",
    "react-native-ratings": "^8.1.0",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.30.1",
    "react-native-toast-message": "^2.2.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-webview": "^13.10.4",
    "react-redux": "^9.1.2",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[timngyn]

Hi @MrFarhan, could please provide a minimum reproducible repository or setup that I can use to debug the issue you are experiencing? This will help me identify the problem more efficiently. Thank you!

I tried to get your example code working, but had to remove a lot of the code for the app to work and was not able to get the bug to reproduce

[MrFarhan]

Hi @timngyn , here you can find the minimal working code with the auth issue https://github.com/MrFarhan/General-repo-for-testing/tree/amplify-authenticator-issue.

To run this you need to add your aws exports file at the root of this project.

Further you can also have a look on below video for further reference.

[MrFarhan]

Screen.Recording.2024-07-16.at.11.11.56.PM.mov

[jacoblogan]

Thanks @MrFarhan for your minimal working code. I'm able to run the repo but am having trouble reproducing the issue. Are there any additional details or configuration that might be needed to reproduce this issue? Which device are you using to test? Is the issue isolated to specific accounts?

Screen.Recording.2024-07-18.at.12.17.04.PM.mov

[MrFarhan]

Hi @jacoblogan , I don't understand what should i provide you, i have given you the repo, and showed you the issue with this specific code on the simulator...

[jacoblogan]

@MrFarhan when I run the code locally I'm not able to reproduce the issue, can you provide the device definition you are using in the simulator as well as your aws-exports (minus any sensitive information) so that I can better align my local reproduction to yours.

[reesscot]

@MrFarhan Are you still experiencing this issue? We haven't been able to reproduce it. Are you able to share your aws_exports / amplify_outputs file with sensitive information redacted?