[nav] Refactor auth to follow design user flows

src/app/auth/_layout.tsx

@@ -5,6 +5,7 @@ function StackLayout() {
     <Stack>
       <Stack.Screen name="index" options={{ headerShown: false }} />
       <Stack.Screen name="signup" options={{ headerShown: false }} />
+      <Stack.Screen name="login" options={{ headerShown: false }} />
       <Stack.Screen name="onboarding" options={{ headerShown: false }} />
     </Stack>
   );

src/app/auth/login.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Redirect, Link } from 'expo-router';
+import { Alert, View } from 'react-native';
+import { Button, Input } from 'react-native-elements';
+import { useSession } from '../../utils/AuthContext';
+import globalStyles from '../../styles/globalStyles';
+
+function LoginScreen() {
+  const sessionHandler = useSession();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  if (sessionHandler.session) {
+    return <Redirect href="/home" />;
+  }
+
+  const signInWithEmail = async () => {
+    setLoading(true);
+    const { error, data } = await sessionHandler.signInWithEmail(
+      email,
+      password,
+    );
+
+    if (error) Alert.alert(error.message);
+    setLoading(false);
+  };
+
+  return (
+    <View style={globalStyles.auth_container}>
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={text => setEmail(text)}
+          value={email}
+          placeholder="[email protected]"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={globalStyles.verticallySpaced}>
+        <Input
+          label="Password"
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={text => setPassword(text)}
+          value={password}
+          secureTextEntry
+          placeholder="Password"
+          autoCapitalize="none"
+        />
+      </View>
+
+      <Link href="/auth/signup">Don&apos;t have an account? Sign Up</Link>
+
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+        <Button title="Log In" disabled={loading} onPress={signInWithEmail} />
+      </View>
+    </View>
+  );
+}
+
+export default LoginScreen;

src/app/auth/onboarding.tsx

@@ -1,14 +1,161 @@
-import { View } from 'react-native';
-
-import Account from '../../components/Account';
-import Login from '../../components/Login';
+import { useState, useEffect } from 'react';
+import { View, Alert, ScrollView, Platform } from 'react-native';
+import { Button, Input } from 'react-native-elements';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Redirect, router } from 'expo-router';
+import supabase from '../../utils/supabase';
+import UserStringInput from '../../components/UserStringInput';
 import { useSession } from '../../utils/AuthContext';
