Skip to content

The library is not working correctly with React Native 0.79 #14352

Open
@cranberyxl

Description

@cranberyxl

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line
 System:
    OS: macOS 15.3.2
    CPU: (8) arm64 Apple M2
    Memory: 90.69 MB / 24.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
    Yarn: 1.22.22 - ~/.asdf/installs/nodejs/20.12.2/bin/yarn
    npm: 10.8.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.1.1 - ~/.asdf/installs/nodejs/20.12.2/bin/pnpm
    Watchman: 2024.10.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 135.0.7049.96
    Safari: 18.3.1
  npmPackages:
    @aws-amplify/auth: 6.12.2 => 6.12.2
    @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.11.2 => 6.11.2
    @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.8 => 1.1.8
    @aws-amplify/rtn-web-browser: 1.1.2 => 1.1.2
    @babel/core: ^7.25.2 => 7.26.10
    @babel/preset-env: ^7.25.3 => 7.26.9
    @babel/runtime: ^7.25.0 => 7.27.0
    @react-native-community/cli: 18.0.0 => 18.0.0
    @react-native-community/cli-platform-android: 18.0.0 => 18.0.0
    @react-native-community/cli-platform-ios: 18.0.0 => 18.0.0
    @react-native/babel-preset: 0.79.1 => 0.79.1
    @react-native/eslint-config: 0.79.1 => 0.79.1
    @react-native/metro-config: 0.79.1 => 0.79.1
    @react-native/typescript-config: 0.79.1 => 0.79.1
    @types/jest: ^29.5.13 => 29.5.14
    @types/react: ^19.0.0 => 19.1.2
    @types/react-test-renderer: ^19.0.0 => 19.1.0
    aws-amplify: 6.14.2 => 6.14.2
    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 ()
    eslint: ^8.19.0 => 8.57.1
    jest: ^29.6.3 => 29.7.0
    prettier: 2.8.8 => 2.8.8
    react: 19.0.0 => 19.0.0
    react-native: 0.79.1 => 0.79.1
    react-native-get-random-values: 1.11.0 => 1.11.0
    react-test-renderer: 19.0.0 => 19.0.0
    typescript: 5.0.4 => 5.0.4
  npmGlobalPackages:
    corepack: 0.25.2
    npm: 10.8.0

Describe the bug

When calling signInWithRedirect the native code for getRedirectUrl is not being called resulting in the code trying to access window.locaation.origin which dos not exist in a native environment. In React Native 78 this works properly. I'm don't know if this is a bundling change, or a symptom of a React 79 metro or babel change.

Expected behavior

Calling signInWithRedirect on React Native 79 calls the code in getRedirectUrl.native.ts

Reproduction steps

  1. Install React Native 79
  2. Install the amplify auth code and react native components
  3. Configure login with oauth
  4. Call signInWithRedirect

Code Snippet

        <Button
          // mode="outlined"
          onPress={() => {
              signInWithRedirect({ provider: 'Apple' }).catch(console.error);
          }}
          title="Sign in with Apple"
          color={'red'}
        />

Log output

TypeError: Cannot read property 'origin' of undefined
    at isSameOriginAndPathName (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.CognitoTest:149804:35)
    at find (native)
    at getRedirectUrl (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.CognitoTest:149789:104)

...

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    AuthRelated to Auth components/categoryBuildRelated to build issuesReact NativeReact Native related issuebugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions