waseel/app/(auth)/sign-in.tsx

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";
import { OAuth } from "@/components/oauth";
import { icons, images } from "@/constants";
import { fetchAPI } from "@/lib/fetch";
import { useSession } from "@/lib/session";

const SignIn = () => {
  const router = useRouter();
  const { isLoaded, setSession } = useSession();
  const [form, setForm] = useState({
    email: "",
    password: "",
  });

  const onSignInPress = useCallback(async () => {
    try {
      const response = await fetchAPI("/(api)/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: form.email,
          password: form.password,
        }),
      });

      await setSession(response.data);
      router.replace("/");
    } catch (err: any) {
      const status = String(err?.message ?? "");
      const message = status.includes("403")
        ? "Please verify your email first."
        : status.includes("401")
          ? "Invalid email or password."
          : "Could not sign in. Please try again.";

      Alert.alert("Error", message);
      setForm((prevForm) => ({
        ...prevForm,
        password: "",
      }));
    }
  }, [isLoaded, form.email, form.password, setSession, router]);

  return (
    <ScrollView className="flex-1 bg-white">
      <View className="flex-1 bg-white">
        <View className="relative w-full h-[250px]">
          <Image
            source={images.signUpCar}
            alt="Car"
            className="z-0 w-full h-[250px]"
            resizeMode="contain"
          />

          <Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
            Welcome 👋
          </Text>
        </View>

        <View className="p-5">
          <InputField
            label="Email"
            placeholder="karim@email.com"
            icon={icons.email}
            value={form.email}
            onChangeText={(value) =>
              setForm((prevForm) => ({
                ...prevForm,
                email: value,
              }))
            }
            keyboardType="email-address"
          />

          <InputField
            label="Password"
            placeholder="••••••••"
            icon={icons.lock}
            secureTextEntry
            value={form.password}
            onChangeText={(value) =>
              setForm((prevForm) => ({
                ...prevForm,
                password: value,
              }))
            }
          />

          <CustomButton
            title="Sign In"
            onPress={onSignInPress}
            className="mt-6"
          />

          <OAuth title="Sign in with Google" />

          <Link
            href="/sign-up"
            className="text-base text-center text-general-200 mt-10"
          >
            <Text>Don&apos;t have an account? </Text>
            <Text className="text-primary-500">Sign up</Text>
          </Link>
        </View>
      </View>
    </ScrollView>
  );
};

export default SignIn;