An unknown error has ocurred.

[KenSosa95]

Hi, I am following the tutorial to implement authentication for my mobile app created with react native. It allows me to sign up and reset password but when I try to sign in it shows me this message: "An unknown error has occurred."
I have installed everything how it says and I have done this multiple times starting from scratch and still getting the same issue.

[KenSosa95]

import React from 'react';
import { Button } from 'react-native';
import {
useAuthenticator,
withAuthenticator,
} from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';

import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);

function SignOutButton() {
const { signOut } = useAuthenticator();
return ;
}

function App() {
return ;
}

export default withAuthenticator(App);

[esauerbo]

Hey @KenSosa95 thanks for creating this issue! I wasn't able to reproduce this off the bat with the latest @aws-amplify/ui-react-native.

Does the error message show a stack trace, and if so could you attach the full message to the ticket (or any other logs that might be relevant)? Some more information about your project structure might also be helpful. Did you use the React Native CLI or Expo to install the dependencies? Are you building the app with iOS or Android? Please also attach your package.json and any other project-specific information.

[esauerbo]

@KenSosa95 thanks for the info, will look into this. (FYI I edited your comment to remove some identifying info from aws-exports, the configuration is helpful but the keys should be kept private)

[KenSosa95]

Yes, I forgot to remove it. Thank you very much!

[miranska]

I ran into the same problem. The tutorial page appears to have two typos. Expo CLI worked after I

1. Replaced

expo install @aws-amplify/ui-react-native react-native-safe-area-context

with

npx expo install @aws-amplify/ui-react-native react-native-safe-area-context

2. Replaced

npm start

with

npx expo run:android
npx expo run:ios

[miranska]

@KenSosa95, I also want to point out that GitHub keeps all versions of a post publicly available (at least I can access them). You may want to delete your post if you want to protect confidential information.

[KenSosa95]

Hi, @miranska thanks for the advice, I will delete it and post it again after this one.
I tried what you mentioned and still not working.

[KenSosa95]

Hi @esauerbo thanks for replying.

I used both. I tried first with React Native CLI and it didn't work, then I started from scratch with Expo and it doesn't work either.
When I run the project I use my android device and my iOS device to test it. As I said before it allows me to sign up and reset the password but it does not allow me to log in. When I try to log in it show the message "An unknown error has occurred."

It does not show any error message in the terminal. Only shows the message in the device as it is in the picture attached.

When I open Amazon Cognito the user appears registered. Confirmation status: Confirmed. Status: Enabled

This is the package.json:
{
"name": "eapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@aws-amplify/react-native": "^1.0.25",
"@aws-amplify/ui-react-native": "^2.1.4",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-native-community/netinfo": "11.1.0",
"aws-amplify": "^6.0.24",
"expo": "~50.0.14",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-get-random-values": "^1.11.0",
"react-native-safe-area-context": "4.8.2"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}

This is the aws-exports.js:
/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
"aws_project_region": "eu-west-2",
"aws_cognito_identity_pool_id": "",
"aws_cognito_region": "eu-west-2",
"aws_user_pools_id": "",
"aws_user_pools_web_client_id": "",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": [
"REQUIRES_LOWERCASE",
"REQUIRES_NUMBERS",
"REQUIRES_SYMBOLS",
"REQUIRES_UPPERCASE"
]
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
]
};

export default awsmobile;

[esauerbo]

@KenSosa95 can you add a function override to signIn and print out the error? Something like this should work:

import React from 'react';
import { Button } from 'react-native';
import { signIn, SignInInput } from 'aws-amplify/auth';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';

import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button onPress={signOut} title="Sign Out" />;
}

const services = {
  async handleSignIn(input: SignInInput) {
    try {
      const user = await signIn(input);
      console.log(user);
      return user;
    } catch (error) {
      console.error(error)
    }
  
  },
};

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator services={services}>
          <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

[KenSosa95]

