search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.42k stars 2.12k forks source link

React Native Expo Auth.signIn shows error #7679

Closed billzeng2k closed 3 years ago

billzeng2k commented 3 years ago

Describe the bug When I use the function Auth.signIn it gives me error [TypeError: (0, _getRandomBase.default) is not a function. (In '(0, _getRandomBase.default)(array.byteLength)', '(0, _getRandomBase.default)' is undefined)] Only this function produces an error, Sign Up and Federated Sign In both work perfectly

To Reproduce Steps to reproduce the behavior:

Initialize an expo project by following steps on https://docs.amplify.aws/lib/auth/getting-started/q/platform/js and call the Auth.signIn command

Expected behavior I expect to sign in or an error

Code Snippet package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@eva-design/eva": "^2.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "^5.9.10",
    "@react-navigation/native": "^5.9.2",
    "@react-navigation/stack": "^5.14.2",
    "@ui-kitten/components": "^5.0.0",
    "@ui-kitten/eva-icons": "^5.0.0",
    "@ui-kitten/moment": "^5.0.0",
    "amazon-cognito-identity-js": "^4.5.10",
    "aws-amplify": "^3.3.17",
    "aws-amplify-react-native": "^4.3.1",
    "expo": "^40.0.1",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "lottie-react-native": "~2.6.1",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-modal": "^11.6.1",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "^2.15.2",
    "react-native-shimmer": "^0.6.0",
    "react-native-svg": "^12.1.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-decorators": "^7.12.13",
    "@ui-kitten/metro-config": "^5.0.0",
    "react-native-svg-transformer": "^0.14.3"
  },
  "private": true
}

Smartphone (please complete the following information):

xgallom commented 3 years ago

Same issue is hapenning to us, the error comes from this import. When replaced by import getRandomBase64 from './getRandomBase64.expo';, everything works. Using managed workflow, Expo SDK 40.0.1 and same package versions as above.

amhinson commented 3 years ago

I've tried to replicate the issue with the latest versions of Expo & Amplify, but I am not seeing any errors that you are showing. Would you be able to provide a small reproducible sample that shows the behavior?

Here is what I have:

