feat: firebase auth implementation (#160)

all the auth

Author: AnkushSarkar10

assets/images/default_profile_pic.jpg

@@ -27,7 +27,7 @@
     "expo-dev-client": "~4.0.25",
     "expo-font": "~12.0.9",
     "expo-image": "~1.13.0",
-    "expo-image-picker": "~15.0.7",
+    "expo-image-picker": "~15.1.0",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.23",
     "expo-splash-screen": "0.27.7",

package.json

@@ -1,12 +1,19 @@
 import { Env } from '@env';
 import { initializeApp } from 'firebase/app';
+import {
+  connectAuthEmulator,
+  getReactNativePersistence,
+  initializeAuth,
+} from 'firebase/auth';
 import {
   connectFirestoreEmulator,
   initializeFirestore,
 } from 'firebase/firestore';
 import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
+import { connectStorageEmulator, getStorage } from 'firebase/storage';
 import { Platform } from 'react-native';
 
+import { reactNativeAsyncStorage } from '../../core/storage';
 const firebaseConfig = {
   apiKey: Env.EXPO_PUBLIC_FIREBASE_API_KEY,
   authDomain: Env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
@@ -21,12 +28,23 @@ export const app = initializeApp(firebaseConfig);
 export const db = initializeFirestore(app, {
   experimentalForceLongPolling: true,
 });
-const functions = getFunctions(app);
+export const functions = getFunctions(app);
+export const auth = initializeAuth(app, {
+  persistence: getReactNativePersistence(reactNativeAsyncStorage),
+});
+export const storage = getStorage(app);
 
 // Connect to emulator
 // 10.0.2.2 is a special IP address to connect to the 'localhost' of the host computer from an Android emulator
 const emulatorHost = Platform.OS === 'ios' ? '127.0.0.1' : '10.0.2.2';
+const FIRESTORE_PORT = 8080;
+const FUNCTIONS_PORT = 5001;
+const AUTH_PORT = 9099;
+const STORAGE_PORT = 9199;
+
 if (__DEV__) {
-  connectFirestoreEmulator(db, emulatorHost, 8080);
-  connectFunctionsEmulator(functions, emulatorHost, 5001);
+  connectFirestoreEmulator(db, emulatorHost, FIRESTORE_PORT);
+  connectFunctionsEmulator(functions, emulatorHost, FUNCTIONS_PORT);
+  connectAuthEmulator(auth, `http://${emulatorHost}:${AUTH_PORT}`);
+  connectStorageEmulator(storage, emulatorHost, STORAGE_PORT);
 }

pnpm-lock.yaml

@@ -1,3 +1,4 @@
 export * from './add-test-delay';
 export * from './api-provider';
+export * from './firebase';
 export * from './utils';

src/api/common/firebase.ts

@@ -1,7 +1,7 @@
+export * from './firebase-queries';
 export * from './types';
 export * from './use-friends';
 export * from './use-picture';
 export * from './use-remove-friend';
 export * from './use-send-friend-request';
 export * from './use-user';
-export * from './firebase-queries';

src/api/common/index.tsx

@@ -1,18 +1,24 @@
 /* eslint-disable react/no-unstable-nested-components */
-
 import { Redirect, SplashScreen, Tabs } from 'expo-router';
 import { Bell, Layers, Settings, Users } from 'lucide-react-native';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { useAuth, useIsFirstTime, useThemeConfig } from '@/core';
+import {
+  checkIfUserExistsInFirestore,
+  useAuth,
+  useIsFirstTime,
+  useThemeConfig,
+} from '@/core';
 import { LucideIcon } from '@/ui/lucide-icon';
 
 export default function TabLayout() {
   const status = useAuth.use.status();
   const [isFirstTime] = useIsFirstTime();
+  const [userExists, setUserExists] = useState<boolean | null>(null);
   const hideSplash = useCallback(async () => {
     await SplashScreen.hideAsync();
   }, []);
+
   useEffect(() => {
     if (status !== 'idle') {
       setTimeout(() => {
@@ -21,6 +27,12 @@ export default function TabLayout() {
     }
   }, [hideSplash, status]);
 
+  useEffect(() => {
+    if (status === 'signIn') {
+      checkIfUserExistsInFirestore().then(setUserExists);
+    }
+  }, [status]);
+
   const theme = useThemeConfig();
 
   if (isFirstTime) {
@@ -30,6 +42,11 @@ export default function TabLayout() {
     return <Redirect href="/auth" />;
   }
 
+  // we only redirect when userExists is not null (we have acc checked and set the value)
+  if (status === 'signIn' && userExists === false) {
+    return <Redirect href="/auth/create-profile" />;
+  }
+
   return (
     <Tabs
       screenOptions={{

src/api/users/index.ts

@@ -1,17 +1,27 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { Env } from '@env';
+import { useState } from 'react';
 import { Linking } from 'react-native';
 
 import { Item } from '@/components/settings/item';
 import { ItemsContainer } from '@/components/settings/items-container';
 import { ThemeItem } from '@/components/settings/theme-item';
 import { useAuth } from '@/core';
-import { Header, ScreenContainer, ScrollView, View } from '@/ui';
+import { Button, Header, ScreenContainer, ScrollView, View } from '@/ui';
 
 export default function Settings() {
   const signOut = useAuth.use.signOut();
-  // const { colorScheme } = useColorScheme();
-  // const iconColor = colorScheme === 'dark' ? colors.neutral[400] : colors.neutral[500];
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
   return (
     <ScreenContainer>
       <Header title="Settings" />
@@ -83,9 +93,12 @@ export default function Settings() {
           </ItemsContainer>
 
           <View className="my-8">
-            <ItemsContainer>
-              <Item text="Logout" onPress={signOut} />
-            </ItemsContainer>
+            <Button
+              label="Logout"
+              onPress={handleLogout}
+              loading={isLoggingOut}
+              variant="item"
+            />
           </View>
         </View>
       </ScrollView>

src/app/(tabs)/_layout.tsx

@@ -0,0 +1,169 @@
+import { ref, uploadBytes } from '@firebase/storage';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as ImagePicker from 'expo-image-picker';
+import { useRouter } from 'expo-router';
+import {
+  collection,
+  doc,
+  getDocs,
+  query,
+  setDoc,
+  where,
+} from 'firebase/firestore';
+import { Upload } from 'lucide-react-native';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Image, KeyboardAvoidingView } from 'react-native';
+import * as z from 'zod';
+
+import { db, storage } from '@/api';
+import { useAuth } from '@/core';
+import { Button, ControlledInput, Header, ScreenContainer, View } from '@/ui';
+const profileSchema = z.object({
+  displayName: z.string().min(2, 'Display name is required'),
+  username: z.string().min(2, 'Username is required'),
+});
+
+type ProfileFormType = z.infer<typeof profileSchema>;
+
+export default function CreateProfile() {
+  const router = useRouter();
+  const currentUid = useAuth.getState().user?.uid;
+  const defaultProfilePic = require('/assets/images/default_profile_pic.jpg');
+  const [profileImage, setProfileImage] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isCreatingProfile, setIsCreatingProfile] = useState(false);
+
+  const { handleSubmit, control, setError } = useForm<ProfileFormType>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      displayName: '',
+      username: '',
+    },
+  });
+
+  const handleImageUpload = async () => {
+    setIsUploading(true);
+    try {
+      const image:
+        | ImagePicker.ImagePickerResult
+        | ImagePicker.ImagePickerCanceledResult =
+        await ImagePicker.launchImageLibraryAsync({
+          mediaTypes: ImagePicker.MediaTypeOptions.Images,
+          allowsEditing: true,
+          aspect: [4, 3],
+        });
+      if (image.canceled === true) return;
+      setProfileImage(image.assets[0].uri);
+    } catch (error) {
+      console.error('Image upload failed:', error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const uploadProfileImage = async () => {
+    if (!profileImage || !currentUid) return;
+
+    try {
+      const response = await fetch(profileImage);
+      const blob = await response.blob();
+      const storageRef = ref(storage, `profilePics/${currentUid}`);
+      await uploadBytes(storageRef, blob);
+      return;
+    } catch (error) {
+      console.error('Failed to upload profile image:', error);
+      return;
+    }
+  };
+
+  const onSubmit = async (data: ProfileFormType) => {
+    setIsCreatingProfile(true);
+    if (!currentUid) return;
+    try {
+      // check if username taken
+      const usernameQuery = query(
+        collection(db, 'users'),
+        where('username', '==', data.username),
+      );
+      const usernameSnapshot = await getDocs(usernameQuery);
+
+      if (!usernameSnapshot.empty) {
+        setError('username', {
+          type: 'custom',
+          message: 'This username is already taken',
+        });
+        setIsCreatingProfile(false);
+        return;
+      }
+
+      // make user in firestore
+      const userDocRef = doc(db, 'users', currentUid);
+
+      await setDoc(userDocRef, {
+        displayName: data.displayName,
+        username: data.username,
+        createdAt: new Date().toLocaleDateString('en-CA'),
+      });
+
+      // upload profile pic to storage
+      await uploadProfileImage();
+
+      router.push('/');
+    } catch (error) {
+      console.error('Error updating profile', error);
+      setError('root', {
+        type: 'custom',
+        message: 'Something went wrong creating profile',
+      });
+    } finally {
+      setIsCreatingProfile(false);
+    }
+  };
+
+  return (
+    <ScreenContainer>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior="padding"
+        keyboardVerticalOffset={10}
+      >
+        <View className="flex flex-1 flex-col gap-4">
+          <Header title="Create Profile" />
+
+          <View className="flex flex-row items-center gap-4 px-2">
+            <Image
+              source={profileImage ? { uri: profileImage } : defaultProfilePic}
+              className="h-14 w-14 rounded-full"
+            />
+            <Button
+              label="Upload Profile Picture"
+              icon={Upload}
+              variant="outline"
+              className="flex-1"
+              textClassName="font-bold"
+              loading={isUploading}
+              onPress={handleImageUpload}
+            />
+          </View>
+          <ControlledInput
+            control={control}
+            name="displayName"
+            label="Display Name"
+          />
+          <ControlledInput
+            control={control}
+            name="username"
+            label="Unique Username"
+          />
+
+          <Button
+            label="Complete Profile"
+            loading={isCreatingProfile}
+            onPress={handleSubmit(onSubmit)}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </ScreenContainer>
+  );
+}