feat: Email Verification upon Signup

app/(auth)/signup.js

@@ -1,5 +1,9 @@
 import { Link, useLocalSearchParams } from "expo-router";
-import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
+import {
+  createUserWithEmailAndPassword,
+  sendEmailVerification,
+  updateProfile,
+} from "firebase/auth";
 import { doc, setDoc } from "firebase/firestore";
 import { useState } from "react";
 import {
@@ -32,7 +36,7 @@ export default function SignUp() {
   const [password, setPassword] = useState("");
   const [passwordCheck, setPasswordCheck] = useState("");
 
-  const { showDialog } = useAlertContext();
+  const { showDialog, showSnackBar } = useAlertContext();
 
   const { height } = useWindowDimensions();
 
@@ -66,6 +70,15 @@ export default function SignUp() {
         uniqueDrills: [],
       });
 
+      try {
+        await sendEmailVerification(auth.currentUser);
+        console.log("Verification Email Sent!");
+        showSnackBar("Verification Email Sent!");
+      } catch {
+        console.log("Error sending verification email: ", e);
+        showDialog("Error", getErrorString(e));
+      }
+
       setCurrentUserId(userCredential.user.uid);
       setCurrentUserInfo(userCredential.user);
 

app/content/profile/index.js

@@ -96,7 +96,7 @@
     setEmail(userEmail);
   }, [userData, userEmail]);
 
   const handleUpdate = useCallback(
     debounce(
       async () => {
         setUpdateLoading(true);
@@ -175,7 +175,7 @@
       newPassword,
       newPasswordCheck,
       passwordInputVisible,
-      userData.name,
+      userData,
       userEmail,
     ],
   );

app/segments/(team)/chooseTeam.js

@@ -1,15 +1,18 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { router } from "expo-router";
-import { signOut as signoutFireBase } from "firebase/auth";
+import {
+  onIdTokenChanged,
+  sendEmailVerification,
+  signOut as signoutFireBase,
+} from "firebase/auth";
 import { doc, getDoc, setDoc } from "firebase/firestore";
-import { useEffect, useState } from "react";
-import { Text, View } from "react-native";
+import { useCallback, useEffect, useState } from "react";
+import { RefreshControl, ScrollView, Text, View } from "react-native";
 import { Button } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { themeColors } from "~/Constants";
 import { getErrorString } from "~/Utility";
 import ErrorComponent from "~/components/errorComponent";
-import Loading from "~/components/loading";
 import { useAlertContext } from "~/context/Alert";
 import { useAuthContext } from "~/context/Auth";
 import { invalidateMultipleKeys } from "~/dbOperations/invalidateMultipleKeys";
@@ -20,13 +23,15 @@
     useAuthContext();
   const queryClient = useQueryClient();
 
-  const { showDialog } = useAlertContext();
+  const { showDialog, showSnackBar } = useAlertContext();
 
   const [blacklist, setBlacklist] = useState(false);
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  const [verified, setVerified] = useState(false);
+
   async function handleSignOut() {
     try {
       await signoutFireBase(auth);
@@ -58,9 +63,44 @@
     }
   }, [currentUserId]);
 
-  if (loading) {
-    return <Loading />;
-  }
+  useEffect(() => {
+    const unregisterAuthObserver = onIdTokenChanged(auth, async (user) => {
+      if (user) {
+        if (user.emailVerified) {
+          setVerified(true);
+          showSnackBar("Email successfully verified.");
+          clearInterval(intervalId); // Stop the interval when email is verified
+          unregisterAuthObserver(); // Unregister the auth observer
+        } else {
+          setVerified(false);
+          console.log("Error: Email Not Verified Yet, Try Again");
+        }
+      }
+    });
+
+    // Set up an interval to check email verification every 10 seconds
+    const intervalId = setInterval(async () => {
+      if (auth.currentUser) {
+        await auth.currentUser.reload();
+      }
+    }, 10000); // 10,000 ms = 10 seconds
+
+    return () => {
+      clearInterval(intervalId); // Clean up the interval when component unmounts
+      unregisterAuthObserver(); // Unregister the auth observer
+    };
+  }, []);
+
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(async () => {
+      await auth.currentUser.reload();
+      console.log("user reloaded");
+      setRefreshing(false);
+    }, 2000);
+  }, []);
 
   if (error) {
     return <ErrorComponent errorList={[error]} />;
@@ -73,38 +113,35 @@
         justifyContent: "center",
       }}
     >
-      <View
-        style={{
-          justifyContent: "center",
-          alignItems: "center",
-        }}
+      <ScrollView
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        contentContainerStyle={{ flex: 1, justifyContent: "center" }}
       >
