clerk sign in and sign up login setup

app/(auth)/sign-in.tsx

@@ -65,7 +65,7 @@ const SignIn = () => {
             className="mt-6"
           />
 
-          <OAuth />
+          <OAuth title="Sign in with Google" />
 
           <Link
             href="/sign-up"

app/(auth)/sign-up.tsx

@@ -1,3 +1,4 @@
+import { useSignUp } from "@clerk/clerk-expo";
 import { Link } from "expo-router";
 import { useState } from "react";
 import { Image, ScrollView, Text, View } from "react-native";
@@ -8,13 +9,74 @@ import { OAuth } from "@/components/oauth";
 import { icons, images } from "@/constants";
 
 const SignUp = () => {
+  const { isLoaded, signUp, setActive } = useSignUp();
+
   const [form, setForm] = useState({
     name: "",
     email: "",
     password: "",
   });
 
-  const onSignUpPress = async () => {};
+  const [verification, setVerification] = useState({
+    state: "default",
+    error: "",
+    code: "",
+  });
+
+  const onSignUpPress = async () => {
+    if (!isLoaded) return;
+
+    try {
+      await signUp.create({
+        emailAddress: form.email,
+        password: form.password,
+        firstName: form.name,
+      });
+
+      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+
+      setVerification((prevVerification) => ({
+        ...prevVerification,
+        state: "pending",
+      }));
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  };
+
+  const onPressVerify = async () => {
+    if (!isLoaded) return;
+
+    try {
+      const completeSignUp = await signUp.attemptEmailAddressVerification({
+        code: verification.code,
+      });
+
+      if (completeSignUp.status === "complete") {
+        // TODO: Create a database user
+
+        await setActive({ session: completeSignUp.createdSessionId });
+        setVerification((prevVerification) => ({
+          ...prevVerification,
+          state: "success",
+        }));
+      } else {
+        setVerification((prevVerification) => ({
+          ...prevVerification,
+          error: "Verification failed.",
+          state: "failed",
+        }));
+        console.error(JSON.stringify(completeSignUp, null, 2));
+      }
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+      setVerification((prevVerification) => ({
+        ...prevVerification,
+        error: err?.errors[0]?.longMessage,
+        state: "failed",
+      }));
+    }
+  };
 
   return (
     <ScrollView className="flex-1 bg-white">
@@ -79,7 +141,7 @@ const SignUp = () => {
             className="mt-6"
           />
 
-          <OAuth />
+          <OAuth title="Sign up with Google" />
 
           <Link
             href="/sign-in"

app/(root)/(tabs)/home.tsx

@@ -1,10 +1,24 @@
+import { SignedIn, SignedOut, useUser } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
 import { Text } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 const Home = () => {
+  const { user } = useUser();
+
   return (
     <SafeAreaView>
-      <Text>Home</Text>
+      <SignedIn>
+        <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
+      </SignedIn>
+      <SignedOut>
+        <Link href="/sign-in">
+          <Text>Sign In</Text>
+        </Link>
+        <Link href="/sign-up">
+          <Text>Sign Up</Text>
+        </Link>
+      </SignedOut>
     </SafeAreaView>
   );
 };

app/_layout.tsx

@@ -1,3 +1,4 @@
+import { ClerkProvider, ClerkLoaded } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
@@ -28,12 +29,20 @@ const RootLayout = () => {
     return null;
   }
 
+  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
+
+  if (!publishableKey) throw new Error("Missing Clerk Publishable Key.");
+
   return (
-    <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="(root)" options={{ headerShown: false }} />
-      <Stack.Screen name="(auth)" options={{ headerShown: false }} />
-    </Stack>
+    <ClerkProvider publishableKey={publishableKey}>
+      <ClerkLoaded>
+        <Stack>
+          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="(root)" options={{ headerShown: false }} />
+          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+        </Stack>
+      </ClerkLoaded>
+    </ClerkProvider>
   );
 };
 

app/index.tsx

@@ -1,6 +1,11 @@
+import { useAuth } from "@clerk/clerk-expo";
 import { Redirect } from "expo-router";
 
 const App = () => {
+  const { isSignedIn } = useAuth();
+
+  if (isSignedIn) return <Redirect href="/(root)/(tabs)/home" />;
+
   return <Redirect href="/(auth)/welcome" />;
 };