如何在Ionic+React项目中通过Firebase发送用户验证邮件？

Hey there! Let's sort out this email verification problem you're having with your Ionic React + Firebase app. I'll break down exactly how to send verification emails and make sure only verified users can access your site.

Step 1: Send Verification Email After Registration #

Right now your registerUser function creates the user but doesn't trigger the verification email. We need to add a call to Firebase's sendEmailVerification() method immediately after the user is created. Here's the updated function:

export async function registerUser(username: string, password: string) {
  const email = `${username}@myweb.eu`
  try {
    const res = await firebase.auth().createUserWithEmailAndPassword(email, password)
    
    // Send verification email to the new user
    if (res.user) {
      await res.user.sendEmailVerification()
      toast("Verification email sent! Check your inbox (and spam folder just in case).", 4000)
    }
    
    console.log(res)
    return true
  } catch (error) {
    toast((error as Error).message, 4000)
    return false
  }
}

Step 2: Block Unverified Users From Logging In #

Next, modify your loginUser function to check if the user's email is verified before allowing access. If not, sign them out and prompt them to verify:

export async function loginUser(username: string, password: string) {
  const email = `${username}@myweb.eu`
  try {
    const res = await firebase.auth().signInWithEmailAndPassword(email, password)
    
    // Check if email is verified
    if (res.user && !res.user.emailVerified) {
      toast("Please verify your email first! We sent a link to your inbox.", 4000)
      // Optional: Add a button later to resend the verification email here
      // await res.user.sendEmailVerification()
      // toast("Verification email resent!", 4000)
      
      // Force sign out the unverified user
      await firebase.auth().signOut()
      return false
    }
    
    console.log(res)
    return true
  } catch (error) {
    toast("Log in failed", 4000)
    console.log((error as Error).message)
    return false
  }
}

Step 3: Add Global Auth State Monitoring (Optional but Recommended) #

To make sure users can't bypass the verification check by navigating directly, add a global auth state listener in your root App component. This will automatically redirect unverified users:

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom'; // If using React Router
import firebase from './path-to-your-firebase-config';
import { toast } from './toast';

function App() {
  const history = useHistory();

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // User is logged in but not verified
        if (!user.emailVerified) {
          firebase.auth().signOut();
          toast("Please verify your email to access the app.", 4000);
          history.push('/login'); // Redirect to login page
        } else {
          // User is verified, let them access the app
          history.push('/dashboard'); // Redirect to your main content
        }
      } else {
        // No user logged in, send to login
        history.push('/login');
      }
    });

    // Clean up the listener when component unmounts
    return () => unsubscribe();
  }, [history]);

  return (
    // Your app's main components here
  );
}

Quick Setup Checks in Firebase Console #

Don't forget these critical settings to make verification work:

• Go to Authentication > Sign-in method and ensure Email/Password is enabled.
• Under Authentication > Templates, customize your verification email (so users recognize it's from your app).
• Add your app's domain to Authentication > Sign-in method > Authorized domains—this ensures the verification link works correctly.

内容的提问来源于stack exchange，提问作者jap