@esauerbo I just made some changes to the SignIn fuction because I am using js.

import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';
import { signIn } from 'aws-amplify/auth';
import React from 'react';
import { Button } from 'react-native';

import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button onPress={signOut} title="Sign Out" />;
}

const services = {
  async handleSignIn(input) {
    try {
      const user = await signIn(input);
      console.log(user);
      return user;
    } catch (error) {
      console.error(error);
    }
  },
};

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator services={services}>
          <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

In the device I get a Console warning: Possible unhandled promise rejection (id:2):
TypeError: Cannot read property 'nextStep' of undefined.
and a Console Error: ERROR [Unknown: An unknown error has occurred.

The message I get in the terminal is the same. ERROR [Unknown: An unknown error has occurred.

[KenSosa95]

Good morning from London. Quickly update.
I just opened the project on the web and it is working. I can sign in!!
The problem comes when I try to sign in from a device or from Android emulator.
I get the same error. "An unknown error has occurred."

[esauerbo]

@KenSosa95 Good morning! Glad to hear it's working on web. Thanks for your patience on this, I have a couple of followup questions:

1. Could you link the tutorial you're following?
2. Can you run npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages in your project directory and provide the output?
3. Can you paste this in and see what the output is? (You'll need to use your actual username/password). This uses just the signIn api so it'll help us figure out whether the problem occurs in the Authenticator component or the api.

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { signIn } from 'aws-amplify/auth';
import { Amplify } from 'aws-amplify';

import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

async function handleSignIn(input) {
  try {
    const user = await signIn(input);
    console.log(user);
    return user;
  } catch (error) {
    console.error(error);
    console.error(error.underlyingError);
  }
}

const style = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

function App() {
  return (
    <View style={style.container}>
      <Button
        onPress={() =>
          handleSignIn({
            username: 'your-username',
            password: 'your-password',
          })
        }
        title="Sign In"
      />
    </View>
  );
}

export default App;

[KenSosa95]

@esauerbo

1. This is the tutorial I'm following AWS Amplify Docs

System:
OS: Windows 11 10.0.22631
CPU: (4) x64 Intel(R) Core(TM) i3-10110U CPU @ 2.10GHz
Memory: 960.88 MB / 7.79 GB
Binaries:
Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 123.0.6312.86
Edge: Chromium (123.0.2420.65)
Internet Explorer: 11.0.22621.1
npmPackages:
@aws-amplify/react-native: ^1.0.25 => 1.0.25
@aws-amplify/ui-react-native: ^2.1.4 => 2.1.4
@babel/core: ^7.20.0 => 7.24.3
@expo/metro-runtime: ~3.1.3 => 3.1.3
@react-native-async-storage/async-storage: 1.21.0 => 1.21.0
@react-native-community/netinfo: 11.1.0 => 11.1.0
HelloWorld: 0.0.1
aws-amplify: ^6.0.24 => 6.0.24
aws-amplify/adapter-core: 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/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 ()
expo: ~50.0.14 => 50.0.14
expo-status-bar: ~1.11.1 => 1.11.1
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.73.6 => 0.73.6
react-native-get-random-values: ^1.11.0 => 1.11.0
react-native-safe-area-context: 4.8.2 => 4.8.2
react-native-web: ~0.19.6 => 0.19.10
npmGlobalPackages:
@aws-amplify/cli: 12.10.3
eas-cli: 7.4.0
expo-cli: 6.3.10
npm: 10.5.0
react-native-cli: 2.0.1
yarn: 1.22.22

3. ERROR [Unknown: An unknown error has occurred.]
   ERROR [Error: The package '@aws-amplify/react-native' doesn't seem to be linked. Make sure:

• You have run 'pod install'
• You rebuilt the app after installing the package
• You are not using Expo Go

Do I have to eject it? In the tutorial does not say anything about that.

[calebpollman]

Since the issue here appears to be with the @aws-amplify/react-native package, transferring this issue to the Amplify JS github repo

[cwomack]

Hello, @KenSosa95 👋 and thanks for the details you've already provided on this issue. We'll take a look at it and see if we can reproduce as well as follow up with any questions we have from the amplify-js side.

Looks to be related to the #13200 I've linked above as well.

[KenSosa95]

Hi, @cwomack, thanks for replying.
Quickly update:
When I run npx expo start it does not allow me to sign in to a device or emulator.
When I run npx expo run:android it lets me log in to an Android emulator but it doesn't open the project in the device.

I guess the problem is related with Expo go

[calebpollman]

@KenSosa95 Was able to reproduce the issue in an expo project without using expo go and believe the root cause to be a missing React Native polyfill dependency. Can you try adding react-native-get-random-values to your project by running:

npx expo install react-native-get-random-values

then rebuilding android:

npx expo run:android

[cwomack]

@KenSosa95, let us know when you get a chance to review @calebpollman's comment above and if it helps resolve the issue. Thanks!

[KenSosa95]

@calebpollman @cwomack react-native-get-random-values is already installed.
As I said before
When I run npx expo start it does not allow me to sign in to a device or emulator.
When I run npx expo run:android it lets me log in to an Android emulator but it doesn't open the project in the device.
(must be a problem related with Expo go)
Now at least I can continue developing the app but I cannot test it in a physical device. I have to do it only in the emulator.

Thanks for the help!

[cwomack]

@KenSosa95, can see if passing the USER_PASSWORD_AUTH flow type within your handleSignIn of the services prop for the authenticator helps at all?

[bertoninicolas]

@calebpollman @cwomack react-native-get-random-values is already installed. As I said before When I run npx expo start it does not allow me to sign in to a device or emulator. When I run npx expo run:android it lets me log in to an Android emulator but it doesn't open the project in the device. (must be a problem related with Expo go) Now at least I can continue developing the app but I cannot test it in a physical device. I have to do it only in the emulator.

Thanks for the help!

Good night people! I hope everyone is well. Message from Brazil, thanking the strong community we have here.

I was experiencing the same problem reported above, finally after testing it on the web, I was able to log in.

Using the iOS device or Android emulator, it is not possible to log in, only register and recover.

Now we can continue with our projects.

[cwomack]

Glad to hear you were able to get unblocked @bertoninicolas.

@KenSosa95, are you still experiencing this?

[KenSosa95]

@cwomack When I run npx expo start I am still not able to log in.
If I run npx expo run: android I am able to to log in. I will continue using only npx expo run: android.

[GlenTiki]

@cwomack Hey, I've been doing something somewhat similar, that I think is related.

I'm essentially using the bare signIn function for a custom auth flow in my expo/react-native app with import {signIn} from "aws-amplify/auth";. I've been debugging it by adding logging in the installed dependency, and pinned it down to an error like the one discussed here: expo/expo#25586

I think its just expo go related as its no longer supported.

[awshanks]

Adding some more on this. I just done the tutorial today and had the above issues.
Needed the polyfill npx expo install react-native-get-random-values or the add todo would not work (couldn't generate random values).

Also had to use npm run ios rather than npm start as the latter used expo go which is not supported.

[jewells07]

Same issue

 ERROR  [Unknown: An unknown error has occurred.]
 ERROR  [Error: The package '@aws-amplify/react-native' doesn't seem to be linked. Make sure:

[mazPrzemo89]

You can always look at underlyingError property when you are working with aws-amplify console.log((error as any).underlyingError);

[cwomack]

For anyone that comes across this issue or is still experiencing this, we've updated our docs within the Quickstart guide and other areas per this PR in the docs repo to clarify that we no longer have support for Expo Go.

There's also the helpful comment above from @calebpollman to help clarify how to resolve the missing polyfill for react-native-get-random-values.

We'll close this issue as resolved at this point.