Hello folks, In this Angular 7/8/9 Firebase tutorial, I am going to answer commonly asked question How to send verification email to the new user? I am also going to show you 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 7/8/9 release for this tutorial.
ng generate service auth
app.module.ts
// Auth service
import { AuthService } from "./shared/services/auth.service";
providers: [
AuthService
]
auth.service.ts
import { Injectable, NgZone } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/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 verfificaiton when new user sign up
SendVerificationMail() {
return this.afAuth.auth.currentUser.sendEmailVerification()
.then(() => {
this.router.navigate(['<!-- enter your route name here -->']);
})
}
// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.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.auth.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 -->']);
});
}
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
}
We have successfully created auth.service.ts
file and written pretty straightforward logic in it. There are 3 methods in our AuthService class.
You can also check out my detailed article on Full Firebase Authentication System with Angular 7.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Check for a Hash (#) in a URL using JavaScript
Use the Window.location Property You...Dynamic Add Edit Delete Table Row in jQuery
In this article, I will share with you h...Delete an Element From an Array in PHP
While working with PHP array, you may wa...JavaScript vs jQuery Differences
When new developer starts learning in We...How to Get the Class Name of an Object in JavaScript
Use the name Property You can use the...