Google login in react native requires two login attempts to work only on production ANDROID

gokaten-token commented 1 month ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

``` System: OS: macOS 13.4 CPU: (8) arm64 Apple M1 Memory: 79.17 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.8.0 - ~/.nodebrew/current/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 10.1.0 - ~/.nodebrew/current/bin/npm Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 125.0.6422.77 Safari: 16.5 npmGlobalPackages: @aws-amplify/cli: 12.8.2 @types/node: 20.12.7 corepack: 0.20.0 ios-deploy: 1.12.2 npm: 10.1.0 react-native-cli: 2.0.1 react-native: 0.73.4 ts-node: 10.9.2 typescript: 5.4.5 ```

Describe the bug

This is a similar issue as #12926, but we still can not find a solution. Google login works fine in debug mode, but requires two attempts to login in release bundle.

After login button tapped the first time, a browser tab opens and after authorization, redirects to the app. However, the Alert in Hub.listen does not show up, which indicates either the listener is not properly setup or no event is triggered. After login button tapped the second time, a browser tab opens and after authorization, redirects to the app. The Alert in Hub.listen shows up and sign in is completed.

Expected behavior

After the first redirect back to the app, Alert should show up and sigin in completed.

Reproduction steps

Generate a signed bundle through android studio and install on device (we reproduced this issue on Pixel3 and Redmi Note 10T)
Attempt to sign in with Google for the first time.
Observe that the authentication process doesn't succeed on the first attempt.
Retry the sign-in by clicking again.
Confirm that the authentication works correctly on the second attempt.

Code Snippet

Amplify.configure(amplifyconfig);

export const App = () => {
  useEffect(() => {
    const unsubscribe = Hub.listen('auth', async ({payload}) => {
      Alert.alert('success', payload.event);
    });
    return unsubscribe;
  }, []);

  return (
    <SafeAreaProvider>
      <ThemeProvider theme={theme}>
        <GestureHandlerRootView style={{flex: 1}}>
          <LoginScreen />
        </GestureHandlerRootView>
      </ThemeProvider>
    </SafeAreaProvider>
  );
};

LoginScreen only contains a button which triggers signInWithRedirect({provider: 'Google'});

Log output

``` // Put your logs below this line ```

aws-exports.js

{
  "aws_project_region": "ap-northeast-1",
  "aws_cognito_region": "ap-northeast-1",
  "aws_user_pools_id": "ap-northeast-1_xxxxxx",
  "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxx",
  "oauth": {
    "domain": "xxxxxxxxx.ap-northeast-1.amazoncognito.com",
    "scope": ["email", "openid", "profile"],
    "redirectSignIn": "myapp://",
    "redirectSignOut": "myapp://",
    "responseType": "code"
  },
  "federationTarget": "COGNITO_USER_POOLS",
  "aws_cognito_username_attributes": ["EMAIL"],
  "aws_cognito_social_providers": ["GOOGLE"],
  "aws_cognito_signup_attributes": ["EMAIL"],
  "aws_cognito_mfa_configuration": "OFF",
  "aws_cognito_mfa_types": [],
  "aws_cognito_password_protection_settings": {
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": [
      "REQUIRES_LOWERCASE",
      "REQUIRES_UPPERCASE",
      "REQUIRES_NUMBERS",
      "REQUIRES_SYMBOLS"
    ]
  },
  "aws_cognito_verification_mechanisms": ["EMAIL"]
}

Manual configuration

No response

Additional configuration

No response

Mobile Device

Pixel3, Redmi Note

Mobile Operating System

Android 13

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

cwomack commented 1 month ago

Hello, @gokaten-token 👋. Can you share your full package.json? And are you seeing this on any specific Android device or any emulator/physical device?

gokaten-token commented 4 weeks ago

@cwomack

Can you share your full package.json?

Sure.

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android --mode=DevelopmentDebug",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@aws-amplify/react-native": "^1.1.1",
    "@aws-amplify/rtn-web-browser": "^1.0.30",
    "@gorhom/bottom-sheet": "^4",
    "@react-native-async-storage/async-storage": "^1.22.3",
    "@react-native-community/geolocation": "^3.2.0",
    "@react-native-community/netinfo": "^11.3.1",
    "@react-native-firebase/analytics": "^19.1.2",
    "@react-native-firebase/app": "^19.1.2",
    "@react-native-firebase/crashlytics": "^19.1.2",
    "@react-navigation/bottom-tabs": "^6.5.16",
    "@react-navigation/native": "^6.1.14",
    "@react-navigation/native-stack": "^6.9.22",
    "@reduxjs/toolkit": "^2.2.1",
    "@rneui/base": "^4.0.0-rc.8",
    "@rneui/themed": "^4.0.0-rc.8",
    "aws-amplify": "^6.3.4",
    "axios": "^1.6.8",
    "japanmesh": "^1.1.5",
    "moment": "^2.30.1",
    "react": "18.2.0",
    "react-native": "0.73.5",
    "react-native-background-timer": "^2.4.1",
    "react-native-config": "^1.5.1",
    "react-native-exif": "^0.5.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-picker": "^7.1.0",
    "react-native-image-viewing": "^0.2.2",
    "react-native-inappbrowser-reborn": "^3.7.0",
    "react-native-maps": "^1.15.1",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "^6.3.0",
    "react-native-reanimated": "3.6.1",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-scalable-image": "^1.1.0",
    "react-native-screens": "^3.29.0",
    "react-native-svg": "^15.0.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.0.3",
    "react-redux": "^9.1.0",
    "redux-persist": "^6.0.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-native-background-timer": "^2.0.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

are you seeing this on any specific Android device or any emulator/physical device?

We reproduced this issue on both Redmi Note 10T and Pixel 3

gokaten-token commented 4 weeks ago

We confirmed this issue does not occur on v5, only on v6.

cwomack commented 3 weeks ago

@gokaten-token, thanks for that additional context on v5 vs. v6. In the v6 instance, do you see additional query parameters in the URL when being redirected back to your app? And just to confirm, you're not experiencing this in iOS at all (on either version) correct?

gokaten-token commented 3 weeks ago

@cwomack

do you see additional query parameters in the URL when being redirected back to your app

Yes, both the first time and the second time when login button tapped.

And just to confirm, you're not experiencing this in iOS at all (on either version) correct?

We did not confirm on iOS as we are only targeting Android.

OtayNacef commented 1 week ago

@gokaten-token , For now, the only workaround is:

try { await signInWithRedirect(signInInput); // TODO: TEMP FIX ANDROID BUG - Amplify first signin redirect if (IS_ANDROID && !DEV) { setTimeout(async () => { await signInWithRedirect(signInInput); }, 1000); } } catch (error) { // Handle the error }

aws-amplify / amplify-js