How to enable email verification in Firebase?

 

Step 1: Set Up Your Firebase Project

 

1. Go to the Firebase Console.

2. Click on "Add project" to create a new Firebase project or select an existing project.

3. Follow the instructions to set up your project, providing the necessary details and agreeing to the terms.

4. Once your project is created, click on it to open the project dashboard.

 

Step 2: Set Up Firebase Authentication

 

1. In the Firebase Console, navigate to the "Authentication" section in the left-hand menu.

2. Click on the "Get Started" button if you have not previously used this feature.

3. Once you are in the Authentication page, click on the "Sign-in method" tab.

4. Under "Sign-in providers", click on the "Email/Password" option.

5. Make sure the "Enable" switch is turned on.

 

Step 3: Configure Email Verification Template

 

1. While still in the "Sign-in method" tab, scroll down to the "Email Templates" section.

2. Click on the "Email address verification" template.

3. Customize the template's subject and body to fit your needs. Firebase provides default text, but it can be edited.

4. Click "Save" when you are done.

 

Step 4: Send a Verification Email After Sign-Up

 

Add the following code to your application to send an email verification to a user after they sign up:

// Make sure you have initialized Firebase in your application with your configuration

// Function to send verification email
function sendVerificationEmail(user) {
  user.sendEmailVerification()
    .then(() => {
      console.log("Verification email sent.");
    })
    .catch((error) => {
      console.error("Error sending verification email:", error);
    });
}

// Sign-up new user and send email verification
firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    sendVerificationEmail(user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error(`Error ${errorCode}: ${errorMessage}`);
  });

 

Step 5: Verifying the Email (Optional)

 

1. Once the user receives the verification email, they should click the link to verify their email address.

2. In your application, ensure that you have logic to check if a user's email is verified before allowing full access:

// Function to check if user email is verified
function checkEmailVerification() {
  const user = firebase.auth().currentUser;
  
  if (user) {
    user.reload()
      .then(() => {
        if (user.emailVerified) {
          console.log("Email is verified.");
          // Allow access to your application's features
        } else {
          console.log("Email not verified. Please check your email and verify.");
        }
      })
      .catch((error) => {
        console.error("Error checking email verification:", error);
      });
  }
}

// Call this function after user signs in successfully
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    checkEmailVerification();
  }
});

 

Step 6: Incorporate Email Verification in User Experience

 

1. It's a good practice to inform users about the importance of verifying their email and instruct them to check their inbox.

2. You might display a message that prompts users to verify their email on their dashboard or through a modal.

3. Provide a button or link to "Resend Email Verification" in case the user did not receive the email or the link expired:

// Resend verification email
function resendVerificationEmail() {
  const user = firebase.auth().currentUser;

  if (user) {
    user.sendEmailVerification()
      .then(() => {
        console.log("Verification email re-sent.");
      })
      .catch((error) => {
        console.error("Error re-sending verification email:", error);
      });
  }
}

By following these steps, you will have successfully enabled email verification in your Firebase project, ensuring that only users with verified email addresses can access certain features of your application.