Merge pull request #36 from kjannette/verify-email

add email verification step to new user onboarding flow

frontend/src/contexts/AuthContext.jsx

@@ -4,6 +4,7 @@ import {
   signInWithEmailAndPassword,
   createUserWithEmailAndPassword,
   signOut,
+  sendEmailVerification as firebaseSendEmailVerification,
 } from "firebase/auth";
 import { auth } from "../firebase/config";
 import { getAccount } from "../api/account";
@@ -68,6 +69,19 @@ export function AuthProvider({ children }) {
     await signOut(auth);
   }
 
+  async function sendEmailVerification() {
+    if (auth.currentUser) {
+      await firebaseSendEmailVerification(auth.currentUser);
+    }
+  }
+
+  async function reloadUser() {
+    if (auth.currentUser) {
+      await auth.currentUser.reload();
+      setCurrentUser({ ...auth.currentUser });
+    }
+  }
+
   const value = {
     currentUser,
     userTier,
@@ -77,6 +91,8 @@ export function AuthProvider({ children }) {
     signup,
     login,
     logout,
+    sendEmailVerification,
+    reloadUser,
     refreshAccount: fetchAccount,
   };
 

frontend/src/pages/subscribe/Subscribe.css

@@ -128,6 +128,23 @@
   font-size: 0.9rem;
 }
 
+.subscribe__subtitle strong {
+  color: var(--color-primary);
+}
+
+/* Verify email actions */
+.subscribe__verify-actions {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.subscribe__verify-sent {
+  color: var(--color-success, #22c55e);
+  text-align: center;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
 /* Subscribe card (Step 2 tier cards) */
 .subscribe-card {
   background-color: var(--color-bg-card, #1a1a2e);

frontend/src/pages/subscribe/Subscribe.jsx

@@ -10,12 +10,12 @@ import Button from "../../components/Button";
 import TierPicker from "../../components/TierPicker";
 import "./Subscribe.css";
 
-const STEPS = ["Create Account", "Choose Plan"];
+const STEPS = ["Create Account", "Verify Email", "Choose Plan"];
 
 export default function Subscribe() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const { currentUser, signup, refreshAccount } = useAuth();
+  const { currentUser, signup, sendEmailVerification, reloadUser, refreshAccount } = useAuth();
 
   const queryParameters = new URLSearchParams(window.location.search)
   const success = queryParameters?.get("payment")
@@ -30,7 +30,10 @@ export default function Subscribe() {
 
   setTimeout(forward, 2000, success, session_id);
 
-  const [step, setStep] = useState(currentUser ? 2 : 1);
+  const [step, setStep] = useState(
+    currentUser ? (currentUser.emailVerified ? 3 : 2) : 1
+  );
+  const [verificationSent, setVerificationSent] = useState(false);
   const [data, setData] = useState({
     email: currentUser?.email || "",
     password: "",
@@ -65,6 +68,8 @@ export default function Subscribe() {
     setLoading(true);
     try {
       await signup(data.email, data.password);
+      await sendEmailVerification();
+      setVerificationSent(true);
       setStep(2);
     } catch (err) {
       setError(err.message || "Failed to create account");
@@ -74,6 +79,44 @@ export default function Subscribe() {
   }
 
   async function handleStep2() {
+    setError("");
+    setLoading(true);
+    try {
+      await reloadUser();
+      const { currentUser: user } = await import("../../firebase/config").then(
+        (m) => ({ currentUser: m.auth.currentUser })
+      );
+      if (user?.emailVerified) {
+        setStep(3);
+      } else {
+        setError("Email not yet verified. Please check your inbox and click the verification link.");
+      }
+    } catch (err) {
+      setError(err.message || "Failed to check verification status");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResendVerification() {
+    setError("");
+    setLoading(true);
+    try {
+      await sendEmailVerification();
+      setVerificationSent(true);
+      setError("");
+    } catch (err) {
+      if (err.code === "auth/too-many-requests") {
+        setError("Too many requests. Please wait a moment before trying again.");
+      } else {
+        setError(err.message || "Failed to resend verification email");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep3() {
     setError("");
     if (!data.selectedTier) {
       setError("Please select a plan");
@@ -173,6 +216,30 @@ export default function Subscribe() {
     );
   }
 
+  function StepVerifyEmail() {
+    return (
+      <>
+        <h2 className="mb-sm">Verify your email</h2>
+        <p className="subscribe__subtitle">
+          We've sent a verification link to <strong>{currentUser?.email}</strong>.
+          Please check your inbox and click the link to verify your email address.
+        </p>
+        {verificationSent && !error && (
+          <p className="subscribe__verify-sent">Verification email sent!</p>
+        )}
+        <div className="subscribe__verify-actions">
+          <Button
+            onClick={handleResendVerification}
+            disabled={loading}
+            variant="ghost"
+          >
+            {loading ? "Sending..." : "Resend verification email"}
+          </Button>
+        </div>
+      </>
+    );
+  }
+
   function StepChoosePlan() {
     return (
       <>
@@ -194,6 +261,7 @@ export default function Subscribe() {
     async function handleNext() {
       if (step === 1) handleStep1();
       else if (step === 2) await handleStep2();
+      else if (step === 3) await handleStep3();
     }
 
     function handleBack() {
@@ -204,6 +272,8 @@ export default function Subscribe() {
     const nextLabel =
       step === 1
         ? "Create Account"
+        : step === 2
+          ? "I've verified my email"
           : !data.selectedTier
             ? "Continue"
             : data.selectedTier === "free"
@@ -213,7 +283,7 @@ export default function Subscribe() {
     return (
       <div className="subscribe__footer">
         <div>
-          {step === 2 && (
+          {step > 1 && (
             <Button onClick={handleBack} disabled={loading} variant="ghost">
               ← Back
             </Button>
@@ -222,7 +292,7 @@ export default function Subscribe() {
 
         <Button
           onClick={handleNext}
-          disabled={loading || (step === 2 && !data.selectedTier)}
+          disabled={loading || (step === 3 && !data.selectedTier)}
           className="text-bold"
         >
           {loading ? "Please wait..." : nextLabel}
@@ -235,13 +305,14 @@ export default function Subscribe() {
 
   const stepContent = {
     1: StepCreateAccount(),
-    2: StepChoosePlan(),
+    2: StepVerifyEmail(),
+    3: StepChoosePlan(),
   };
 
   return (
     <div className="subscribe">
       <div
-        className={`subscribe__container${step === 2 ? " subscribe__container--wide" : ""}`}
+        className={`subscribe__container${step === 3 ? " subscribe__container--wide" : ""}`}
       >
         <h1 className="subscribe__title">Koin Ping</h1>