I'll show you how to send a verification email to a new user in this Angular Firebase tutorial. We'll also show you how to prohibit new users from logging into their accounts until they confirm their email address.

For building an authentication system, Firebase has a lot of useful features. Using Angular Firebase, sending email verification is a breeze.

I'll show you how to use the Firebase API to create this feature quickly and easily (AngularFire2 Library).

For this example, I'll be utilising the AngularFire2 library from the node package manager (NPM) and the most recent Angular version.

In your Angular app, install the Firebase packages.

npm install firebase @angular/fire

In the enviorment.ts files, add your firebase settings.

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Create Auth Service

Use the following command to produce a service class file:

ng generate service auth

Remove TypeStrict Errors

Make sure "strict" is set in order to avoid strict type warnings or errors: false, "noImplicitReturns": false, and "strictTemplates": false in the tsconfig.json file's compilerOptions and angularCompilerOptions attributes.

Import AuthService Class in app.module.ts

// Auth service
import { AuthService } from "./shared/services/auth.service";
 providers: [
    AuthService
  ]

Using Firebase auth.service.ts, create an Auth Service for sending verification emails.

import { Injectable, NgZone } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';
@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router, // Inject Route Service
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {}
  // Send email verification when new user sign up
  SendVerificationMail() {
    return this.afAuth.currentUser
      .then((user) => {
        return user.sendEmailVerification();
      })
      .then(() => {
        this.router.navigate(['verify-email-address']);
      });
  }
  // Sign up with email/password
  SignUp(email, password) {
    return this.afAuth
      .createUserWithEmailAndPassword(email, password)
      .then((result) => {
        this.SendVerificationMail(); // Sending email verification notification, when new user registers
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((result) => {
        if (result.user.emailVerified !== true) {
          this.SendVerificationMail();
          window.alert(
            'Please validate your email address. Kindly check your inbox.'
          );
        } else {
          this.ngZone.run(() => {
            this.router.navigate(['<!-- enter your route name here -->']);
          });
        }
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
}

We successfully constructed the auth.service.ts file and added some simple logic to it. Our AuthService class has three methods.

• SendVerificationMail(): Using the Firebase API and Angular, this method sends a verification email to newly generated users.
• SignUp(email, password): This technique allows users to create new accounts and sends them a verification email.
• If the email address is not confirmed, this SignIn(email, password) method blocks the user from gaining access.

You may also read my in-depth essay on Angular and the Full Firebase Authentication System.

By now, I believe you should be able to leverage the Firebase API with Angular to send a verification email to the newly formed user.

I hope you will like the content and it will help you to learn Angular 13 Firebase Send Mail Example
If you like this content, do share.