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">

app/(auth)/sign-up.tsx

@@ -45,6 +45,10 @@ const SignUp = () => {
         password: "",
       }));
     } catch (err: any) {
+      setForm((prevForm) => ({
+        ...prevForm,
+        password: "",
+      }));
       Alert.alert("Error", err?.errors[0]?.longMessage);
     }
   };

app/(root)/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from "expo-router";
+
+const RootLayout = () => {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+    </Stack>
+  );
+};
+
+export default RootLayout;

app/_layout.tsx

@@ -1,3 +1,4 @@
+import { tokenCache } from "@/lib/auth";
 import { ClerkProvider, ClerkLoaded } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
@@ -34,7 +35,7 @@ const RootLayout = () => {
   if (!publishableKey) throw new Error("Missing Clerk Publishable Key.");
 
   return (
-    <ClerkProvider publishableKey={publishableKey}>
+    <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
       <ClerkLoaded>
         <Stack>
           <Stack.Screen name="index" options={{ headerShown: false }} />