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

app/(tabs)/profile.tsx

@@ -1,13 +1,25 @@
+import { useUser } from '@clerk/clerk-react'
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import { useSession } from '../ctx'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { SignOutButton } from '../components/SignOutButton'
 
 export default function PostsScreen() {
-    const { logout } = useSession()
-
+    const user = useUser().user
+    console.log(user?.emailAddresses)
     return (
         <View style={styles.wrapper}>
-            <TouchableOpacity onPress={() => logout()}>Logout</TouchableOpacity>
+            <View>
+                <Image></Image>
+            </View>
+            <View style={styles.nameContainer}>
+                <Text style={styles.text}>
+                    {user?.firstName} {user?.lastName}
+                </Text>
+                <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
+            </View>
+            <View style={styles.buttonLayout}>
+                <SignOutButton></SignOutButton>
+            </View>
         </View>
     )
 }
@@ -17,5 +29,16 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: '#25292e',
         padding: 5
+    },
+    nameContainer: { display: 'flex', alignItems: 'center' },
+    text: {
+        color: 'white',
+        fontSize: 16,
+        marginTop: 6
+    },
+    buttonLayout: {
+        flex: 1,
+        alignItems: 'center',
+        marginTop: 12
     }
 })