showing a basic error message when authentication is a failure

src/screens/UserLoginScreen.tsx

@@ -22,6 +22,7 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
 
 	const authenticationMutation = useMutation({
 		mutationFn: authenticateUser,
@@ -30,7 +31,11 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 			navigation.navigate("bottomTabs");
 		},
 		onError: (error) => {
-			console.error("error :: ", error);
+			console.error("error :: ", error.response.data);
+			if (error.response.status === 400) {
+				return setError("Bad request");
+			}
+			setError(error.response.data.detail);
 		},
 	});
 
@@ -77,6 +82,7 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 								<Input
 									label="Email"
 									// value={email}
+									autoCorrect={false}
 									textContentType="emailAddress"
 									onChangeText={setEmail}
 								/>
@@ -89,6 +95,11 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 								/>
 							</Box>
 						</Box>
+						{error && (
+							<Text variant={"error"} textAlign={"center"}>
+								{error}
+							</Text>
+						)}
 						<Box p={"s"}>
 							<Button
 								variant={"full"}

src/themes/Theme.tsx

@@ -15,6 +15,8 @@ const palette = {
 	lightGray: "#F4F5F7",
 	gray: "#747E98",
 	yellow: "#F4C44A",
+
+	red: "#FF0000",
 };
 
 const theme = createTheme({
@@ -27,6 +29,7 @@ const theme = createTheme({
 		lightGray: palette.lightGray,
 		gray: palette.gray,
 		yellow: palette.yellow,
+		red: palette.red,
 	},
 	spacing: {
 		s: 8,
@@ -82,6 +85,9 @@ const theme = createTheme({
 		lightGray: {
 			color: "lightGray",
 		},
+		error: {
+			color: "red",
+		},
 	},
 	cardVariants: {
 		defaults: {