+import globalStyles from '../../styles/globalStyles';
 
 function OnboardingScreen() {
-  const { session } = useSession();
+  const { session, signOut } = useSession();
+  const [loading, setLoading] = useState(true);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [birthday, setBirthday] = useState(new Date());
+  const [gender, setGender] = useState('');
+  const [raceEthnicity, setRaceEthnicity] = useState('');
+  const [showDatePicker, setShowDatePicker] = useState(Platform.OS === 'ios');
+
+  const getProfile = async () => {
+    try {
+      setLoading(true);
+      if (!session?.user) throw new Error('No user on the session!');
+
+      const { data, error, status } = await supabase
+        .from('profiles')
+        .select(`first_name, last_name, birthday, gender, race_ethnicity`)
+        .eq('user_id', session?.user.id)
+        .single();
+
+      if (error && status !== 406) {
+        throw error;
+      }
+
+      if (data) {
+        setFirstName(data.first_name || firstName);
+        setLastName(data.last_name || lastName);
+        setBirthday(new Date(data.birthday) || birthday);
+        setGender(data.gender || gender);
+        setRaceEthnicity(data.race_ethnicity || raceEthnicity);
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert(`Get profile error: ${error.message}`);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (session) getProfile();
+  }, [session]);
+
+  const updateProfileAndGoHome = async () => {
+    try {
+      setLoading(true);
+      if (!session?.user) throw new Error('No user on the session!');
+
+      // Only update values that are not blank
+      const updates = {
+        ...(firstName && { first_name: firstName }),
+        ...(lastName && { last_name: lastName }),
+        ...(gender && { gender }),
+        ...(raceEthnicity && { race_ethnicity: raceEthnicity }),
+        ...(birthday && { birthday }),
+      };
+
+      // Check if user exists
+      const { count } = await supabase
+        .from('profiles')
+        .select(`*`, { count: 'exact' })
+        .eq('user_id', session?.user.id);
+
+      if (count && count >= 1) {
+        // Update user if they exist
+        const { error } = await supabase
+          .from('profiles')
+          .update(updates)
+          .eq('user_id', session?.user.id)
+          .select('*');
+
+        if (error) throw error;
+      } else {
+        // Create user if they don't exist
+        const { error } = await supabase.from('profiles').insert(updates);
+
+        if (error) throw error;
+      }
+
+      Alert.alert('Succesfully updated user!');
+      router.replace('/home');
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert(error.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!session) {
+    return <Redirect href="/auth/login" />;
+  }
 
   return (
-    <View>{session?.user ? <Account key={session.user.id} /> : <Login />}</View>
+    <ScrollView style={globalStyles.auth_container}>
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+        <Input label="Email" value={session?.user?.email} disabled />
+      </View>
+      <UserStringInput
+        label="First Name"
+        value={firstName}
+        onChange={setFirstName}
+      />
+      <UserStringInput
+        label="Last Name"
+        value={lastName}
+        onChange={setLastName}
+      />
+      <UserStringInput label="Gender" value={gender} onChange={setGender} />
+      <UserStringInput
+        label="Race/Ethnicity"
+        value={raceEthnicity}
+        onChange={setRaceEthnicity}
+      />
+
+      {Platform.OS !== 'ios' && (
+        <Button
+          title="Change Birthday"
+          onPress={() => setShowDatePicker(true)}
+        />
+      )}
+      {showDatePicker && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={birthday}
+          mode="date"
+          onChange={date => {
+            setShowDatePicker(Platform.OS === 'ios');
+            if (date.nativeEvent.timestamp) {
+              setBirthday(new Date(date.nativeEvent.timestamp));
+            }
+          }}
+        />
+      )}
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+        <Button
+          title={loading ? 'Loading ...' : 'Update profile'}
+          onPress={updateProfileAndGoHome}
+          disabled={loading}
+        />
+      </View>
+      <View style={globalStyles.verticallySpaced}>
+        <Button title="Skip" onPress={() => router.push('/home')} />
+      </View>
+    </ScrollView>
   );
 }
 

src/app/auth/signup.tsx

@@ -1,14 +1,86 @@
-import { View } from 'react-native';
-
-import Account from '../../components/Account';
-import Login from '../../components/Login';
+import React, { useEffect, useState } from 'react';
+import { Redirect, Link, router } from 'expo-router';
+import { Alert, View, Text } from 'react-native';
+import { Button, Input } from 'react-native-elements';
 import { useSession } from '../../utils/AuthContext';
+import globalStyles from '../../styles/globalStyles';
 
 function SignUpScreen() {
-  const { session } = useSession();
+  const { session, signUp, signInWithEmail } = useSession();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [signedUp, setSignedUp] = useState(false);
+
+  if (session) {
+    return <Redirect href="/home" />;
+  }
+
+  const signIn = async () => {
+    setLoading(true);
+    const { error } = await signInWithEmail(email, password);
+
+    if (error) Alert.alert(error.message);
+    else router.replace('/auth/onboarding');
+
+    setLoading(false);
+  };
+
+  const signUpWithEmail = async () => {
+    setLoading(true);
+    const { error } = await signUp(email, password);
+
+    if (error) Alert.alert(error.message);
+    else {
+      Alert.alert(
+        'Please follow the instructions in your email to verify your account, then login',
+      );
+      setSignedUp(true);
+    }
+    setLoading(false);
+  };
 
   return (
-    <View>{session?.user ? <Account key={session.user.id} /> : <Login />}</View>
+    <View style={globalStyles.auth_container}>
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={text => setEmail(text)}
+          value={email}
+          placeholder="[email protected]"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={globalStyles.verticallySpaced}>
+        <Input
+          label="Password"
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={text => setPassword(text)}
+          value={password}
+          secureTextEntry
+          placeholder="Password"
+          autoCapitalize="none"
+        />
+      </View>
+      {signedUp ? (
+        <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+          <Button title="Log In" disabled={loading} onPress={signIn} />
+        </View>
+      ) : (
+        <>
+          <Link href="/auth/login">Already have an account? Log In</Link>
+          <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
+            <Button
+              title="Sign Up"
+              disabled={loading}
+              onPress={signUpWithEmail}
+            />
+          </View>
+        </>
+      )}
+    </View>
   );
 }
 

src/app/index.tsx

@@ -1,7 +1,11 @@
 import { Redirect } from 'expo-router';
+import { useSession } from '../utils/AuthContext';
 
 function StartPage() {
-  return <Redirect href="/auth" />;
+  const { session } = useSession();
+
+  if (!session) return <Redirect href="/auth/login" />;
+  return <Redirect href="/home" />;
 }
 
 export default StartPage;

src/app/settings.tsx

@@ -1,12 +1,24 @@
-import { Text } from 'react-native';
+import { Redirect, router } from 'expo-router';
+import { Text, View } from 'react-native';
+import { Button } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
+import { useSession } from '../utils/AuthContext';
 import globalStyles from '../styles/globalStyles';
 
 function SettingsScreen() {
+  const { session, signOut } = useSession();
+
+  if (!session) return <Redirect href="/auth/login" />;
   return (
     <SafeAreaView style={globalStyles.container}>
       <Text style={globalStyles.h1}>Settings</Text>
+      <View>
+        <Button
+          title="Update Profile"
+          onPress={() => router.push('/auth/onboarding')}
+        />
+        <Button title="Sign Out" onPress={signOut} />
+      </View>
     </SafeAreaView>
   );
 }