Angular 4 Firebase Auth – Email/Password Authentication with AngularFire2 v4

In this tutorial, we’re gonna look at way to implement Email/Password authentication (with form validation) using AngularFire2 v4.

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase Auth – Anonymous Authentication with AngularFire2 v4

I. Technology

– Angular 4
– AngularFire2 4.0

II. Overview

We will build an Angular 4 App that allows user sign up and login (with form validation):
angular-4-firebase-auth-email-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. 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.createUserWithEmailAndPassword() to sign up new account.
+ AngularFireAuth.auth.signInWithEmailAndPassword() to log in.
+ AngularFireAuth.auth.signOut() to log out.
– We also catch Exception to get Error information and throw it for register/login validation (Error will be catch later at Component which uses this service’s functions)

4. App Module

5. Use Service – Login Component

We will validate 2 times:
– before calling AuthService using validateForm()
– after AuthService throws an error using firebase.Thenable.catch()

Template:

III. Practice

1. Project structure

angular-4-firebase-auth-anonymous-structure

angular-4-firebase-auth-email-password-overview-component

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/.

Register and Login:
angular-4-firebase-auth-email-password-login-result

Firebase Console:
angular-4-firebase-auth-email-password-console-result

Check Validation:
angular-4-firebase-auth-email-password-validation-result

IV. Source Code

Angular4Firebase-Auth-Email-Password


Related Posts


Got Something To Say:

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

*