React Native email/password login broken in monorepo

[mikeislearning]

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

None

Environment information

# Put output below this line
  System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 61.47 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.local/share/mise/installs/node/20.14.0/bin/node
    Yarn: 4.5.0 - ~/.local/share/mise/installs/node/20.14.0/bin/yarn
    npm: 10.7.0 - ~/.local/share/mise/installs/node/20.14.0/bin/npm
    Watchman: 2024.09.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 130.0.6723.59
    Edge: 130.0.2849.52
    Safari: 18.0.1
  npmGlobalPackages:
    corepack: 0.28.1
    firebase-tools: 13.22.1
    npm: 10.7.0

Describe the bug

Our team is using a turbo-based monorepo with both a react web app and a react native mobile app, in addition to our node.js server.

When we trying logging in using email+password on the react web app, everything works as expected.
When we try the same login with the react-native mobile app, it is unable to find the configuration, with the error message:

[AuthUserPoolException: Auth UserPool not configured.]

Hope to hear from you!

Expected behavior

We would expected this to allow a user to login via amplify with an email + password using the react-native app

Reproduction steps

It seems like it'll be tough to reproduce without someone setting up a full turbo monorepo, so we do already have a fix for it with a patch we created using patch-package located at <root>/patches/@aws-amplify+auth+6.5.3.patch. Here's the code:

diff --git a/node_modules/@aws-amplify/auth/dist/cjs/providers/cognito/tokenProvider/TokenStore.js b/node_modules/@aws-amplify/auth/dist/cjs/providers/cognito/tokenProvider/TokenStore.js
index a0b7c92..1406e3b 100644
--- a/node_modules/@aws-amplify/auth/dist/cjs/providers/cognito/tokenProvider/TokenStore.js
+++ b/node_modules/@aws-amplify/auth/dist/cjs/providers/cognito/tokenProvider/TokenStore.js
@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAuthStorageKeys = exports.createKeysForAuthStorage = exports.DefaultTokenStore = void 0;
+const core_1 = require("@aws-amplify/core");
 const utils_1 = require("@aws-amplify/core/internals/utils");
 const AuthError_1 = require("../../../errors/AuthError");
 const types_1 = require("./types");
