[auth] Implement email account creation

package.json

@@ -15,20 +15,28 @@
     "@expo/vector-icons": "^13.0.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
+    "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/datetimepicker": "^7.6.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/native-stack": "^6.9.14",
     "@react-navigation/stack": "^6.3.18",
+    "@react-native-async-storage/async-storage": "^1.19.3",
+    "@supabase/supabase-js": "^2.36.0",
     "axios": "^1.5.0",
     "expo": "~49.0.11",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.4",
     "react-native-root-siblings": "^4.1.1",
     "react-native-root-toast": "^3.5.1",
     "react-native-ionicons": "^4.6.5",
+    "react-native": "0.72.5",
+    "react-native-elements": "^3.4.3",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-vector-icons": "^10.0.0"
+    "react-native-vector-icons": "^10.0.0",
+    "react-native-elements": "^3.4.3",
+    "react-native-url-polyfill": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -48,7 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.5"
+    "typescript": "^4.3.0"
   },
   "private": true
 }

src/components/Account.tsx

@@ -0,0 +1,153 @@
+import { useState, useEffect } from 'react';
+import { StyleSheet, View, Alert, ScrollView } from 'react-native';
+import { Button, Input } from 'react-native-elements';
+import { Session } from '@supabase/supabase-js';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import UserStringInput from './UserStringInput';
+import supabase from '../utils/supabase';
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 40,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+});
+
+export default function Account({ session }: { session: Session }) {
+  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('');
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (session) getProfile();
+  }, [session]);
+
+  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);
+    }
+  };
+
+  const updateProfile = 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!');
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert(error.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Input label="Email" value={session?.user?.email} disabled />
+      </View>
+      <UserStringInput
+        label="First Name"
+        value={firstName}
+        set={setFirstName}
+      />
+      <UserStringInput label="Last Name" value={lastName} set={setLastName} />
+      <UserStringInput label="Gender" value={gender} set={setGender} />
+      <UserStringInput
+        label="Race/Ethnicity"
+        value={raceEthnicity}
+        set={setRaceEthnicity}
+      />
+      <DateTimePicker
+        testID="dateTimePicker"
+        value={birthday}
+        mode="date"
+        onChange={date => {
+          if (date.nativeEvent.timestamp) {
+            setBirthday(new Date(date.nativeEvent.timestamp));
+          }
+        }}
+      />
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Button
+          title={loading ? 'Loading ...' : 'Update'}
+          onPress={() => updateProfile()}
+          disabled={loading}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
+      </View>
+    </ScrollView>
+  );
+}

src/components/Login.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+import { Button, Input } from 'react-native-elements';
+import supabase from '../utils/supabase';
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 40,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+});
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const signInWithEmail = async () => {
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) Alert.alert(error.message);
+    setLoading(false);
+  };
+
+  const signUpWithEmail = async () => {
+    setLoading(true);
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) Alert.alert(error.message);
+    setLoading(false);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={text => setEmail(text)}
+          value={email}
+          placeholder="[email protected]"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Input
+          label="Password"
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={text => setPassword(text)}
+          value={password}
+          secureTextEntry
+          placeholder="Password"
+          autoCapitalize="none"
+        />
+      </View>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Button
+          title="Sign in"
+          disabled={loading}
+          onPress={() => signInWithEmail()}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Button
+          title="Sign up"
+          disabled={loading}
+          onPress={() => signUpWithEmail()}
+        />
+      </View>
+    </View>
+  );
+}

src/components/UserStringInput.tsx

@@ -0,0 +1,30 @@
+import { View, StyleSheet } from 'react-native';
+import { Input } from 'react-native-elements';
+
+const styles = StyleSheet.create({
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+});
+
+type UserStringInputProps = {
+  label: string;
+  value: string;
+  set: React.Dispatch<React.SetStateAction<string>>;
+};
+
+function UserStringInput({ label, value, set }: UserStringInputProps) {
+  return (
+    <View style={styles.verticallySpaced}>
+      <Input
+        label={label}
+        value={value || ''}
+        onChangeText={text => set(text)}
+      />
+    </View>
+  );
+}
+
+export default UserStringInput;

src/screens/LoginScreen.tsx

@@ -1,10 +1,31 @@
-import React from 'react';
-import { Text, View } from 'react-native';
+import 'react-native-url-polyfill/auto';
+import { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { Session } from '@supabase/supabase-js';
+import supabase from '../utils/supabase';
+import Login from '../components/Login';
+import Account from '../components/Account';
 
 export default function LoginScreen() {
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
+      setSession(newSession);
+    });
+
+    supabase.auth.onAuthStateChange((_event, newSession) => {
+      setSession(newSession);
+    });
+  }, []);
+
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Login Page</Text>
+    <View>
+      {session && session.user ? (
+        <Account key={session.user.id} session={session} />
+      ) : (
+        <Login />
+      )}
     </View>
   );
 }

src/utils/supabase.ts

@@ -0,0 +1,21 @@
+import 'react-native-url-polyfill/auto';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl =
+  process.env.EXPO_PUBLIC_SUPABASE_URL ||
+  'supabase url not found as an env variable';
+const supabaseAnonKey =
+  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ||
+  'supabase anon key not found as an env variable';
+
+const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+  auth: {
+    storage: AsyncStorage,
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+});
+
+export default supabase;