I am creating an app with react native and using AWS amplify authentication. I want to create an authentication flow. I am following the docs to implement sign in, sign up, and sign out. These all are working fine. But the problem is I don’t know how to navigate based on the authentication state. Currently, when a log in is succesful, I want to navigate to the home screen, but I get the error that ‘The action ‘NAVIGATE’ was not handled by any navigator.’ But if i reload the app, then the app opens on the home screen. So I know that the user has been signed in correctly and the problem is something with navigation. I am using amplify V6.
This is the App.js
import "react-native-get-random-values";
import { useEffect, useState } from "react";
import { Amplify } from "aws-amplify";
import awsconfig from "./aws-exports";
import { getCurrentUser } from "aws-amplify/auth";
import { StatusBar } from "expo-status-bar";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import theme from "./theme";
import LandingScreen from "./screens/Auth/LandingScreen";
import LoginScreen from "./screens/Auth/LoginScreen";
import CreateAccountScreen from "./screens/Auth/CreateAccountScreen";
import HomeScreen from "./screens/HomeScreen";
Amplify.configure(awsconfig);
const Stack = createNativeStackNavigator();
export default function App() {
const [isAuthenticated, setIsAuthenticated] = useState(null);
useEffect(() => {
async function checkUser() {
try {
const user = await getCurrentUser();
if (user) {
setIsAuthenticated(true);
} else {
setIsAuthenticated(false);
}
} catch (err) {
console.log(err);
setIsAuthenticated(false);
}
}
checkUser();
}, []);
return (
<NavigationContainer>
<StatusBar style="dark" />
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
{isAuthenticated ? (
<Stack.Screen name="HomeScreen" component={HomeScreen} />
) : (
<>
<Stack.Screen
name="LandingScreen"
component={LandingScreen}
/>
</>
)}
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen
name="CreateAccountScreen"
component={CreateAccountScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
This is the login screen:
import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import { signIn } from "@aws-amplify/auth";
import { useNavigation } from "@react-navigation/native";
import theme from "../../theme";
export default function LoginScreen() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const navigation = useNavigation();
const handleSignIn = async () => {
try {
const { isSignedIn, nextStep } = await signIn({
username,
password,
});
if (isSignedIn) {
Alert.alert("Sign in successful!");
navigation.navigate("HomeScreen");
} else {
Alert.alert("Sign in not completed:", nextStep);
}
} catch (error) {
Alert.alert("Error signing in:", error.message);
}
};
return (
<View>
<TextInput
placeholder="Username"
value={username}
onChangeText={setUsername}
/>
<TextInput
placeholder="Password"
secureTextEntry
value={password}
onChangeText={setPassword}
/>
<Button title="Sign In" onPress={handleSignIn} />
</View>
);
}
These are the relevant dependency versions:
“aws-amplify”: “^6.3.3”,
“@aws-amplify/react-native”: “^1.1.1”,
“@aws-amplify/auth”: “^6.3.3”
I want to find a way to navigate the user to the correct page based on whether they are signed in or not. I have not used AWS before so I am not sure what to do.