@@ -124,9 +125,11 @@ class DefaultTokenStore {
         ]);
     }
     async getAuthKeys(username) {
-        (0, utils_1.assertTokenProviderConfig)(this.authConfig?.Cognito);
+        const authConfig = core_1.Amplify.getConfig().Auth;
+        (0, utils_1.assertTokenProviderConfig)(authConfig.Cognito);
+        this.setAuthConfig(authConfig);
         const lastAuthUser = username ?? (await this.getLastAuthUser());
-        return (0, exports.createKeysForAuthStorage)(this.name, `${this.authConfig.Cognito.userPoolClientId}.${lastAuthUser}`);
+        return (0, exports.createKeysForAuthStorage)(this.name, `${authConfig.Cognito.userPoolClientId}.${lastAuthUser}`);
     }
     getLastAuthUserKey() {
         (0, utils_1.assertTokenProviderConfig)(this.authConfig?.Cognito);



### Code Snippet

```javascript
// Put your code below this line.

Log output

// Put your logs below this line

[AuthUserPoolException: Auth UserPool not configured.]

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

iOS and Android

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[HuiSF]

Hi @mikeislearning thanks for opening this issue. It sounds like that your project ended up have multiple versions / instances of the @aws-amplify/core package. Could you confirm that in your monorepo set up, the dependencies tree is consistent, and no duplicate dependencies were produced?

[mikeislearning]

Hi @mikeislearning thanks for opening this issue. It sounds like that your project ended up have multiple versions / instances of the @aws-amplify/core package. Could you confirm that in your monorepo set up, the dependencies tree is consistent, and no duplicate dependencies were produced?

Hi there @HuiSF thank you for the quick response! I can confirm that no duplicate dependencies were produced

[cwomack]

@mikeislearning, can you share your package.json file so we can see the dependencies currently being used? Thanks!

[mikeislearning]

Sure thing @cwomack , here are the dependencies:

Monorepo root:

  "devDependencies": {
    "@devoxa/integresql-client": "^2.0.0",
    "@dotenvx/dotenvx": "^1.14.2",
    "@tooling/prettier-config": "*",
    "patch-package": "^8.0.0",
    "prettier": "^3.3.0",
    "turbo": "^2.2.3",
    "typescript": "5.3.3"
  },

React App (works as expected):

"dependencies": {
    "@fontsource/inter": "^5.0.19",
    "@hookform/resolvers": "^3.3.4",
    "@libs/api": "*",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@sentry/react": "^7.114.0",
    "@t3-oss/env-core": "^0.11.1",
    "@tanstack/react-query": "^5.51.4",
    "@tanstack/react-query-devtools": "^5.51.4",
    "@tanstack/react-router": "^1.31.26",
    "aws-amplify": "^6.6.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "i18next": "^23.11.3",
    "immer": "^10.1.1",
    "jotai": "^2.10.0",
    "lucide-react": "^0.408.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.50.1",
    "react-i18next": "^14.1.1",
    "react-virtuoso": "^4.7.11",
    "recharts": "^2.12.7",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.3.0",
    "use-broadcast-ts": "^1.8.0",
    "use-immer": "^0.10.0",
    "use-mask-input": "^3.4.0",
    "vaul": "^0.9.1",
    "zod": "^3.23.8",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@tanstack/router-devtools": "^1.31.26",
    "@tanstack/router-vite-plugin": "^1.31.18",
    "@tooling/eslint-config": "*",
    "@tooling/prettier-config": "*",
    "@tooling/tailwind-config": "*",
    "@tooling/tsconfig": "*",
    "@types/node": "^20.12.11",
    "@types/react": "~18.2.45",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "prettier": "^3.3.0",
    "tailwindcss": "^3.4.3",
    "typescript": "5.3.3",
    "vite": "^5.4.6",
    "vite-plugin-svgr": "^4.2.0"
  },

React Native App (not working):

"dependencies": {
    "@aws-amplify/react-native": "^1.1.6",
    "@expo/react-native-action-sheet": "^4.0.1",
    "@expo/vector-icons": "^14.0.3",
    "@gorhom/bottom-sheet": "^4",
    "@hookform/resolvers": "^3.3.4",
    "@libs/api": "*", // this references our monorepo libraries
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-navigation/native": "^6.0.2",
    "@rehookify/datepicker": "^6.6.1",
    "@sentry/react-native": "~5.33.0",
    "@shopify/restyle": "^2.4.2",
    "@tanstack/react-query": "^5.51.4",
    "@ts-rest/core": "^3.45.2",
    "aws-amplify": "^6.6.6",
    "axios": "^1.7.5",
    "base-64": "^1.0.0",
    "expo": "^51.0.32",
    "expo-application": "~5.9.1",
    "expo-auth-session": "^5.5.2",
    "expo-av": "~14.0.7",
    "expo-camera": "~15.0.16",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.26",
    "expo-device": "~6.0.2",
    "expo-font": "~12.0.10",
    "expo-insights": "~0.7.0",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-router": "~3.5.23",
    "expo-secure-store": "~13.0.2",
    "expo-sharing": "^12.0.1",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "^13.0.3",
    "i18next": "^23.11.3",
    "immer": "^10.1.1",
    "intl-pluralrules": "^2.0.1",
    "jotai": "^2.10.0",
    "lodash": "^4.17.21",
    "querystring": "^0.2.1",
    "react": "18.2.0",
    "react-hook-form": "^7.50.1",
    "react-i18next": "^14.1.1",
    "react-native": "0.74.5",
    "react-native-device-info": "^11.1.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-gifted-charts": "^1.4.41",
    "react-native-gifted-chat": "^2.6.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-magic-modal": "^5.1.16",
    "react-native-permissions": "^4.1.2",
    "react-native-popover-view": "^5.1.8",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "^4.11.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "^15.2.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-url-polyfill": "^2.0.0",
    "utf8": "^3.0.0",
    "zod": "^3.23.8",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.4.3",
    "@tooling/eslint-config": "*",
    "@tooling/prettier-config": "*",
    "@tooling/tsconfig": "*",
    "@types/base-64": "^1",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4",
    "@types/react": "~18.2.45",
    "@types/react-native-get-random-values": "^1",
    "@types/utf8": "^3.0.3",
    "eslint": "^8.57.0",
    "jest": "^29.3.1",
    "jest-expo": "~51.0.4",
    "jiti": "^1.21.0",
    "prettier": "^3.3.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.3.3"
  },

[ashika112]

@mikeislearning Thanks for providing the package.json. Taking a closer look into it. It looks like it has all the dependencies we want to see in the app. I am not sure if mono-repo should have any effect on the app code. Does your app employ micro-frontend pattern? Ideally Amplify.configure as early as possible in your application’s life-cycle. So you want to make sure Amplify.configure() is called on the entry point to the RN app and react app separately

[mikeislearning]

@ashika112 No, the app doesn't employ a micro front end pattern, and the react and react native environments are entirely separate

[HuiSF]

Hi @mikeislearning looking at your patch you are importing const core_1 = require("@aws-amplify/core"); which strongly suggests that there are inconsistent .configure() calls to be made in your codebase.

Can you provide your code that configures Amplify in your react-native app? Please also include all import statements.

[cwomack]

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!