Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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() {
       cityTimerService.reset();
       firebaseAuthObject.$signOut();
    }

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

    function sendWelcomeEmail(emailAddress) {
       firebaseDataService.emails.push({
           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.

authentication.PNG

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
angularjs ,firebase ,authentication ,mobile ,app development

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 }}