iOS: UI Freezes on Canceling Sign-In via In-App Browser with Amplify

[canrollas]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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

Amplify CLI

Environment information

  System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M1
    Memory: 75.36 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.1.2
  npmPackages:
    @aws-amplify/auth: ^6.0.23 => 6.0.23 
    @aws-amplify/auth/cognito:  undefined ()
    @aws-amplify/auth/cognito/server:  undefined ()
    @aws-amplify/auth/enable-oauth-listener:  undefined ()
    @aws-amplify/auth/server:  undefined ()
    @aws-amplify/core: ^6.0.23 => 6.0.23 
    @aws-amplify/core/internals/adapter-core:  undefined ()
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/cognitoIdentity:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-amplify/core/internals/providers/pinpoint:  undefined ()
    @aws-amplify/core/internals/utils:  undefined ()
    @aws-amplify/core/server:  undefined ()
    @aws-amplify/react-native: ^1.0.24 => 1.0.24 
    @aws-amplify/rtn-web-browser: ^1.0.24 => 1.0.24 
    @babel/core: ^7.24.3 => 7.24.3 
    @expo/vector-icons: ^14.0.0 => 14.0.0 
    @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1 
    @react-native-community/masked-view: ^0.1.11 => 0.1.11 
    @react-native-community/netinfo: ^11.3.1 => 11.3.1 
    @react-native-picker/picker: 2.7.2 => 2.7.2 
    @react-navigation/bottom-tabs: ^6.5.20 => 6.5.20 
    @react-navigation/native: ^6.1.17 => 6.1.17 
    @react-navigation/native-stack: ^6.9.26 => 6.9.26 
    @rneui/base: ^4.0.0-rc.8 => 4.0.0-rc.8 
    @rneui/themed: ^4.0.0-rc.8 => 4.0.0-rc.8 
    @rnmapbox/maps: ^10.1.19 => 10.1.19 
    @types/react-native-table-component: ^1.2.8 => 1.2.8 
    HelloWorld:  0.0.1 
    aws-amplify: ^6.0.23 => 6.0.23 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    eas: ^0.1.0 => 0.1.0 
    expo: ~50.0.14 => 50.0.14 
    expo-apple-authentication: ~6.3.0 => 6.3.0 
    expo-build-properties: ~0.11.1 => 0.11.1 
    expo-constants: ~15.4.5 => 15.4.5 
    expo-dev-client: ~3.3.11 => 3.3.11 
    expo-device: ~5.9.3 => 5.9.3 
    expo-font: ^11.10.3 => 11.10.3 
    expo-location: ^16.5.5 => 16.5.5 
    expo-notifications: ~0.27.6 => 0.27.6 
    expo-secure-store: ^12.8.1 => 12.8.1 
    expo-splash-screen: ^0.26.4 => 0.26.4 
    expo-status-bar: ~1.11.1 => 1.11.1 
    punycode: ^2.3.1 => 2.3.1 
    react: 18.2.0 => 18.2.0 (16.13.1)
    react-native: 0.73.6 => 0.73.6 
    react-native-animated-weather-icons: ^1.0.4 => 1.0.4 
    react-native-charts-wrapper: ^0.6.0 => 0.6.0 
    react-native-device-info: ^10.13.1 => 10.13.1 
    react-native-gesture-handler: ^2.16.0 => 2.16.0 
    react-native-get-random-values: ^1.11.0 => 1.11.0 
    react-native-picker-select: ^9.0.1 => 9.0.1 
    react-native-reanimated: ^3.8.1 => 3.8.1 
    react-native-reanimated-table: ^0.0.2 => 0.0.2 
    react-native-safe-area-context: ^4.9.0 => 4.9.0 
    react-native-screens: ^3.30.1 => 3.30.1 
    react-native-svg: ^15.1.0 => 15.1.0 
    react-native-svg-transformer: ^1.3.0 => 1.3.0 
    react-native-table-component: ^1.2.2 => 1.2.2 
    react-native-vector-icons: ^10.0.3 => 10.0.3 
    typescript: ^5.4.3 => 5.4.3 
    weather-icons-react: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.1
    @react-native-community/cli: 12.3.0
    eas-cli: 7.6.0
    metro-core: 0.80.2
    metro: 0.80.2
    npm: 10.2.4

Describe the bug

I've encountered a UI freeze issue on the iOS platform within my application when a user attempts to sign in using an in-app browser (presumably through AWS Amplify's authentication flow). Specifically, if the user decides to cancel the sign-in process, all UI elements related to Amplify (e.g., sign-in buttons) become unresponsive. The user is unable to interact with these elements again unless the app is completely removed and reinstalled.

Expected behavior

The user should be able to cancel the sign-in process and interact with the app normally afterward, including the ability to initiate the sign-in process again if desired.

Reproduction steps

1. Initiate the sign-in process, which opens an in-app browser for authentication.
2. Press the 'Cancel' button or attempt to close the in-app browser without completing the sign-in process.
3. Try to interact with any Amplify-related buttons or UI elements.

Code Snippet

<ITCoreButton color={"#248DC2"} textDecorationColor={"white"} text="Login with Google"
                          iconText={"logo-google"}
                          onPress={() => {
                              signInWithRedirect({provider: 'Google'}).then((data) => {
                                  // control that hub is confirmed and redirect
                              }).catch((error) => {
                                  console.log("Error red", error);
                                  alert(error.message);
                              });
                          }}/>

Log output

There are no logs to debug. This is the main problem of the statement.

[cwomack]

Hello, @canrollas and sorry to hear you're experiencing this issue. Couple of questions to clarify to see if we can reproduce this issue on our side and root cause the problem.

• Is this reproducible for every user sign in attempt that follows the three reproduction steps you outlined above, or is this more intermittent?
• Did this happen only after a recent upgrade of your version or migration from v5? Or is this a new app that you started with v6.0.23 of Amplify?
• Can you share your full package.json just to make sure we aren't missing any dependencies that might impact this?
• Is this happening on physical devices or just emulators when testing it locally?

[canrollas]

Hello @cwomack thanks for your reply,
Reproducibility: The issue occurs for every user sign-in attempt that follows the three outlined reproduction steps, making it consistently reproducible. After these steps followed app is totally frozen and I have to uninstall it to fix it from phone/simulator.
Version Information: This issue started occurring in a new app that was initiated with v6.0.23 of Amplify. It was not a result of a recent upgrade or migration from an older version.
Device Specificity: The problem is observed on both physical iOS devices and iOS emulators. It does not occur on Android devices, whether emulators or physical devices.
This is my package.js on my project :

{
  "name": "sw_5100_sentagroandroid",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@aws-amplify/auth": "^6.0.23",
    "@aws-amplify/core": "^6.0.23",
    "@aws-amplify/react-native": "^1.0.24",
    "@aws-amplify/rtn-web-browser": "^1.0.24",
    "@aws-sdk/client-cognito-identity-provider": "^3.540.0",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "9.3.10",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.8",
    "@rnmapbox/maps": "^10.1.19",
    "aws-amplify": "^6.0.23",
    "eas": "^0.1.0",
    "expo": "^49.0.23",
    "expo-apple-authentication": "~6.1.0",
    "expo-auth-session": "^5.4.0",
    "expo-build-properties": "~0.8.3",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.13",
    "expo-device": "~5.4.0",
    "expo-font": "~11.4.0",
    "expo-location": "~16.1.0",
    "expo-notifications": "~0.20.1",
    "expo-secure-store": "~12.3.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-web-browser": "~12.3.2",
    "punycode": "^2.3.1",
    "react": "18.2.0",
    "react-native": "0.72.10",
    "react-native-animated-weather-icons": "^1.0.4",
    "react-native-charts-wrapper": "^0.6.0",
    "react-native-device-info": "^10.13.1",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-get-random-values": "~1.9.0",
    "react-native-picker-select": "^9.0.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-table": "^0.0.2",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^10.0.3",
    "react-native-webview": "^13.8.4",
    "typescript": "^5.4.3",
    "weather-icons-react": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.24.3",
    "@types/react-native-table-component": "^1.2.8",
    "react-native-svg-transformer": "^1.3.0"
  },
  "private": true
}

I believe that problem is on this file and lines : packages/auth/src/providers/cognito/utils/oauth/completeOAuthFlow.ts
When the user does not go trough to the getting code param from URL provided from cognito it still waits : // if code or state is not presented in the redirect url, most likely
// that the end user cancelled the inflight oauth flow by:
// 1. clicking the back button of browser
// 2. closing the provider hosted UI page and coming back to the app
if (!code || !state) {
throw createOAuthError('User cancelled OAuth flow.');
}
If use clicks cancel on ios this is not triggered to detect by hub and It blocks the other actions of the amplify libraries.

Moreover for developer team I have a suggestion to fix in total : In react native apps you can create an env that is basically aligned around the endpoints of cognito to accept issued tokens from the Oauth clients such as described in the StackOverflow post but currently if you fix browser issue that is fair enough too : https://stackoverflow.com/questions/78242578/integrating-sign-in-with-apple-into-react-native-app-with-aws-cognito-authentica

[canrollas]

Hello @cwomack When I check your source code : oAuthStore.storeOAuthInFlight(false); Inside of the signInWithRedirect.ts when I change it to false code started to work. SO I am creating a pull request to fix it platform based :

if (Platform.OS === 'ios') {
	oAuthStore.storeOAuthInFlight(false); // This is the first step of the OAuth flow so we are not in flight
} else {
	oAuthStore.storeOAuthInFlight(true); // This is the first step of the OAuth flow so we are not in flight
}

[Samaritan1011001]

@canrollas, the fix has been released in the latest version (6.0.26), please validate it address the concern. Thank you.