Angular 16 Firebase Send Mail Example Tutorial

Last Updated on by in Angular

In this Angular Firebase tutorial, I am going to demonstrate how to send verification email to the new user? Also, we will explain, how to prevent new users from accessing their account unless they validate their email address.

Firebase offers many powerful features for creating an authentication system. Sending email verification is not that difficult using Angular Firebase.

I am going to show you how you can achieve this functionality very easily using Firebase API (AngularFire2 Library).

I will be using AngularFire2 library from the node package manager (NPM) and the latest Angular release for this tutorial.

Install Firebase packages in Angular app.

npm install @angular/fire firebase@9.16.0 --legacy-peer-deps

Once you are done setting up this library, make the connection between your Firebase account and your Angular app.

Create src/environments/ folder and environment.ts file, then add firebase configurations in environments/environment.ts file.

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

Execute command to generate service class file using given command:

ng generate service auth

Remove TypeStrict Errors

In order to remove strict type warnings or errors make sure to set “strict”: false, "noImplicitReturns": false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

Import AuthService Class in app.module.ts

// Auth service
import { AuthService } from "./auth.service";

providers: [

Create the Auth Service for sending verification email using Firebase auth.service.ts

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.router.navigate(['<!-- enter your route name here -->']);
      .catch((error) => {

We have successfully created auth.service.ts file and written pretty straightforward logic in it. There are 3 methods in our AuthService class.

  • SendVerificationMail(): This method sends a verification email to newly created users using Firebase API with Angular.
  • SignUp(email, password): This method allows users to create a new account and sends a verification email to a newly created user.
  • SignIn(email, password): This Sign in method prevents the user to access if the email address is not verified.

Here is the final app.module.ts file, in this file we imported couple of Firebase services and components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from "./auth.service";

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';

import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';

  declarations: [AppComponent, SignInComponent, SignUpComponent],
  imports: [
  providers: [AuthService],
  bootstrap: [AppComponent],

export class AppModule {}

You can further create the components and connect to the angular service to create user with email and password.

You can also check out my detailed article on Full Firebase Authentication System with Angular.

GitHub Project Files


I believe you must be able to send a verification email to the newly created user using Firebase API with Angular by now.Thanks a lot for taking the time to read this tutorial, I hope this tutorial has been helpful to you. If you think this tutorial has helped you then share this tutorial with others.