Add Sign in with Apple sorta

app/(tabs)/_layout.tsx

@@ -37,16 +37,14 @@ const TabLayout = () => {
         name='index'
         options={{
           title: 'Home',
-          tabBarIcon: ({ color }) =>
-          <IconSymbol size={28} name='house.fill' color={color} />,
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name='house.fill' color={color} />,
         }}
       />
       <Tabs.Screen
         name='settings'
         options={{
           title: 'Settings',
-          tabBarIcon: ({ color }) =>
-            <IconSymbol size={28} name='gearshape.fill' color={color} />,
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name='gearshape.fill' color={color} />,
         }}
       />
     </Tabs>

app/(tabs)/index.tsx

@@ -1,23 +1,20 @@
 import { Image, StyleSheet, Platform } from 'react-native';
 import ParallaxScrollView from '@/components/default/ParallaxScrollView';
-import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme';
 
 const HomeScreen = () => {
   return (
     <ParallaxScrollView
       headerImage={
-        <Image
-          source={require('@/assets/images/tech_tracker_logo.png')}
-          style={styles.reactLogo}
-        />
+        <Image source={require('@/assets/images/tech_tracker_logo.png')} style={styles.reactLogo} />
       }
       headerTitle={
-        <ThemedText type='title' style={styles.headerTitle}>Tech Tracker</ThemedText>
+        <ThemedText type='title' style={styles.headerTitle}>
+          Tech Tracker
+        </ThemedText>
       }
     >
-      <ThemedView style={styles.titleContainer}>
-
-      </ThemedView>
+      <ThemedView style={styles.titleContainer}></ThemedView>
     </ParallaxScrollView>
   );
 };

app/(tabs)/settings.tsx

@@ -1,9 +1,8 @@
 import { StyleSheet, Image, Platform } from 'react-native';
-import { Collapsible } from '@/components/default/Collapsible';
-import { ExternalLink } from '@/components/default/ExternalLink';
 import ParallaxScrollView from '@/components/default/ParallaxScrollView';
-import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import Logout_Button from '@/components/auth/Logout_Button';
 
 const TabTwoScreen = () => {
   return (
@@ -17,6 +16,7 @@ const TabTwoScreen = () => {
         </ThemedText>
       }
     >
+      <Logout_Button />
     </ParallaxScrollView>
   );
 };

app/+not-found.tsx

@@ -1,7 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
-import { ThemedText, ThemedView } from '@/components/theme/Theme';
-import TextButton from '@/components/theme/buttons/TextButton';
+import { ThemedText, ThemedView, ThemedTextButton } from '@/components/theme';
 
 const NotFoundScreen = () => {
   return (
@@ -10,7 +9,7 @@ const NotFoundScreen = () => {
       <ThemedView style={styles.container}>
         <ThemedText type='title'>This screen doesn't exist.</ThemedText>
         <Link href='/'>
-          <TextButton width={200} height={45} text='Go to home screen' fontSize={24} />
+          <ThemedTextButton width={200} height={45} text='Go to home screen' fontSize={24} />
         </Link>
       </ThemedView>
     </>

app/_layout.tsx

@@ -3,19 +3,36 @@ import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import 'react-native-reanimated';
+import { ThemedView } from '@/components/theme';
+import { Session } from '@supabase/supabase-js';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { supabase } from '@/lib/supabase';
+import LoginPage from '@/components/auth/Login';
+import Account from '@/components/Account';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 const RootLayout = () => {
   const scheme = useColorScheme() ?? 'dark';
+  const [session, setSession] = useState<Session | null>(null);
+
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
 
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+    });
+
+    supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+  }, []);
+
   useEffect(() => {
     if (loaded) {
       SplashScreen.hideAsync();
@@ -28,12 +45,19 @@ const RootLayout = () => {
 
   return (
     <ThemeProvider value={scheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
-        <Stack.Screen name='+not-found' />
-      </Stack>
+      {session && session.user ? (
+        <Stack>
+          <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
+          <Stack.Screen name='+not-found' />
+        </Stack>
+      ) : (
+        <ThemedView style={{ flex: 1 }}>
+          <LoginPage />
+        </ThemedView>
+      )}
       <StatusBar style='auto' />
     </ThemeProvider>
   );
 };
+
 export default RootLayout;