@wattsoft/auth-app 1.0.0

package/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

package/app/(app)/(tabs)/_layout.tsx

@@ -0,0 +1,16 @@
+import { Tabs } from "expo-router";
+import React from "react";
+import { StyleSheet } from "react-native";
+
+const Layout = () => {
+  return (
+    <Tabs>
+      <Tabs.Screen name="index" options={{ title: "Home" }} />
+      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
+    </Tabs>
+  );
+};
+
+export default Layout;
+
+const styles = StyleSheet.create({});

package/app/(app)/(tabs)/index.tsx

@@ -0,0 +1,31 @@
+import { useUser } from "@clerk/clerk-expo";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const Index = () => {
+  const { user } = useUser();
+  const fullName =
+    [user?.firstName, user?.lastName].filter(Boolean).join(" ") || "User";
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.welcome}>Welcome, {fullName} 👋</Text>
+    </View>
+  );
+};
+
+export default Index;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f4f6f8",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  welcome: {
+    fontSize: 22,
+    fontWeight: "600",
+    color: "#333",
+  },
+});

package/app/(app)/(tabs)/profile.tsx

@@ -0,0 +1,62 @@
+import { SignOutButton } from "@/components/SignOut";
+import { useUser } from "@clerk/clerk-expo";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const Profile = () => {
+  const { user } = useUser();
+  const email = user?.primaryEmailAddress?.emailAddress;
+  const initials = email ? email[0].toUpperCase() : "?";
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.avatar}>
+        <Text style={styles.avatarText}>{initials}</Text>
+      </View>
+
+      <Text style={styles.name}>{email}</Text>
+      <Text style={styles.label}>Email address</Text>
+
+      <View style={{ width: "100%" }}>
+        <SignOutButton />
+      </View>
+    </View>
+  );
+};
+
+export default Profile;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    alignItems: "center",
+    backgroundColor: "#f8fafc",
+    paddingTop: 60,
+  },
+  avatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "#0a7ea4",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  avatarText: {
+    color: "#fff",
+    fontSize: 32,
+    fontWeight: "bold",
+  },
+  name: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#0f172a",
+    marginBottom: 4,
+  },
+  label: {
+    fontSize: 13,
+    color: "#94a3b8",
+    marginBottom: 32,
+  },
+});

package/app/(app)/_layout.tsx

@@ -0,0 +1,37 @@
+import { useAuth } from "@clerk/clerk-expo";
+import { Stack } from "expo-router";
+import React from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+
+const Layout = () => {
+  const { isLoaded, isSignedIn } = useAuth();
+
+  if (!isLoaded) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" color="blue" />
+      </View>
+    );
+  }
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Protected guard={isSignedIn}>
+        <Stack.Screen name="(tabs)" />
+      </Stack.Protected>
+      <Stack.Protected guard={!isSignedIn}>
+        <Stack.Screen name="sign-in" />
+        <Stack.Screen name="sign-up" />
+      </Stack.Protected>
+    </Stack>
+  );
+};
+
+export default Layout;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/app/(app)/sign-in.tsx

