clerkauth

implemented, sync with db to be added

apps/mobile/src/app/_layout.tsx

@@ -1,15 +1,52 @@
-import { AuthProvider } from '@/contexts/AuthContext'
-import { Stack } from 'expo-router'
-import { View, Text } from 'react-native'
+import { ClerkProvider, ClerkLoaded } from "@clerk/clerk-expo";
+import { Stack } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import { View, Text } from "react-native";
+
+// Token cache for Clerk
+const tokenCache = {
+  async getToken(key: string) {
+    try {
+      return SecureStore.getItemAsync(key);
+    } catch (err) {
+      console.error("Error getting token:", err);
+      return null;
+    }
+  },
+  async saveToken(key: string, value: string) {
+    try {
+      return SecureStore.setItemAsync(key, value);
+    } catch (err) {
+      console.error("Error saving token:", err);
+    }
+  },
+};
 
 export default function RootLayout() {
+  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+  if (!publishableKey) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>Missing Clerk Publishable Key</Text>
+        <Text
+          style={{ marginTop: 8, textAlign: "center", paddingHorizontal: 20 }}
+        >
+          Please add EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY to your .env file
+        </Text>
+      </View>
+    );
+  }
+
   return (
-    <AuthProvider>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="login" options={{ headerShown: false }} />
-        <Stack.Screen name="register" options={{ headerShown: false }} />
-      </Stack>
-    </AuthProvider>
-  )
-}
+    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+      <ClerkLoaded>
+        <Stack>
+          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="welcome" options={{ headerShown: false }} />
+        </Stack>
+      </ClerkLoaded>
+    </ClerkProvider>
+  );
+}