fix: resolve email verification timing issue by sending to newly created user

src/components/Login.tsx

@@ -18,7 +18,7 @@ export default function Login() {
   const [forgotMessage, setForgotMessage] = useState('');
   const [showVerificationBanner, setShowVerificationBanner] = useState(false);
   const [verificationSent, setVerificationSent] = useState(false);
-  const { login, signup, sendPasswordReset, sendVerificationEmail } = useAuth();
+  const { login, signup, sendPasswordReset, sendVerificationEmailToUser } = useAuth();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -37,14 +37,16 @@ export default function Login() {
         return;
       }
       try {
-        await signup(email, password, firstName);
-        // Send verification email
-        try {
-          await sendVerificationEmail();
-          setVerificationSent(true);
-          setShowVerificationBanner(true);
-        } catch (err) {
-          console.error('Error sending verification email:', err);
+        const newUser = await signup(email, password, firstName);
+        // Send verification email to the newly created user
+        if (newUser) {
+          try {
+            await sendVerificationEmailToUser(newUser);
+            setVerificationSent(true);
+            setShowVerificationBanner(true);
+          } catch (err) {
+            console.error('Error sending verification email:', err);
+          }
         }
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : 'An error occurred');

src/context/AuthContext.tsx

@@ -8,10 +8,11 @@ import { doc, setDoc, query, where, collection, getDocs, deleteDoc } from 'fireb
 interface AuthContextType {
   user: User | null;
   login: (email: string, password: string) => Promise<void>;
-  signup: (email: string, password: string, firstName?: string) => Promise<void>;
+  signup: (email: string, password: string, firstName?: string) => Promise<User | null>;
   logout: () => Promise<void>;
   deleteAccount: () => Promise<void>;
   sendVerificationEmail: () => Promise<void>;
+  sendVerificationEmailToUser: (user: User) => Promise<void>;
   sendPasswordReset: (email: string) => Promise<void>;
   loading: boolean;
   isAdmin: boolean;
@@ -80,6 +81,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     if (firstName) {
       await updateProfile(userCredential.user, { displayName: firstName });
     }
+    return userCredential.user;
   };
 
   const logout = async () => {
@@ -113,12 +115,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     await sendEmailVerification(user);
   };
 
+  const sendVerificationEmailToUser = async (userToVerify: User) => {
+    await sendEmailVerification(userToVerify);
+  };
+
   const sendPasswordReset = async (email: string) => {
     await sendPasswordResetEmail(auth, email);
   };
 
   return (
-    <AuthContext.Provider value={{ user, login, signup, logout, deleteAccount, sendVerificationEmail, sendPasswordReset, loading, isAdmin }}>
+    <AuthContext.Provider value={{ user, login, signup, logout, deleteAccount, sendVerificationEmail, sendVerificationEmailToUser, sendPasswordReset, loading, isAdmin }}>
       {children}
     </AuthContext.Provider>
   );