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

By JavaSampleApproach | September 13, 2017.

Last updated on December 27, 2017.


Related Posts


7 thoughts on “Angular 4 Firebase Auth – Email/Password Authentication with AngularFire2 v4”

  1. Try realise this, first time all work fine but… when I refresh main page, chrome append text fields automaticly and my login module is becoming invisible. Console log is empty. What did I miss? I use VS Code +Google Chrome

    1. Hi Vano,

      We updated source code with new requirement. Please check it again and send us feedback 🙂

      Regards,
      JSA.

  2. Hi Sir,

    Please specify the post installation steps for setting up locally.
    I’m unable to do so its showing several errors.

    Thanks,
    Afrin

  3. Hey, I have created an angular v2–5 library with material angular that allows user authentication with firebase.It’s easy to use and has many features like “forgot password | reset password | Sync user authentication with Firestore | support server side rendering for SEO purposes | feedback mechanism on error and on success | dynamic theme, pick up you major color to adapt it to your corporate id | fully responsive and more…” check this out https://www.npmjs.com/package/ngx-auth-firebaseui

    live demo can be found here https://ngx-auth-firebaseui.firebaseapp.com/

    I will appreciate your feedback

  4. It if giving errors like :-

    polyfills.js:3 Unhandled Promise rejection: Object(…) is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: Object(…) is not a function
    at MergeMapSubscriber.project (router.js:3888)
    at MergeMapSubscriber._tryNext (mergeMap.js:129)
    at MergeMapSubscriber._next (mergeMap.js:119)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:96)
    at BehaviorSubject._subscribe (BehaviorSubject.js:35)
    at BehaviorSubject.Observable._trySubscribe (Observable.js:173)
    at BehaviorSubject.Subject._trySubscribe (Subject.js:105)
    at BehaviorSubject.Observable.subscribe (Observable.js:161)
    at MergeMapOperator.call (mergeMap.js:93)
    at AnonymousSubject.Observable.subscribe (Observable.js:158) TypeError: Object(…) is not a function
    at MergeMapSubscriber.project (http://localhost:8100/build/vendor.js:58186:72)
    at MergeMapSubscriber._tryNext (http://localhost:8100/build/vendor.js:37618:27)
    at MergeMapSubscriber._next (http://localhost:8100/build/vendor.js:37608:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:15711:18)
    at BehaviorSubject._subscribe (http://localhost:8100/build/vendor.js:82180:24)
    at BehaviorSubject.Observable._trySubscribe (http://localhost:8100/build/vendor.js:327:25)
    at BehaviorSubject.Subject._trySubscribe (http://localhost:8100/build/vendor.js:18887:51)
    at BehaviorSubject.Observable.subscribe (http://localhost:8100/build/vendor.js:315:65)
    at MergeMapOperator.call (http://localhost:8100/build/vendor.js:37582:23)
    at AnonymousSubject.Observable.subscribe (http://localhost:8100/build/vendor.js:312:22)

Got Something To Say:

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

*