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

app/(auth)/_layout.tsx

@@ -0,0 +1,12 @@
+import { useAuth } from '@clerk/clerk-expo'
+import { Redirect, Stack } from 'expo-router'
+
+export default function AuthRoutesLayout() {
+    const { isSignedIn } = useAuth()
+
+    if (isSignedIn) {
+        return <Redirect href={'/'} />
+    }
+
+    return <Stack screenOptions={{ headerShown: false }} />
+}

app/(auth)/sign-in.tsx

@@ -0,0 +1,31 @@
+import { SignIn } from '@clerk/clerk-react'
+import { dark } from '@clerk/themes'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default function SignInScreen() {
+    return (
+        <View style={styles.container}>
+            <SignIn
+                appearance={{
+                    theme: dark,
+                    variables: {
+                        colorPrimary: '#747b83ff',
+                        colorBackground: '#25292e',
+                        colorInput: '#383e46ff'
+                    }
+                }}
+                signUpUrl='/sign-up'
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 5,
+        alignItems: 'center'
+    }
+})

app/(auth)/sign-up.tsx

@@ -0,0 +1,31 @@
+import { SignUp } from '@clerk/clerk-expo/web'
+import { dark } from '@clerk/themes'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default function SignUpScreen() {
+    return (
+        <View style={styles.container}>
+            <SignUp
+                appearance={{
+                    theme: dark,
+                    variables: {
+                        colorPrimary: '#747b83ff',
+                        colorBackground: '#25292e',
+                        colorInput: '#383e46ff'
+                    }
+                }}
+                signInUrl='/sign-in'
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 5,
+        alignItems: 'center'
+    }
+})