sign in page ui implemented

app/(auth)/sign-in.tsx

@@ -1,6 +1,7 @@
-import { Link } from "expo-router";
-import { useState } from "react";
-import { Image, ScrollView, Text, View } from "react-native";
+import { useSignIn } from "@clerk/clerk-expo";
+import { Link, useRouter } from "expo-router";
+import { useCallback, useState } from "react";
+import { Alert, Image, ScrollView, Text, View } from "react-native";
 
 import { CustomButton } from "@/components/custom-button";
 import { InputField } from "@/components/input-field";
@@ -8,12 +9,40 @@ import { OAuth } from "@/components/oauth";
 import { icons, images } from "@/constants";
 
 const SignIn = () => {
+  const router = useRouter();
+  const { signIn, setActive, isLoaded } = useSignIn();
   const [form, setForm] = useState({
     email: "",
     password: "",
   });
 
-  const onSignInPress = async () => {};
+  const onSignInPress = useCallback(async () => {
+    if (!isLoaded) return;
+
+    try {
+      const signInAttempt = await signIn.create({
+        identifier: form.email,
+        password: form.password,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({ session: signInAttempt.createdSessionId });
+        router.replace("/");
+      } else {
+        Alert.alert("Error", "Invalid email or password.");
+        setForm((prevForm) => ({
+          ...prevForm,
+          password: "",
+        }));
+      }
+    } catch (err: any) {
+      Alert.alert("Error", err?.errors[0]?.longMessage);
+      setForm((prevForm) => ({
+        ...prevForm,
+        password: "",
+      }));
+    }
+  }, [isLoaded, signIn, form.email, form.password, setActive, router]);
 
   return (
     <ScrollView className="flex-1 bg-white">