import React, { useState, useEffect } from 'react'; import { Alert, StyleSheet, AppState, Image, Platform } from 'react-native'; import { supabase } from '@/lib/supabase'; import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme'; import AppleSignInButton from '@/components/auth/AppleSignIniOS'; import AzureSignIn from './AzureSignIn'; import { Colors } from '@/constants/Colors'; import { useColorScheme } from '@/hooks/useColorScheme'; import type { updateUser } from '@/constants/Types'; // Tells Supabase Auth to continuously refresh the session automatically if // the app is in the foreground. When this is added, you will continue to receive // `onAuthStateChange` events with the `TOKEN_REFRESHED` or `SIGNED_OUT` event // if the user's session is terminated. This should only be registered once. if (Platform.OS !== 'web') { AppState.addEventListener('change', (state) => { if (state === 'active') { supabase.auth.startAutoRefresh(); } else { supabase.auth.stopAutoRefresh(); } }); } const Auth = () => { const scheme = useColorScheme() ?? 'dark'; const [full_name, setFullName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); // Set up auto-refreshing for web useEffect(() => { if (Platform.OS === 'web') { supabase.auth.startAutoRefresh(); return () => { supabase.auth.stopAutoRefresh(); }; } }, []); const signInWithEmail = async () => { setLoading(true); const { error } = await supabase.auth.signInWithPassword({ email: email, password: password, }); if (error) Alert.alert(error.message); setLoading(false); }; const signUpWithEmail = async () => { setLoading(true); const { data: { session }, error, } = await supabase.auth.signUp({ email, password, }); if (error) Alert.alert(error.message); else if (!session) Alert.alert('Please check your inbox for email verification!'); else { const { error: updateProfileError } = await supabase .from('profiles') .upsert({ id: session.user.id, full_name, email, provider: 'email', updated_at: new Date(), }); if (updateProfileError) { Alert.alert('Error updating profile:', updateProfileError.message); console.error('Error updating profile:', updateProfileError.message); } } setLoading(false); }; return ( Tech Tracker setFullName(text)} value={full_name} placeholder='Full Name' /> setEmail(text)} value={email} placeholder='email@address.com' /> setPassword(text)} value={password} secureTextEntry={true} placeholder='Password' /> signInWithEmail()} fontSize={28} fontWeight='semibold' width='50%' /> signUpWithEmail()} fontSize={28} fontWeight='semibold' width='50%' /> or or ); }; export default Auth; const styles = StyleSheet.create({ container: { padding: 12, height: '100%', }, verticallySpaced: { paddingTop: 4, paddingBottom: 4, alignItems: 'center', }, horizontallySpaced: { flexDirection: 'row', paddingLeft: 4, paddingRight: 4, alignItems: 'center', justifyContent: 'center', width: '90%', }, mt20: { marginTop: 20, }, reactLogo: { height: 70, width: 72, }, titleContainer: { marginTop: 60, marginBottom: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, }, headerTitle: { textAlign: 'center', fontSize: 48, lineHeight: 64, fontWeight: 'bold', }, divider: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginVertical: 5, width: '80%', alignSelf: 'center', }, dividerText: { marginHorizontal: 15, fontSize: 14, opacity: 0.7, }, dividerLine: { flex: 1, height: 1, opacity: 0.3, } });