Firebase- Authentication Using AngularJS

DZone 's Guide to

Firebase- Authentication Using AngularJS

Firebase has an authentication feature that's easy to utilize with AngularJS in your Web app. Take a look at the steps and understand the concepts here.

· Mobile Zone ·
Free Resource

In the past weeks, I have written several posts about Firebase Real-Time DatabaseFirebase Storage and the new version of AngularFire 2.3.0 which includes Firebase Storage as well. In my first post, I told you that Firebase provides us a wide range of tools and I mentioned Authentication but I didn't have the opportunity to talk about it yet. A couple of weeks ago, @lmoroney wrote a bunch of posts regarding this topic, that inspired me to start this series of posts to give you my point of view of this powerful tool.

Adding Firebase To Your Web App

We only need to reference AngularJs, Firebase, and AngularFire libraries in your project.

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.2.0/angularfire.min.js"></script>

Then we need to add Firebase configuration in our index.html. To do that, we need to go into the Firebase console and get the initialization code.

Creating Your Data Layer

Now I will create an AngularJS service to use as data layer. This service will be responsible for creating our links to the Firebase Authentication. Here we are going to use another object from the Firebase library,  $firebaseAuth .

 function authService($firebaseAuth, firebaseDataService, cityTimerService) {
    var firebaseAuthObject = $firebaseAuth();

    var service = {
       firebaseAuthObject: firebaseAuthObject,
       register: register,
       login: login,
       logout: logout,
       isLoggedIn: isLoggedIn,
       sendWelcomeEmail: sendWelcomeEmail

    return service;


    function register(user) {
       return firebaseAuthObject.$createUserWithEmailAndPassword(user.email, user.password);

    function login(user) {
       return firebaseAuthObject.$signInWithEmailAndPassword(user.email, user.password);

    function logout() {

    function isLoggedIn() {
       return firebaseAuthObject.$getAuth();

    function sendWelcomeEmail(emailAddress) {
           emailAddress: emailAddress

Enable the Authentication Methods

Before going further there is something we need to do in our Firebase console in order to enable the sign-in methods as I did in the image below. In my case, I enabled two methods: Email/Password and Anonymous, but as you can see, we can also select Google, Facebook, Twitter, or GitHub.


Understanding The $firebaseAuth Object

This object provides us a really good interface to work with the authentication in Firebase. Today I'll explain you four methods:

$createUserWithEmailAndPassword : This method receives two parameters- email and password- and returns a promise containing a firebase.User.

$signInWithEmailAndPassword : This method receives again two parameters- email and password- and returns a promise containing a firebase.User object. It throws an error in case the email and password don't match.

$getAuth : This method returns a promise containing a firebase.User.

$signOut : This method is going to sign out the current logged in user and returns a string containing the email of the user in case of success.

As you can see, handling the authentication using Firebase Authentication is really simple. In this post, I just covered the basics to get the authentication up and running in our app. In the following post, I'll be covering more complex scenarios.

For a complete reference of the Authentication API, use this link. For a complete reference of Angular Fire, use this link. For a complete reference of Firebase, use this link.

If you are in doubt, don't hesitate to ask a question and, as always, thank you for reading.

angularjs, app development, authentication, firebase, mobile

Published at DZone with permission of Ezequiel Reyno . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}