-        {blacklist ? (
-          <Text
-            style={{
-              fontSize: 16,
-              textAlign: "center",
-              color: "gray",
-            }}
-          >
-            You've been banned from this team.
-          </Text>
-        ) : (
-          <View
-            style={{
-              flexGrow: 1,
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
+        <View
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {blacklist ? (
+            <Text
+              style={{
+                fontSize: 16,
+                textAlign: "center",
+                color: "gray",
+              }}
+            >
+              You've been banned from this team.
+            </Text>
+          ) : verified ? (
             <Button
               onPress={async () => {
-                //temporary, should be replaced with multiple team functionality
+                // Update Firestore document
                 await setDoc(doc(db, "teams", "1", "users", currentUserId), {
                   name: currentUserInfo["displayName"],
-                  // hardcoded pfp string for now, add pfp upload to profile settings in future PR
                   pfp: "",
-                  // hardcoded "player" role for now, add role selection to profile settings in future PR
                   role: "player",
                   uid: currentUserId,
                   assigned_data: [],
@@ -114,6 +151,7 @@
                 await invalidateMultipleKeys(queryClient, [
                   ["userInfo", { userId: currentUserId }],
                 ]);
+                // Navigate to the next page
                 router.replace("/");
               }}
               style={{
@@ -132,15 +170,47 @@
                 Join Team
               </Text>
             </Button>
-          </View>
-        )}
-        <View
-          style={{
-            flexGrow: 1,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
+          ) : (
+            <View
+              style={{
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Text>Waiting for email verification...</Text>
+              <Button
+                style={{
+                  backgroundColor: themeColors.accent,
+                  borderRadius: 12,
+                  marginTop: 20,
+                }}
+                onPress={async () => {
+                  setLoading(true);
+                  try {
+                    await sendEmailVerification(auth.currentUser);
+                    console.log("Verification Email Sent!");
+                    showSnackBar("Verification Email Sent!");
+                  } catch (e) {
+                    console.log("Error sending verification email: ", e);
+                    showDialog("Error", getErrorString(e));
+                  }
+                  setLoading(false);
+                }}
+                loading={loading}
+                textColor="white"
+              >
+                <Text
+                  style={{
+                    color: themeColors.highlight,
+                    fontSize: 18,
+                    textAlign: "center",
+                  }}
+                >
+                  Resend Verification Email
+                </Text>
+              </Button>
+            </View>
+          )}
           <Button
             onPress={handleSignOut}
             style={{
@@ -160,7 +230,7 @@
             </Text>
           </Button>
         </View>
-      </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }

context/Auth.js

@@ -11,6 +11,7 @@ const AuthContext = createContext({
   currentUserId: null,
   currentTeamId: null,
   currentUserInfo: null,
+  currentUserVerified: false,
 });
 
 export function useAuthContext() {
@@ -35,6 +36,7 @@ export const AuthProvider = ({ children }) => {
   const [currentUserId, setCurrentUserId] = useState(null);
   const [currentUserInfo, setCurrentUserInfo] = useState(null);
   const [currentTeamId, setCurrentTeamId] = useState("1");
+  const [currentUserVerified, setCurrentUserVerified] = useState(false);
 
   useProtectedRoute(currentUserId);
 
@@ -55,6 +57,9 @@ export const AuthProvider = ({ children }) => {
           setCurrentUserId(newlyLoggedInUser["uid"] ?? "Error (uid)");
           setCurrentUserInfo(newlyLoggedInUser ?? {});
           console.log("user changed. userId:", newlyLoggedInUser["uid"]);
+          if (auth.currentUser.emailVerified) {
+            setCurrentUserVerified(true);
+          }
         }
       }
     });
@@ -78,6 +83,7 @@ export const AuthProvider = ({ children }) => {
           setCurrentUserInfo(userInfo);
         },
         currentUserInfo,
+        currentUserVerified,
       }}
     >
       {children}

dbOperations/hooks/useUserInfo.js

@@ -10,14 +10,15 @@ import {
   where,
 } from "firebase/firestore";
 import { useAuthContext } from "~/context/Auth";
-import { db } from "~/firebaseConfig";
+import { auth, db } from "~/firebaseConfig";
 
 export const useUserInfo = ({
   userId = null,
   role = null,
   enabled = true,
 } = {}) => {
-  const { currentTeamId, currentUserId } = useAuthContext();
+  const { currentTeamId, currentUserId, currentUserVerified } =
+    useAuthContext();
   const week_milliseconds = 604800000;
   const currentDate = new Date();
   const currentDateTime = currentDate.getTime();
@@ -31,7 +32,14 @@ export const useUserInfo = ({
           doc(db, "teams", currentTeamId, "users", userId),
         );
         const data = querySnapshot.data();
-        if (!data) {
+
+        // DEBUG REMOVE BELOW LOG LINES LATER
+        console.log("DATA");
+        console.log(data);
+        console.log("VERIFIED STATUS");
+        console.log(auth.currentUser.emailVerified);
+
+        if (!data || !auth.currentUser.emailVerified) {
           if (currentUserId === userId) {
             router.replace("segments/(team)/chooseTeam");
           }