matches docs quickstart

.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=

.gitignore

@@ -9,6 +9,13 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.env
 
 # macOS
 .DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

app/(auth)/_layout.tsx

@@ -5,7 +5,7 @@ export default function UnAuthenticatedLayout() {
   const { isSignedIn } = useAuth();
 
   if (isSignedIn) {
-    return <Redirect href={"/dashboard"} />;
+    return <Redirect href={"/"} />;
   }
 
   return <Stack />;

app/(auth)/sign-in.tsx

@@ -1,7 +1,7 @@
-import { useSignIn } from "@clerk/clerk-expo";
-import { Link, Stack } from "expo-router";
-import { Text, TextInput, TouchableOpacity, View } from "react-native";
 import React from "react";
+import { useSignIn } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import { Text, TextInput, Button, View, Pressable } from "react-native";
 
 export default function Page() {
   const { signIn, setActive, isLoaded } = useSignIn();
@@ -20,53 +20,35 @@ export default function Page() {
         password,
       });
 
+      console.log(completeSignIn);
+
       await setActive({ session: completeSignIn.createdSessionId });
     } catch (err: any) {}
   }, [isLoaded, emailAddress, password]);
 
   return (
     <View>
-      <Stack.Screen
-        options={{
-          title: "Sign In",
-        }}
+      <TextInput
+        autoCapitalize="none"
+        value={emailAddress}
+        placeholder="Email..."
+        onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
       />
-      <View>
-        <Link href="/">
-          <Text>Home</Text>
-        </Link>
-      </View>
-      <View>
-        <TextInput
-          autoCapitalize="none"
-          value={emailAddress}
-          placeholder="Email..."
-          placeholderTextColor="#000"
-          onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
-        />
-      </View>
 
-      <View>
-        <TextInput
-          value={password}
-          placeholder="Password..."
-          placeholderTextColor="#000"
-          secureTextEntry={true}
-          onChangeText={(password) => setPassword(password)}
-        />
-      </View>
+      <TextInput
+        value={password}
+        placeholder="Password..."
+        secureTextEntry={true}
+        onChangeText={(password) => setPassword(password)}
+      />
 
-      <TouchableOpacity onPress={onSignInPress}>
-        <Text>Sign in</Text>
-      </TouchableOpacity>
+      <Button title="Sign In" onPress={onSignInPress} />
 
       <View>
-        <Text>Have an account?</Text>
+        <Text>Don't have an account?</Text>
 
-        <Link href="/sign-up" asChild>
-          <TouchableOpacity>
-            <Text>Sign up</Text>
-          </TouchableOpacity>
+        <Link href="/sign-up">
+          <Text>Sign up</Text>
         </Link>
       </View>
     </View>

app/(auth)/sign-up.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { Text, TextInput, TouchableOpacity, View } from "react-native";
+import { TextInput, Button, View } from "react-native";
 import { useSignUp } from "@clerk/clerk-expo";
-import { Link } from "expo-router";
 
 export default function SignUpScreen() {
   const { isLoaded, signUp, setActive } = useSignUp();
@@ -13,7 +12,7 @@ export default function SignUpScreen() {
   const [pendingVerification, setPendingVerification] = React.useState(false);
   const [code, setCode] = React.useState("");
 
-  // start the sign up process.
+  // Start the sign up process.
   const onSignUpPress = async () => {
     if (!isLoaded) {
       return;
@@ -37,7 +36,7 @@ export default function SignUpScreen() {
     }
   };
 
-  // This verifies the user using email code that is delivered.
+  // Try to verify the user with the provided email code.
   const onPressVerify = async () => {
     if (!isLoaded) {
       return;
@@ -57,65 +56,48 @@ export default function SignUpScreen() {
   return (
     <View>
       {!pendingVerification && (
-        <View>
-          <View>
-            <Link href="/">
-              <Text>Home</Text>
-            </Link>
-          </View>
-          <View>
-            <TextInput
-              autoCapitalize="none"
-              value={firstName}
-              placeholder="First Name..."
-              onChangeText={(firstName) => setFirstName(firstName)}
-            />
-          </View>
-          <View>
-            <TextInput
-              autoCapitalize="none"
-              value={lastName}
-              placeholder="Last Name..."
-              onChangeText={(lastName) => setLastName(lastName)}
-            />
-          </View>
-          <View>
-            <TextInput
-              autoCapitalize="none"
-              value={emailAddress}
-              placeholder="Email..."
-              onChangeText={(email) => setEmailAddress(email)}
-            />
-          </View>
+        <>
+          <TextInput
+            autoCapitalize="none"
+            value={firstName}
+            placeholder="First Name..."
+            onChangeText={(firstName) => setFirstName(firstName)}
+          />
 
-          <View>
-            <TextInput
-              value={password}
-              placeholder="Password..."
-              placeholderTextColor="#000"
-              secureTextEntry={true}
-              onChangeText={(password) => setPassword(password)}
-            />
-          </View>
+          <TextInput
+            autoCapitalize="none"
+            value={lastName}
+            placeholder="Last Name..."
+            onChangeText={(lastName) => setLastName(lastName)}
+          />
 
-          <TouchableOpacity onPress={onSignUpPress}>
-            <Text>Sign up</Text>
-          </TouchableOpacity>
-        </View>
+          <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} />
+        </>
       )}
       {pendingVerification && (
-        <View>
-          <View>
-            <TextInput
-              value={code}
-              placeholder="Code..."
-              onChangeText={(code) => setCode(code)}
-            />
-          </View>
-          <TouchableOpacity onPress={onPressVerify}>
-            <Text>Verify Email</Text>
-          </TouchableOpacity>
-        </View>
+        <>
+          <TextInput
+            value={code}
+            placeholder="Code..."
+            onChangeText={(code) => setCode(code)}
+          />
+
+          <Button title="Verify Email" onPress={onPressVerify} />
+        </>
       )}
     </View>
   );

app/(home)/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function HomeLayout() {
+  return <Stack />;
+}

app/(home)/index.tsx

@@ -0,0 +1,26 @@
+import { SignedIn, SignedOut, useUser } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function Page() {
+  const { user } = useUser();
+
+  return (
+    <View>
+      <SignedIn>
+        <Text>Welcome, {user?.emailAddresses[0].emailAddress}</Text>
+      </SignedIn>
+      <SignedOut>
+        <View>
+          <Text>Clerk 🤝 Expo</Text>
+          <Link href="/sign-in">
+            <Text>Sign In</Text>
+          </Link>
+          <Link href="/sign-up">
+            <Text>Sign Up</Text>
+          </Link>
+        </View>
+      </SignedOut>
+    </View>
+  );
+}

app/_layout.tsx

@@ -1,8 +1,9 @@
 import { useFonts } from "expo-font";
-import { Stack } from "expo-router";
+import { Slot } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
-import { Clerk, ClerkProvider } from "@clerk/clerk-expo";
+import { ClerkProvider } from "@clerk/clerk-expo";
+import { tokenCache } from "@/cache";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -24,9 +25,11 @@ export default function RootLayout() {
     return null;
   }
 
+  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
+
   return (
-    <ClerkProvider publishableKey={publishableKey}>
-      <Stack></Stack>
+    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+      <Slot />
     </ClerkProvider>
   );
 }

cache.ts

@@ -0,0 +1,31 @@
+import * as SecureStore from "expo-secure-store";
+import { Platform } from "react-native";
+import { TokenCache } from "@clerk/clerk-expo/dist/cache";
+
+const createTokenCache = (): TokenCache => {
+  return {
+    getToken: async (key: string) => {
+      try {
+        const item = await SecureStore.getItemAsync(key);
+        if (item) {
+          console.log(`${key} was used 🔐 \n`);
+        } else {
+          console.log("No values stored under key: " + key);
+        }
+        return item;
+      } catch (error) {
+        console.error("secure store get item error: ", error);
+        await SecureStore.deleteItemAsync(key);
+        return null;
+      }
+    },
+    saveToken: (key: string, token: string) => {
+      return SecureStore.setItemAsync(key, token);
+    },
+  };
+};
+
+// SecureStore is not supported on the web
+// https://github.com/expo/expo/issues/7744#issuecomment-611093485
+export const tokenCache =
+  Platform.OS !== "web" ? createTokenCache() : undefined;