@@ -0,0 +1,230 @@
+import BiometricSignIn, {
+  saveCredentialsForBiometric,
+} from "@/components/BiometricSignIn";
+import GoogleSignIn from "@/components/GoogleSignIn";
+import { SignInWithPasskeyButton } from "@/components/Passkey";
+import { useSignIn } from "@clerk/clerk-expo";
+import type { EmailCodeFactor } from "@clerk/types";
+import { Link, useRouter } from "expo-router";
+import * as React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function Page() {
+  const { signIn, setActive, isLoaded } = useSignIn();
+  const router = useRouter();
+
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [showEmailCode, setShowEmailCode] = React.useState(false);
+
+  const onSignInPress = React.useCallback(async () => {
+    if (!isLoaded) return;
+
+    try {
+      const signInAttempt = await signIn.create({
+        identifier: emailAddress,
+        password,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({
+          session: signInAttempt.createdSessionId,
+        });
+        await saveCredentialsForBiometric(emailAddress, password);
+        router.replace("/");
+      } else if (signInAttempt.status === "needs_second_factor") {
+        const emailCodeFactor = signInAttempt.supportedSecondFactors?.find(
+          (factor): factor is EmailCodeFactor =>
+            factor.strategy === "email_code",
+        );
+
+        if (emailCodeFactor) {
+          await signIn.prepareSecondFactor({
+            strategy: "email_code",
+            emailAddressId: emailCodeFactor.emailAddressId,
+          });
+          setShowEmailCode(true);
+        }
+      } else {
+        console.error(JSON.stringify(signInAttempt, null, 2));
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  }, [isLoaded, signIn, setActive, router, emailAddress, password]);
+
+  const onVerifyPress = React.useCallback(async () => {
+    if (!isLoaded) return;
+
+    try {
+      const signInAttempt = await signIn.attemptSecondFactor({
+        strategy: "email_code",
+        code,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({
+          session: signInAttempt.createdSessionId,
+        });
+        router.replace("/");
+      } else {
+        console.error(JSON.stringify(signInAttempt, null, 2));
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  }, [isLoaded, signIn, setActive, router, code]);
+
+  if (showEmailCode) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your email</Text>
+        <Text style={styles.description}>
+          A verification code has been sent to your email.
+        </Text>
+
+        <TextInput
+          style={styles.input}
+          value={code}
+          placeholder="Enter verification code"
+          placeholderTextColor="#666"
+          onChangeText={setCode}
+          keyboardType="numeric"
+        />
+
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            pressed && styles.buttonPressed,
+          ]}
+          onPress={onVerifyPress}
+        >
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Sign in</Text>
+
+      <Text style={styles.label}>Email address</Text>
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        value={emailAddress}
+        placeholder="Enter email"
+        placeholderTextColor="#666"
+        onChangeText={setEmailAddress}
+        keyboardType="email-address"
+      />
+
+      <Text style={styles.label}>Password</Text>
+      <TextInput
+        style={styles.input}
+        value={password}
+        placeholder="Enter password"
+        placeholderTextColor="#666"
+        secureTextEntry
+        onChangeText={setPassword}
+      />
+
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          (!emailAddress || !password) && styles.buttonDisabled,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={onSignInPress}
+        disabled={!emailAddress || !password}
+      >
+        <Text style={styles.buttonText}>Sign in</Text>
+      </Pressable>
+
+      <View style={styles.linkContainer}>
+        <Text>Don't have an account? </Text>
+        <Link href="/sign-up">
+          <Text style={styles.link}>Sign up</Text>
+        </Link>
+      </View>
+      <View style={styles.orContainer}>
+        <Text style={styles.orText}>OR</Text>
+      </View>
+      <GoogleSignIn />
+      <BiometricSignIn />
+      <View>
+        <SignInWithPasskeyButton />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  orContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginVertical: 8,
+  },
+  orText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+    gap: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 14,
+    marginBottom: 16,
+    opacity: 0.8,
+  },
+  label: {
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 12,
+    alignItems: "center",
+  },
+  link: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+});

package/app/(app)/sign-up.tsx

@@ -0,0 +1,172 @@
+import { useSignUp } from "@clerk/clerk-expo";
+import { Link, useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+
+export default function Page() {
+  const { isLoaded, signUp, setActive } = useSignUp();
+  const router = useRouter();
+
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [pendingVerification, setPendingVerification] = React.useState(false);
+  const [code, setCode] = React.useState("");
+
+  const onSignUpPress = async () => {
+    if (!isLoaded) return;
+
+    try {
+      await signUp.create({
+        emailAddress,
+        password,
+      });
+
+      await signUp.prepareEmailAddressVerification({
+        strategy: "email_code",
+      });
+
+      setPendingVerification(true);
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  };
+
+  const onVerifyPress = async () => {
+    if (!isLoaded) return;
+
+    try {
+      const signUpAttempt = await signUp.attemptEmailAddressVerification({
+        code,
+      });
+
+      if (signUpAttempt.status === "complete") {
+        await setActive({
+          session: signUpAttempt.createdSessionId,
+        });
+
+        router.replace("/");
+      } else {
+        console.error(JSON.stringify(signUpAttempt, null, 2));
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  };
+
+  if (pendingVerification) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your email</Text>
+        <Text style={styles.description}>
+          A verification code has been sent to your email.
+        </Text>
+
+        <TextInput
+          style={styles.input}
+          value={code}
+          placeholder="Enter verification code"
+          onChangeText={setCode}
+          keyboardType="numeric"
+        />
+
+        <Pressable style={styles.button} onPress={onVerifyPress}>
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Sign Up</Text>
+
+      <Text style={styles.label}>Email</Text>
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        value={emailAddress}
+        placeholder="Enter email"
+        onChangeText={setEmailAddress}
+        keyboardType="email-address"
+      />
+
+      <Text style={styles.label}>Password</Text>
+      <TextInput
+        style={styles.input}
+        value={password}
+        placeholder="Enter password"
+        secureTextEntry
+        onChangeText={setPassword}
+      />
+
+      <Pressable
+        style={[
+          styles.button,
+          (!emailAddress || !password) && styles.buttonDisabled,
+        ]}
+        onPress={onSignUpPress}
+        disabled={!emailAddress || !password}
+      >
+        <Text style={styles.buttonText}>Continue</Text>
+      </Pressable>
+
+      <View style={styles.linkContainer}>
+        <Text>Already have an account? </Text>
+        <Link href="/sign-in">
+          <Text style={styles.linkText}>Sign In</Text>
+        </Link>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 20,
+  },
+  description: {
+    marginBottom: 20,
+    color: "gray",
+  },
+  label: {
+    fontWeight: "600",
+    marginTop: 10,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 5,
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    padding: 14,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 20,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    marginTop: 20,
+    justifyContent: "center",
+  },
+  linkText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+});

package/app/_layout.tsx

@@ -0,0 +1,14 @@
+import { ClerkProvider } from "@clerk/clerk-expo";
+import { tokenCache } from "@clerk/clerk-expo/token-cache";
+import { Slot } from "expo-router";
+
+export default function Layout() {
+  return (
+    <ClerkProvider
+      tokenCache={tokenCache}
+      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
+    >
+      <Slot />
+    </ClerkProvider>
+  );
+}

package/app.json

@@ -0,0 +1,49 @@
+{
+  "expo": {
+    "name": "auth-app",
+    "slug": "auth-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "authapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "com.anonymous.authapp"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

package/components/BiometricSignIn.tsx

@@ -0,0 +1,104 @@
+import { useSignIn } from "@clerk/clerk-expo";
+import * as LocalAuthentication from "expo-local-authentication";
+import { useRouter } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import React from "react";
+import { Alert, Pressable, StyleSheet, Text } from "react-native";
+
+const CREDENTIALS_KEY = "biometric_credentials";
+
+// Call this after a successful normal sign-in to save credentials
+export async function saveCredentialsForBiometric(
+  email: string,
+  password: string,
+) {
+  await SecureStore.setItemAsync(
+    CREDENTIALS_KEY,
+    JSON.stringify({ email, password }),
+  );
+}
+
+export default function BiometricSignIn() {
+  const { signIn, setActive, isLoaded } = useSignIn();
+  const router = useRouter();
+
+  const handleBiometricAuth = async () => {
+    if (!isLoaded) return;
+
+    try {
+      // 1. Check hardware support
+      const compatible = await LocalAuthentication.hasHardwareAsync();
+      if (!compatible) {
+        Alert.alert("Error", "Biometric hardware not available");
+        return;
+      }
+
+      // 2. Check enrollment
+      const enrolled = await LocalAuthentication.isEnrolledAsync();
+      if (!enrolled) {
+        Alert.alert("Error", "No biometrics enrolled on this device");
+        return;
+      }
+
+      // 3. Check saved credentials
+      const stored = await SecureStore.getItemAsync(CREDENTIALS_KEY);
+      if (!stored) {
+        Alert.alert(
+          "No saved credentials",
+          "Please sign in with email and password first to enable biometric sign-in.",
+        );
+        return;
+      }
+
+      // 4. Run biometric prompt
+      const result = await LocalAuthentication.authenticateAsync({
+        promptMessage: "Authenticate to sign in",
+        fallbackLabel: "Use Passcode",
+      });
+
+      if (!result.success) {
+        Alert.alert("Failed", "Biometric authentication failed");
+        return;
+      }
+
+      // 5. Sign into Clerk with saved credentials
+      const { email, password } = JSON.parse(stored);
+
+      const signInAttempt = await signIn.create({
+        identifier: email,
+        password,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({ session: signInAttempt.createdSessionId });
+        router.replace("/");
+      } else {
+        Alert.alert("Error", "Sign in incomplete. Please sign in manually.");
+      }
+    } catch (error) {
+      Alert.alert("Error", "Something went wrong");
+      console.error(error);
+    }
+  };
+
+  return (
+    <Pressable style={styles.button} onPress={handleBiometricAuth}>
+      <Text style={styles.buttonText}>Sign in with Fingerprint</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 12,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});

package/components/GoogleSignIn.tsx

@@ -0,0 +1,81 @@
+import { useSSO } from "@clerk/clerk-expo";
+import * as AuthSession from "expo-auth-session";
+import { useRouter } from "expo-router";
+import * as WebBrowser from "expo-web-browser";
+import React, { useCallback, useEffect } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+
+// Preload browser for Android
+export const useWarmUpBrowser = () => {
+  useEffect(() => {
+    if (Platform.OS !== "android") return;
+    void WebBrowser.warmUpAsync();
+
+    return () => {
+      void WebBrowser.coolDownAsync();
+    };
+  }, []);
+};
+
+WebBrowser.maybeCompleteAuthSession();
+
+export default function GoogleSignIn() {
+  useWarmUpBrowser();
+
+  const router = useRouter();
+  const { startSSOFlow } = useSSO();
+
+  const onPress = useCallback(async () => {
+    try {
+      const { createdSessionId, setActive } = await startSSOFlow({
+        strategy: "oauth_google",
+        redirectUrl: AuthSession.makeRedirectUri(),
+      });
+
+      if (createdSessionId) {
+        await setActive?.({
+          session: createdSessionId,
+        });
+
+        // router.replace("/");
+      }
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  }, [startSSOFlow, router]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={onPress}
+      >
+        <Text style={styles.buttonText}>Sign in with Google</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});

package/components/Passkey.tsx

@@ -0,0 +1,101 @@
+import { useSignIn } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { Alert, Pressable, StyleSheet, Text } from "react-native";
+
+export function SignInWithPasskeyButton() {
+  const { signIn, setActive } = useSignIn();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const signInWithPasskey = async () => {
+    // 'discoverable' lets the user choose a passkey
+    // without auto-filling any of the options
+    try {
+      setIsLoading(true);
+      const signInAttempt = await signIn?.authenticateWithPasskey({
+        flow: "discoverable",
+      });
+
+      if (signInAttempt?.status === "complete") {
+        await setActive?.({
+          session: signInAttempt.createdSessionId,
+          redirectUrl: "/",
+          navigate: async ({ session }) => {
+            if (session?.currentTask) {
+              // Handle pending session tasks
+              // See https://clerk.com/docs/guides/development/custom-flows/authentication/session-tasks
+              console.log(session?.currentTask);
+              return;
+            }
+
+            // router.push("/(tabs)");
+          },
+        });
+      } else {
+        // If the status is not complete, check why. User may need to
+        // complete further steps.
+        console.error(JSON.stringify(signInAttempt, null, 2));
+        Alert.alert(
+          "Sign In Incomplete",
+          "Please complete all required steps.",
+        );
+      }
+    } catch (err: any) {
+      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
+      // for more info on error handling
+      console.error("Passkey Error:", err);
+      console.error("Error Details:", {
+        message: err?.message,
+        code: err?.code,
+        errors: err?.errors,
+        clerkError: err?.clerkError,
+      });
+
+      const errorMessage =
+        err?.errors?.[0]?.longMessage ||
+        err?.message ||
+        "Passkey authentication failed. This feature may not be supported on your device.";
+
+      Alert.alert("Authentication Error", errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.button,
+        pressed && styles.buttonPressed,
+        isLoading && styles.buttonDisabled,
+      ]}
+      //   onPress={signInWithPasskey}
+      disabled={isLoading}
+    >
+      <Text style={styles.buttonText}>
+        {isLoading ? "Authenticating..." : "Sign in with a passkey"}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});

package/components/SignOut.tsx

@@ -0,0 +1,82 @@
+import { useClerk } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import { Alert, Pressable, StyleSheet, Text } from "react-native";
+
+export const SignOutButton = () => {
+  const { signOut } = useClerk();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    try {
+      const biometricEnabled =
+        await SecureStore.getItemAsync("biometricEnabled");
+
+      if (biometricEnabled === "true") {
+        // Lock the app without signing out
+        Alert.alert("Lock App", "Are you sure you want to lock the app?", [
+          {
+            text: "Cancel",
+            style: "cancel",
+          },
+          {
+            text: "Lock",
+            onPress: () => {
+              router.replace("/sign-in"); // Just lock, session remains
+            },
+          },
+        ]);
+      } else {
+        // Full sign out
+        Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+          {
+            text: "Cancel",
+            style: "cancel",
+          },
+          {
+            text: "Sign Out",
+            style: "destructive",
+            onPress: () => {
+              signOut()
+                .then(() => {
+                  router.replace("/sign-in");
+                })
+                .catch((err) => {
+                  console.error("Sign out error:", err);
+                });
+            },
+          },
+        ]);
+      }
+    } catch (err) {
+      console.error("Error checking biometric status:", err);
+    }
+  };
+
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
+      onPress={handleSignOut}
+    >
+      <Text style={styles.buttonText}>Sign out</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});

package/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);

package/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@wattsoft/auth-app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@clerk/clerk-expo": "^2.19.25",
+    "@expo/vector-icons": "^15.0.3",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.33",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-local-authentication": "~17.0.8",
+    "expo-router": "~6.0.23",
+    "expo-secure-store": "^15.0.8",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}