Amplify setup `amplify init` `amplify add auth` ``` ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done. ``` `amplify push`
package.json ```json { "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-community/netinfo": "^5.9.10", "aws-amplify": "^3.3.17", "aws-amplify-react-native": "^4.3.1", "expo": "~40.0.0", "expo-status-bar": "~1.0.3", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", "react-native-web": "~0.13.12" }, "devDependencies": { "@babel/core": "~7.9.0" }, "private": true } ```
App.js ```js import React from 'react'; import { Button, StyleSheet, View } from 'react-native'; import Amplify, {Auth} from 'aws-amplify' import config from './src/aws-exports' Amplify.configure(config) function App() { async function signIn() { try { await Auth.signIn('username', 'password') console.warn('Successful login'); } catch (e) { console.log(e); } } return (

Kapture 2021-02-04 at 09 54 14

billzeng2k commented 3 years ago

I found that my metro.config.js file is most likely causing the bug

const MetroConfig = require('@ui-kitten/metro-config')
const defaultConfig = require('metro-config/src/defaults').getDefaultValues()

const evaConfig = {
    evaPackage: '@eva-design/eva',
    customMappingPath: './theme/mapping.json'
};

module.exports = MetroConfig.create(evaConfig, {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
      },
});

When I remove the file the bug goes away

Edit: The login function breaks when I add the metro config from https://github.com/kristerkari/react-native-svg-transformer, otherwise it works fine. Is there anyway I can keep my metro config? If not I will find a work around

xgallom commented 3 years ago

Can support this, have installed react-native-svg package and similar metro config

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
        const {
                resolver: {sourceExts, assetExts},
        } = await getDefaultConfig();
        return {
                transformer: {
                        babelTransformerPath: require.resolve('react-native-svg-transformer'),
                },
                resolver: {
                        assetExts: assetExts.filter(ext => ext !== 'svg'),
                        sourceExts: [...sourceExts, 'svg'],
                },
        };
})();
xgallom commented 3 years ago

@billzeng2k I maybe found the solution, try replacing defaultConfig with

const defaultConfig = require('@expo/metro-config').getDefaultConfig(__dirname);

and let me know if it fixed the issue. You may also have to install @expo/metro-config package as a dev dependency.

keatwei commented 3 years ago

I have this similar too

Having this same error 

 error signing in [TypeError: (0, _getRandomBase.default) is not a function. (In '(0, _getRandomBase.default)(array.byteLength)', '(0, _getRandomBase.default)' is undefined)]

to reproduce:

package.json 
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo-google-fonts/muli": "^0.1.0",
    "@expo/vector-icons": "^12.0.0",
    "@highcharts/highcharts-react-native": "^3.1.3",
    "@react-native-community/datetimepicker": "^3.0.9",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "^5.9.7",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@reduxjs/toolkit": "^1.5.0",
    "amazon-cognito-identity-js": "^4.5.1",
    "aws-amplify": "^3.3.24",
    "aws-amplify-react-native": "^4.3.2",
    "expo": "^40.0.0",
    "expo-asset": "~8.2.1",
    "expo-constants": "~9.3.3",
    "expo-font": "~8.4.0",
    "expo-linear-gradient": "~8.4.0",
    "expo-linking": "~2.0.1",
    "expo-splash-screen": "~0.8.1",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "gh-pages": "^3.1.0",
    "lodash": "^4.17.20",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-calendars": "^1.1128.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-maps": "0.27.1",
    "react-native-reanimated": "~1.13.0",
    "react-native-redash": "^16.0.4",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-svg": "^12.1.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.0.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/react-native-calendars": "^1.505.0",
    "@types/react-native-datepicker": "^1.7.0",
    "@types/react-redux": "^7.1.15",
    "jest-expo": "^40.0.0",
    "typescript": "~4.0.0"
  },
  "private": true
}
metro.config.js 
const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      sourceExts,
      assetExts: [...assetExts, "hcscript"],
    },
  };
})();
tsconfig.json 
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
     "*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@container/*": ["src/container/*"],
      "@configs/*": ["src/configs/*"],
      "@navigations/*": ["src/navigations/*"],
      "@images/*": ["src/images/*"],
      "@configs": ["src/configs/index"],
      "@store/*": ["src/store/*"],
      "react-native-redash/lib/module/v1": [
        "./node_modules/react-native-redash/lib/typescript/v1/index.d.ts"
      ]
    },
  },
}
babel.config.js 
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./src"],
          extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
          alias: {
            "@components": "./src/components",
            "@components/*": ["src/components/*"],
            "@container/*": ["src/container/*"],
            "@configs/*": ["src/configs/*"],
            "@navigations/*": ["src/navigations/*"],
            "@images/*": ["src/images/*"],
            "@configs": ["src/configs/index"],
            "@configs": ["src/configs/index"],
            "@store/*": ["./src/store/*"],
          },
        },
      ],
    ],
  };
};

i had the similar issue. @xgallom how do you fix the import getRandomBase64 from './getRandomBase64.expo' issue? is this cause the issue?

@billzeng2k did you fixed the issue? is it metro.config.js caused it?

xgallom commented 3 years ago

You need to getDefaultConfig from @expo/metro-config not from metro-config.

As I mentioned above, try using const defaultConfig = require('@expo/metro-config').getDefaultConfig(__dirname); instead

marziamura commented 3 years ago

Thank you for the answer. I have deleted the original question because I thought I should have tried the solution that was already posted as mentioned. I did tried that and didn't work, or at least I am not able to configure the file correctly. I tried several things but honestly I am not sure how to use the defaultConfig, and nothing I tried worked.

const { getDefaultConfig } = require('@expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname); // what do I do with this now?

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = (async () => {

   return {
      resolver: {
         blacklistRE: blacklist([/#current-cloud-backend\/.*/]),
      },
   };
})();

To get me going I have manually changed the import in the file node_modules\amazon-cognito-identity-js\src\utils\getRandomValues.native.js to include the one with the expo extension.

svidgen commented 3 years ago

Looks like the same issue here: https://github.com/aws-amplify/amplify-js/issues/8113

Can you try again with the EXPO_LEGACY_IMPORTS=1 environment variable?

DariusPirvulescu commented 3 years ago

We were also having this problem, I tried @xgallom's solution (thanks btw :taco: ) and it seems like a fix. Here are the steps I followed:

Here is our metro.config.js file now:

const { getDefaultConfig } = require('@expo/metro-config');

module.exports = (async () => {
    const {
        resolver: { sourceExts, assetExts }
    } = await getDefaultConfig(__dirname);
    return {
        transformer: {
            babelTransformerPath: require.resolve('react-native-svg-transformer')
        },
        resolver: {
            assetExts: assetExts.filter(ext => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg']
        }
    };
})();

@marziamura can give this a try, if you're still getting the error.

marziamura commented 3 years ago

thanks @svidgen your fix worked at least with expo start.

mikeRChambers610 commented 3 years ago

This issue is only happening on Android for me.

Expo CLI 4.4.3 environment info: System: OS: macOS 10.15.7 Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.3 - /usr/local/bin/node npm: 6.14.5 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 25, 26 Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.1, 27.0.3 System Images: android-25 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.0 AI-171.4443003 Xcode: 11.5/11E608c - /usr/bin/xcodebuild npmPackages: expo: ^41.0.0 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 react-navigation: ^4.4.0 => 4.4.4 npmGlobalPackages: expo-cli: 4.4.3 Expo Workflow: managed

marziamura commented 3 years ago

An update on this tread: none of the fix above seems to be working with expo:publish (other than manually changing the include) I did not try on a production build, and given the review times of the stores, I am not going to do that.

amhinson commented 3 years ago

@mikeRChambers610 Could you also share what version of aws-amplify you are using? We just published a new version yesterday that includes the changes for this issue.

@marziamura Could you describe what issue you are seeing with expo:publish as it relates to Amplify? Also, are you using the latest version of aws-amplify?

tobias-g commented 3 years ago

@amhinson I was also seeing this issue and updating from 3.3.27 to 3.4.1 resolved the issue for me.

sammartinez commented 3 years ago

@billzeng2k,

We are going to close this issue since we have not heard from you.

Please let us know if you are still needing support, provide steps to reproduce, and we can reopen the issue to investigate further.

Thanks

marziamura commented 3 years ago

@billzeng2k,

We are going to close this issue since we have not heard from you.

Please let us know if you are still needing support, provide steps to reproduce, and we can reopen the issue to investigate further.

Thanks

@billzeng2k I didn't reply because every time I update amplify version something goes belly up, so I needed to set aside some time. I did it yesterday (and things did break big time), but unfortunately the problem still persists.
The problem is always the same, during the build the required expo file is not included, unless I change the source code manually. in file ...\node_modules\amazon-cognito-identity-js\src\utils\getRandomValues.native.js

` import base64Decode from 'fast-base64-decode'; import getRandomBase64 from './getRandomBase64.expo'; ////<<< I change this manually

class TypeMismatchError extends Error {} class QuotaExceededError extends Error {} `

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.