withAuthenticator Sign In An unknown error has occured

[zulexemplar]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

Authenticator

How is your app built?

npx create-expo-app Amplified_todo

What browsers are you seeing the problem on?

Microsoft Edge

Which region are you seeing the problem in?

No response

Please describe your bug.

Hello, I followed the instructions as per https://docs.amplify.aws/react-native/start/getting-started/auth/ It nicely loads the login page - I created a new account successfully and activated. But when I go to login page and hit 'Sign in' after entering the email and password, it shown an error "An unknown error has occurred". I can see no network/post request is made to cognito etc.

my package.json file looks like below { "name": "amplified_todo", "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.28", "@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.27", "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.8.0", "react-native-safe-area-context": "4.8.2" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }

my App.js looks like below: import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, TextInput, Pressable, SafeAreaView } from 'react-native'; import { generateClient } from 'aws-amplify/api'; import { withAuthenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

import { Amplify } from 'aws-amplify'; import config from './src/amplifyconfiguration.json'; import { signIn, SignInInput } from "aws-amplify/auth";

Amplify.configure(config);

// retrieves only the current value of 'user' from 'useAuthenticator' const userSelector = (context) => [context.user];

const SignOutButton = () => { const { user, signOut } = useAuthenticator(userSelector); return (

Hello, {user.username}! Click here to sign out!

); };

const initialFormState = { name: '', description: '' }; const client = generateClient();

const App = () => { const [formState, setFormState] = useState(initialFormState); const [todos, setTodos] = useState([]);

useEffect(() => { //fetchTodos(); }, []);

function setInput(key, value) { setFormState({ ...formState, [key]: value }); }

async function fetchTodos() { try { const todoData = await client.graphql({ query: listTodos }); const todos = todoData.data.listTodos.items; setTodos(todos); } catch (err) { console.log('error fetching todos'); } }

async function addTodo() { try { if (!formState.name || !formState.description) return; const todo = { ...formState }; setTodos([...todos, todo]); setFormState(initialFormState); await client.graphql({ query: createTodo, variables: { input: todo } }); } catch (err) { console.log('error creating todo:', err); } }

return (

); };

export default withAuthenticator(App);

const styles = StyleSheet.create({ container: { width: 400, flex: 1, padding: 20, alignSelf: 'center' }, todo: { marginBottom: 15 }, input: { backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 }, todoName: { fontSize: 20, fontWeight: 'bold' }, buttonContainer: { alignSelf: 'center', backgroundColor: 'black', paddingHorizontal: 8 }, buttonText: { color: 'white', padding: 16, fontSize: 18 } });

i used npm run android to run the application on my device

What's the expected behaviour?

I expected that the this would log me in without throwing the error message

Help us reproduce the bug!

I am using node v20.11.1 I used npm install as per https://docs.amplify.aws/react-native/start/getting-started/auth/ and installed the dependencies. i used npm install @aws-amplify/ui-react-native react-native-safe-area-context instead of expo install @aws-amplify/ui-react-native react-native-safe-area-context

Code Snippet

// Put your code below this line.

import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, TextInput, Pressable, SafeAreaView } from 'react-native'; import { generateClient } from 'aws-amplify/api'; import { withAuthenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

import { Amplify } from 'aws-amplify'; import config from './src/amplifyconfiguration.json'; import { signIn, SignInInput } from "aws-amplify/auth";

Amplify.configure(config);

// retrieves only the current value of 'user' from 'useAuthenticator' const userSelector = (context) => [context.user];

const SignOutButton = () => { const { user, signOut } = useAuthenticator(userSelector); return (

Hello, {user.username}! Click here to sign out!

); };

const initialFormState = { name: '', description: '' }; const client = generateClient();

const App = () => { const [formState, setFormState] = useState(initialFormState); const [todos, setTodos] = useState([]);

useEffect(() => { //fetchTodos(); }, []);

function setInput(key, value) { setFormState({ ...formState, [key]: value }); }

async function fetchTodos() { try { const todoData = await client.graphql({ query: listTodos }); const todos = todoData.data.listTodos.items; setTodos(todos); } catch (err) { console.log('error fetching todos'); } }

async function addTodo() { try { if (!formState.name || !formState.description) return; const todo = { ...formState }; setTodos([...todos, todo]); setFormState(initialFormState); await client.graphql({ query: createTodo, variables: { input: todo } }); } catch (err) { console.log('error creating todo:', err); } }

return (

); };

export default withAuthenticator(App);

const styles = StyleSheet.create({ container: { width: 400, flex: 1, padding: 20, alignSelf: 'center' }, todo: { marginBottom: 15 }, input: { backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 }, todoName: { fontSize: 20, fontWeight: 'bold' }, buttonContainer: { alignSelf: 'center', backgroundColor: 'black', paddingHorizontal: 8 }, buttonText: { color: 'white', padding: 16, fontSize: 18 } });

Console log output

no console log output. No network request is made when Sign in is clicked.

Additional information and screenshots

No response

[calebpollman]

@zulexemplar Can you please confirm whether your project using Expo Go?

[zulexemplar]

@zulexemplar Can you please confirm whether your project using Expo Go?

Hello Caleb, thanks for your message. Yes, the project is using Expo Go.

[calebpollman]

@zulexemplar The aws-amplify@^6 dependency of the React Native Authenticator does not support Expo Go unfortunately. Expo itself is supported, you can build the project and run it locally with an Android emulator or iOS simulator by running:

// Android
npx expo run:android 

// iOS
npx expo run:ios

[reesscot]

Closing out as Expo Go is not supported and docs have been updated.

[zulexemplar]

Thanks a lot guys. do you know if Expo Go would be supported in future. If not, any reason?

[JanDoeTian]

Hi all, please could you add Expo go support as a feature request, developing on expo go is significantly easier, thank you very much.

[JanDoeTian]

Hi All, the workaround is to go to Cognito -> Userpool -> client, then add the corresponding authentication flow type into the field.

It appears that amplify insufficiently configured Cognito to miss out that type which resulted in the error, but I'm not 100% sure as I haven't look into it, but the workaround works .

[reesscot]

@zulexemplar @JanDoeTian You can find more information on why Expo Go is not supported here: https://docs.amplify.aws/gen1/react-native/build-a-backend/troubleshooting/migrate-from-javascript-v5-to-v6/#dropping-support-for-expo-go