Angular 4 Firebase Auth – Send Reset Password Email with AngularFire2 v4

In previous post, we had know way to build an Angular 4 App that allows user sign up and login (with form validation). This tutorial shows you how to implement function that can send Reset Password Email using AngularFire2 v4.

Related Posts:
Angular 4 Firebase Auth – Anonymous Authentication with AngularFire2 v4
Angular 4 Firebase Auth – Email/Password Authentication with AngularFire2 v4

I. Technology

– Angular 4
– AngularFire2 4.0

II. Overview

Basing on code from previous post, we will continue to add send Reset Password function:

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.


2. Enable Firebase Auth for Email/Password

Go to your Project on Firebase Console -> Authentication tab -> SIGN-IN METHOD -> enable Email/Password:

3. Build Angular 4 App that supports Email/Password Authentication

For details, take a look at the post below:
Angular 4 Firebase Auth – Email/Password Authentication with AngularFire2 v4

4. Auth Service

– We subscribe to the AngularFire auth observable that returns a FirebaseAuthState object. This object is null when logging out, and contains useful User Information (UID, Display Name, Photo URL…) when logging in.
– We use AngularFireAuth.auth.sendPasswordResetEmail() to send reset password email.

5. App Module

6. Use Service – Login Component

isValidMailFormat(email) function checks if user has entered right email format or not.
Once that format is right, link for resetting password will appear.
And after resetPassword() is done, resetPassword flag will be changed to true for displaying notification.
If there is an error, we can catch it and display as notification.

III. Practice

1. Project structure


2. App Module

3. Auth Service

4. Components
4.1 User Login Component



4.2 User Info Component



5. App Routing Module


6. App Component



7. Check Result

Run the App, go to http://localhost:4200/.

Check error case (email was not registered before):

Send reset password:

Check email:

Click the link inside the email, new browser window will opened with pop-up for resetting our password:

Now we can login with new password.

IV. Source Code


By grokonez | September 14, 2017.

Last updated on November 29, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *