matched quickstart code more exactly

clerk · Jun 25, 2024 · a7ccf9e · a7ccf9e
1 parent 27b1bb9
commit a7ccf9e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 40 deletions.
diff --git a/app/(auth)/sign-in.tsx b/app/(auth)/sign-in.tsx
@@ -1,10 +1,11 @@
-import React from "react";
 import { useSignIn } from "@clerk/clerk-expo";
-import { Link } from "expo-router";
-import { Text, TextInput, Button, View, Pressable } from "react-native";
+import { Link, useRouter } from "expo-router";
+import { Text, TextInput, Button, View } from "react-native";
+import React from "react";
 
 export default function Page() {
   const { signIn, setActive, isLoaded } = useSignIn();
+  const router = useRouter();
 
   const [emailAddress, setEmailAddress] = React.useState("");
   const [password, setPassword] = React.useState("");
@@ -15,15 +16,22 @@ export default function Page() {
     }
 
     try {
-      const completeSignIn = await signIn.create({
+      const signInAttempt = await signIn.create({
         identifier: emailAddress,
         password,
       });
 
-      console.log(completeSignIn);
-
-      await setActive({ session: completeSignIn.createdSessionId });
-    } catch (err: any) {}
+      if (signInAttempt.status === "complete") {
+        await setActive({ session: signInAttempt.createdSessionId });
+        router.replace("/");
+      } else {
+        // See https://clerk.com/docs/custom-flows/error-handling
+        // for more info on error handling
+        console.error(JSON.stringify(signInAttempt, null, 2));
+      }
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+    }
   }, [isLoaded, emailAddress, password]);
 
   return (
@@ -34,19 +42,15 @@ export default function Page() {
         placeholder="Email..."
         onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
       />
-
       <TextInput
         value={password}
         placeholder="Password..."
         secureTextEntry={true}
         onChangeText={(password) => setPassword(password)}
       />
-
       <Button title="Sign In" onPress={onSignInPress} />
-
       <View>
         <Text>Don't have an account?</Text>
-
         <Link href="/sign-up">
           <Text>Sign up</Text>
         </Link>

diff --git a/app/(auth)/sign-up.tsx b/app/(auth)/sign-up.tsx
@@ -1,42 +1,38 @@
 import * as React from "react";
 import { TextInput, Button, View } from "react-native";
 import { useSignUp } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
 
 export default function SignUpScreen() {
   const { isLoaded, signUp, setActive } = useSignUp();
+  const router = useRouter();
 
-  const [firstName, setFirstName] = React.useState("");
-  const [lastName, setLastName] = React.useState("");
   const [emailAddress, setEmailAddress] = React.useState("");
   const [password, setPassword] = React.useState("");
   const [pendingVerification, setPendingVerification] = React.useState(false);
   const [code, setCode] = React.useState("");
 
-  // Start the sign up process.
   const onSignUpPress = async () => {
     if (!isLoaded) {
       return;
     }
 
     try {
       await signUp.create({
-        firstName,
-        lastName,
         emailAddress,
         password,
       });
 
-      // send the email.
       await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
 
-      // change the UI to our pending section.
       setPendingVerification(true);
     } catch (err: any) {
+      // See https://clerk.com/docs/custom-flows/error-handling
+      // for more info on error handling
       console.error(JSON.stringify(err, null, 2));
     }
   };
 
-  // Try to verify the user with the provided email code.
   const onPressVerify = async () => {
     if (!isLoaded) {
       return;
@@ -47,8 +43,15 @@ export default function SignUpScreen() {
         code,
       });
 
-      await setActive({ session: completeSignUp.createdSessionId });
+      if (completeSignUp.status === "complete") {
+        await setActive({ session: completeSignUp.createdSessionId });
+        router.replace("/");
+      } else {
+        console.error(JSON.stringify(completeSignUp, null, 2));
+      }
     } catch (err: any) {
+      // See https://clerk.com/docs/custom-flows/error-handling
+      // for more info on error handling
       console.error(JSON.stringify(err, null, 2));
     }
   };
@@ -57,34 +60,18 @@ export default function SignUpScreen() {
     <View>
       {!pendingVerification && (
         <>
-          <TextInput
-            autoCapitalize="none"
-            value={firstName}
-            placeholder="First Name..."
-            onChangeText={(firstName) => setFirstName(firstName)}
-          />
-
-          <TextInput
-            autoCapitalize="none"
-            value={lastName}
-            placeholder="Last Name..."
-            onChangeText={(lastName) => setLastName(lastName)}
-          />
-
           <TextInput
             autoCapitalize="none"
             value={emailAddress}
             placeholder="Email..."
             onChangeText={(email) => setEmailAddress(email)}
           />
-
           <TextInput
             value={password}
             placeholder="Password..."
             secureTextEntry={true}
             onChangeText={(password) => setPassword(password)}
           />
-
           <Button title="Sign Up" onPress={onSignUpPress} />
         </>
       )}
@@ -95,7 +82,6 @@ export default function SignUpScreen() {
             placeholder="Code..."
             onChangeText={(code) => setCode(code)}
           />
-
           <Button title="Verify Email" onPress={onPressVerify} />
         </>
       )}

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -8,8 +8,6 @@ import { tokenCache } from "@/cache";
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
-const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
-
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -27,6 +25,12 @@ export default function RootLayout() {
 
   const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
 
+  if (!publishableKey) {
+    throw new Error(
+      "Missing Publishable Key. Please set EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in your .env"
+    );
+  }
+
   return (
     <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
       <Slot />