Angular 13 Firebase Send Mail Example
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'; @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(); }); } // 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(); }); } }) .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. Read the full article
