updating to use clerk auth with new routing to signin page by default

app/_layout.tsx

@@ -1,29 +1,27 @@
+import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo'
+import { tokenCache } from '@clerk/clerk-expo/token-cache'
 import { Stack } from 'expo-router'
-import { SessionProvider, useSession } from './ctx'
-import { SplashScreenController } from './splash'
+import React from 'react'
 
 export default function Root() {
     // Set up the auth context and render our layout inside of it.
     return (
-        <SessionProvider>
-            <SplashScreenController />
+        <ClerkProvider tokenCache={tokenCache}>
             <RootNavigator />
-        </SessionProvider>
+        </ClerkProvider>
     )
 }
 
 // Separate this into a new component so it can access the SessionProvider context later
 function RootNavigator() {
-    const { session } = useSession()
     return (
-        <Stack>
-            <Stack.Protected guard={!!session}>
+        <Stack screenOptions={{ headerShown: false }}>
+            <SignedIn>
                 <Stack.Screen options={{ headerShown: false }} name='(tabs)' />
-            </Stack.Protected>
-
-            <Stack.Protected guard={!session}>
-                <Stack.Screen options={{ headerShown: false }} name='login' />
-            </Stack.Protected>
+            </SignedIn>
+            <SignedOut>
+                <Stack.Screen options={{ headerShown: false }} name='(auth)' />
+            </SignedOut>
         </Stack>
     )
 }