Skip to content

rtn-web-browser does not open browser on Chromebook #14459

Open
@caroldinh

Description

@caroldinh

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify CLI

Environment information

  System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
    Memory: 3.00 GB / 15.69 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (135.0.3179.66)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @aws-amplify/cli: ^12.13.0 => 12.14.4 
    @aws-amplify/core: ^6.10.3 => 6.10.5 
    @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.1.7 => 1.1.7 
    @aws-amplify/rtn-web-browser: ^1.1.1 => 1.1.1 
    @aws-amplify/ui-react-native: ^2.4.4 => 2.4.4 
    @babel/core: ^7.26.9 => 7.26.10
    @babel/preset-env: ^7.25.3 => 7.26.9
    @babel/runtime: ^7.26.9 => 7.26.10
    @binary-files/structjs: ^1.2.3 => 1.2.3
    @logrocket/react-native: ^1.44.0 => 1.48.2
    @react-native-async-storage/async-storage: ^2.1.2 => 2.1.2
    @react-native-clipboard/clipboard: ^1.16.0 => 1.16.2
    @react-native-community/cli: 15.0.1 => 15.0.1
    @react-native-community/cli-platform-android: 15.0.1 => 15.0.1
    @react-native-community/datetimepicker: ^8.3.0 => 8.3.0
    @react-native-community/geolocation: ^3.4.0 => 3.4.0
    @react-native-community/netinfo: ^11.4.1 => 11.4.1
    @react-native/babel-preset: 0.78.1 => 0.78.1 (0.76.7)
    @react-native/eslint-config: 0.78.1 => 0.78.1
    @react-native/gradle-plugin: ^0.78.0 => 0.78.1
    @react-native/metro-config: ^0.78.0 => 0.78.1
    @react-native/typescript-config: 0.78.1 => 0.78.1
    @react-navigation/native: ^7.0.15 => 7.0.17
    @react-navigation/native-stack: ^7.2.1 => 7.3.1
    @sayem314/react-native-keep-awake: ^1.2.4 => 1.3.0
    @types/formatcoords: ^1.1.2 => 1.1.2
    @types/jest: ^29.5.13 => 29.5.14
    @types/lodash-es: ^4.17.12 => 4.17.12
    @types/qs: ^6.9.16 => 6.9.18
    @types/react: ^19.0.0 => 19.0.12
    @types/react-test-renderer: ^19.0.0 => 19.0.0
    android: ^0.0.8 => 0.0.8
    aws-amplify: ^6.13.5 => 6.13.5
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/adapter-core/internals:  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/internals:  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 ()
    axios: ^1.8.2 => 1.8.4
    babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1)
    eslint: ^8.19.0 => 8.57.1
    example:  0.0.1
    formatcoords: ^1.1.3 => 1.1.3
    jest: ^29.2.1 => 29.7.0
    lodash-es: ^4.17.21 => 4.17.21
    moment: ^2.30.1 => 2.30.1
    qs: ^6.13.0 => 6.14.0
    react: 19.0.0 => 19.0.0
    react-native: ^0.78.1 => 0.78.1
    react-native-asset: ^2.1.1 => 2.1.1
    react-native-ble-manager: ^11.5.6 => 11.6.0
    react-native-ble-plx: ^3.2.1 => 3.5.0
    react-native-check-version: ^1.3.0 => 1.3.0
    react-native-countdown-circle-timer: ^3.2.1 => 3.2.1
    react-native-device-info: ^13.2.0 => 13.2.0
    react-native-foreground-service-update: ^3.1.0 => 3.1.0
    react-native-fs: ^2.18.0 => 2.20.0
    react-native-geolocation-service: ^5.3.1 => 5.3.1
    react-native-gesture-handler: ^2.24.0 => 2.24.0
    react-native-get-random-values: ^1.11.0 => 1.11.0
    react-native-inappbrowser-reborn: ^3.7.0 => 3.7.0
    react-native-maps: 1.20.1 => 1.20.1
    react-native-mmkv-storage: ^0.11.2 => 0.11.2
    react-native-orientation-locker: ^1.7.0 => 1.7.0
    react-native-pager-view: ^6.7.1 => 6.7.1
    react-native-paper: ^5.13.1 => 5.13.1
    react-native-permissions: ^3.10.1 => 3.10.1
    react-native-reanimated: ^3.17.1 => 3.17.1
    react-native-render-html: ^6.1.0 => 6.3.4
    react-native-restart: ^0.0.27 => 0.0.27
    react-native-safe-area-context: ^5.3.0 => 5.3.0
    react-native-screens: ^4.9.2 => 4.9.2
    react-native-simple-toast: ^3.3.2 => 3.3.2
    react-native-svg: ^15.11.2 => 15.11.2
    react-native-svg-transformer: ^1.5.0 => 1.5.0
    react-native-tab-view: ^4.0.10 => 4.0.10
    react-native-uuid: ^2.0.2 => 2.0.3
    react-test-renderer: 19.0.0 => 19.0.0
    typescript: ^5.0.4 => 5.8.2
    victory-native: ^36.9.2 => 36.9.2
  npmGlobalPackages:
    @aws-amplify/cli: 12.12.6
    npm: 10.9.1
    typescript: 5.7.2
    yarn: 1.22.22

