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: [

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';
  providedIn: 'root',
export class AuthService {
    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(() => {
  // 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) => {
  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((result) => {
        if (result.user.emailVerified !== true) {
            'Please validate your email address. Kindly check your inbox.'
        } else {
          this.ngZone.run(() => {
            this.router.navigate(['<!-- enter your route name here -->']);
      .catch((error) => {

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.

Recommended Posts

View All

Best Strategies for Building Enterprise Applications with Angular

Learn the best strategies for building enterprise applications with Angular. Discover tips and tricks to create scalable and maintainable apps.

Advanced Techniques for Optimizing Angular Performance

Learn advanced techniques for optimizing Angular performance, including lazy loading, AOT compilation, change detection strategies, caching strategies...

What is the difference between constructor and ngOnInit?

Learn the difference between constructor and ngOnInit in this informative article. Find out how each method works and when to use them in Angular.


Angular is one of the most popular JavaScript-based frontend frameworks in the world and also very popular here on GitHub.

Angular 13 - Create a Firebase login with Facebook

Learn how to build Firebase Login with Facebook in Angular with Firebase and how to use the Firebase Facebook login authentication module in simple wa...