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:
angular-4-firebase-auth-reset-password-overview

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

angular-4-firebase-integration-copy-firebase-project-config

2. Enable Firebase Auth for Email/Password

Go to your Project on Firebase Console -> Authentication tab -> SIGN-IN METHOD -> enable Email/Password:
angular-4-firebase-auth-email-password-enable-console

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.
Template:

III. Practice

1. Project structure

angular-4-firebase-auth-anonymous-structure

2. App Module

3. Auth Service

4. Components
4.1 User Login Component

user-login.component.ts

user-login.component.html

4.2 User Info Component

user-info.component.ts

user-info.component.html

5. App Routing Module

app-routing.module.ts

6. App Component

app.component.ts

app.component.html

7. Check Result

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

Check error case (email was not registered before):
angular-4-firebase-auth-reset-password-result-error

Send reset password:
angular-4-firebase-auth-reset-password-result-ok

Check email:
angular-4-firebase-auth-reset-password-result-check-mail

Click the link inside the email, new browser window will opened with pop-up for resetting our password:
angular-4-firebase-auth-reset-password-result-pop-up-reset-password

Now we can login with new password.

IV. Source Code

Angular4Firebase-Auth-Email-Reset-Password

By JavaSampleApproach | September 14, 2017.


Related Posts


Got Something To Say:

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

*