Search code examples
androidreact-nativegoogle-chromesingle-sign-ondeep-linking

ERR_UNKNOWN_URL_SCHEME for Google only when 2-Step Verification is enabled in any React Native in-app browser

I am getting ERR_UNKNOWN_URL_SCHEME error in chrome on redirection in in-app browser for Federated authentication in React Native using deep-linking for callback URL. The issue appears only if 2-Step Verification is turned on in Google account. Following are the details of the issue and steps to reproduce it.

Platform Details

Platform: Android 10, 11, 12

Device type: Physical device

Issue appears in these Chrome browser versions:

  • Stable: 101.0.4951.61
  • Beta: 102.0.5005.58
  • Canary: 104.0.5072.0

The issue does NOT appear in Chrome browser version: 87.0.4280.141

Package version: react-native-inappbrowser-reborn version: ^3.6.3 Also tried on expo-web-browser version: 9.2.0

Steps required to trigger this issue

  1. Enable 2-Step Verification in your Google account and use the same device to get the confirmation screen as the device that you will use the React Native app on.
    • See the screenshot of the 2-Step Verification confirmation page for reference that should appears after entering the password to reproduce this issue:

  • Then this screen appears and seems like app is navigated away:

  1. Clear browser cookies for all time to forcefully clean browser session and logout of all Google Accounts in Chrome. To do this: Chrome > Settings > Privacy and security > Clear browsing data > Advanced > Set time range to All Time > Select all checkboxes > Clear data
  2. Use inAppbrowser.openAuth(...)/openAuthSessionAsync(...) to sign in using Google as identity provider
  3. As the account is not signed into chrome browser already, it will ask for email id and password, enter the credentials
  4. Then the 2-Step Verification page appears like in the screenshot above.
  5. Shortly after that, "Are you trying to sign in?" screen is displayed like in the screenshot above. Press "Yes, it's me" button. Then this screen goes away.
  6. In the in-app browser show this error: <your_scheme>: links are blocked with error code = ERR_UNKNOWN_URL_SCHEME. See this screenshot:

In AndroidManifest.xml, this is how my deep linking URL (let's say "my_scheme") is configured:

<intent-filter android:label="filter_react_native">
   <action android:name="android.intent.action.VIEW"/>
   <category android:name="android.intent.category.DEFAULT"/>
   <category android:name="android.intent.category.BROWSABLE"/>
   <data android:scheme="my_scheme"/>
</intent-filter>

This is how I call the openAuth function from react-native-inappbrowser-reborn

const { type, url: newUrl } = await InAppBrowser.openAuth(
  url,
  redirectUrl,
  {
    showInRecents: true, // browser dismisses when set to false
    forceCloseOnRedirection: false, // same issue when set to true 
    showTitle: false,
    enableUrlBarHiding: true,
    enableDefaultShare: false,
    ephemeralWebSession: false,
  }
);

And for expo-web-browser module, here is how I have called openAuthSessionAsync:

const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(
  url,
  redirectUrl,
  {
    showInRecents: true,
    toolbarColor: Colors.primaryVariant,
    createTask: false,
  },
);

I tried to use other means of 2-Step verification such as SMS/Authenticator app code. In both cases, even if I put the app in background to either open my SMS app or Authenticator app(Google Authenticator) and then again switch back to the React Native app, in-app browser redirects to the React-Native app just fine and I don't get this ERR_UNKNOWN_URL_SCEME issue.

This issue exists in both the in-app browser modules (expo-web-browser as well as react-native-inappbrowser-reborn).

Somehow this Google authentication overlay to confirm the identity breaks redirection to React-Native app using the deeplinked URL. The issue does not appear when 2-Step Verification using the Device is already responded using Yes or it is not configured at all and the app signs in seamlessly.

Any help or pointers to solution would be appreciated. Let me know in the comments if more details are required.

Solution

  • I noticed that this issue has been fixed in the newer versions of Android System Webview and corresponding versions of Chrome-based browsers.

    To ensure the user is using the latest version of webview: programmatically check the package name of the default webview app installed in Android and then check it's version. If the version is older than 105.x(a fairly new version on which the issue seems to be fixed), show a dialog box informing the user to update the webview app along with a button to redirect to the Google Play Store page of that webview package. This would require you to write a small native module code for Android.

    But I believe this may not be required in 2023, now that almost all users would have upgraded to the latest version, but still, the above check is good to have just in case a similar issue originating from the webview pops-up in the future.