Describe the bug

I am developing an educational application for Chromebook and Android mobile devices. On a phone or tablet, rtn-web-browser opens a Custom Tab embedded in the app as expected when the user signs in. On Chromebook, no browser window appears because Custom Tabs are not supported.

Expected behavior

I expect a Chrome window to open to our Google sign-in URL.

Reproduction steps

  1. Create new React Native application and install aws-amplify, rtn-web-browser
  2. Configure Google social provider according to https://docs.amplify.aws/gen1/react-native/build-a-backend/auth/add-social-provider/
  3. Run on Chromebook (or Chromebook emulator - though I am not sure how replicable this is without a physical Chromebook)

Code Snippet

// Put your code below this line.
  const signInWithGoogle = async () => {
    if (connectedToInternet) {
      try {
        console.log("Federated sign in")
        signInWithRedirect({
          provider: 'Google',
        })
      } catch (error) {
        console.log('Error during Google login:', error);
        setIsSigningIn(false);
      }
    } else {
      console.log("Is offline");
    }
  }

...

const hubListener = (data: any) => {
    const { payload } = data;
    const { event } = payload;
    console.log("HUB HEARD EVENT: " + event)
    // + more listener code, removed
}

Log output

// Put your logs below this line
Federated sign in
login.tsx:140 HUB HEARD EVENT: signInWithRedirect_failure
login.tsx:162 {"channel":"auth","payload":{"event":"signInWithRedirect_failure","data":{"error":{"name":"OAuthSignInException","recoverySuggestion":"Make sure Cognito Hosted UI has been configured correctly"}}},"source":"Auth","patternInfo":[]}

aws-exports.js

No response

Manual configuration

amplifyConfig.oauth.redirectSignIn = '[OUR_APP_PACKAGE_NAME]://';
amplifyConfig.oauth.redirectSignOut = '[OUR_APP_PACKAGE_NAME]://';

Additional configuration

No response

Mobile Device

HP Chromebook 11 G9 EE

Mobile Operating System

ChromeOS

Mobile Browser

Google Chrome

Mobile Browser Version

135.0.7049.120

Additional information and screenshots

I have been getting around the issue by adding the following at line 63 of node_modules/@aws-amplify/rtn-web-browser/src/apis/openAuthSessionAsync.ts (in the function openAuthSessionAndroid):

	} catch (e) {
		const [redirectUrl] = await Promise.all([
			Promise.race([
				// wait for app to redirect, resulting in a redirectUrl
				getRedirectPromise(redirectUrls),
				// wait for app to return some other way, resulting in null
				getAppStatePromise(),
			]),
			// open chrome tab
			Linking.openURL(url),
		]);

		if (redirectUrl) Linking.openURL(redirectUrl);

		return redirectUrl;

Metadata

Metadata

Assignees

No one assigned

    Labels

    AuthRelated to Auth components/categoryReact NativeReact Native related issuepending-maintainer-responseIssue is pending a response from the Amplify team.questionGeneral question

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions