user can login with valid credentials and be redirected to the home screen

src/screens/UserLoginScreen.tsx

+import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
 import type { UnloggedUserStackScreenComponentProps } from "@/navigations/Types";
+import authenticateUser from "@/utils/requests/authenticateUser";
 import Button from "@components/Button";
 import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
 import Input from "@components/Input";
@@ -7,6 +9,8 @@ import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { Fontisto } from "@expo/vector-icons";
 import { containers } from "@styles/Commons";
+import { useMutation } from "@tanstack/react-query";
+import { useCallback, useState } from "react";
 import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -14,12 +18,34 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 	navigation,
 }) => {
 	const insets = useSafeAreaInsets();
+	const { setAuthenticationData } = useUserAuthenticationContext();
+
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+
+	const authenticationMutation = useMutation({
+		mutationFn: authenticateUser,
+		onSuccess: (data) => {
+			setAuthenticationData(data);
+			navigation.navigate("bottomTabs");
+		},
+		onError: (error) => {
+			console.error("error :: ", error);
+		},
+	});
+
+	const submit = useCallback(() => {
+		authenticationMutation.mutate({
+			username: email,
+			password: password,
+		});
+	}, [email, password, authenticationMutation]);
 
 	return (
 		<BackgroundDefault>
 			<View style={[containers.containerFull, { paddingTop: insets.top }]}>
 				<KeyboardAvoidingView
-					behavior={Platform.OS === "ios" ? "height" : "height"}
+					behavior={Platform.OS === "ios" ? "padding" : "position"}
 					style={{ flex: 1 }}
 				>
 					<Box style={{ height: "20%" }} px={"l"}>
@@ -48,8 +74,19 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 							</Box>
 
 							<Box gap={"m"}>
-								<Input label="Email" />
-								<Input label="Mot de passe" secureTextEntry={true} />
+								<Input
+									label="Email"
+									// value={email}
+									textContentType="emailAddress"
+									onChangeText={setEmail}
+								/>
+								<Input
+									label="Mot de passe"
+									secureTextEntry={true}
+									textContentType="oneTimeCode"
+									// value={password}
+									onChangeText={setPassword}
+								/>
 							</Box>
 						</Box>
 						<Box p={"s"}>
@@ -57,7 +94,10 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 								variant={"full"}
 								textVariants={"primary"}
 								label="Se connecter"
-								onPress={() => navigation.navigate("bottomTabs")}
+								onPress={() => {
+									// navigation.navigate("bottomTabs");
+									submit();
+								}}
 							/>
 							<Button
 								variant={"lightGray"}