Thinkster
Firebase
Build a Real-Time Slack Clone using AngularFire
  •  

Authenticating Users using angularFire

Learn how to authenticate users with Firebase using the official AngularFire library

Creating a registration and login system for your app can be tedious, but is often one of the most important and required features, and usually requires you to create your own backend. Thankfully, Firebase makes this really easy for us by providing us with a hosted solution.

Enable the "Email/Password" sign-in method in the "Authentication" section of your Firebase dashboard.

Next, you'll have to configure our Angular app and point the Firebase library at our Firebase

Configure the Firebase SDK

First, you'll need to retrieve our Firebase credentials. In the "Authentication" section of the Firebase dashboard, click on "Web Setup". You'll need the code inside the second script tag to configure your application. At the end of app/app.js, wrap the code in an Angular config block. This ensures that the Firebase library is configured before Angular tries to use it.

.config(function(){
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
})

Creating the Auth Service

Let's create a new factory called Auth in app/auth/auth.service.js
angular.module('angularfireSlackApp')
  .factory('Auth', function(){

  });

Here we'll inject $firebaseAuth, which is a service that AngularFire provides us with. We'll need to create a reference to Firebase using firebase.database().ref(), which we'll be passing to the $firebaseAuth service. See the angularFire API docs for a list of available methods $firebaseAuth provides. Our factory will return the $firebaseAuth service associated with our Firebase.

Inject $firebaseAuth into our Auth factory.
Create an auth variable that references a $firebaseAuth instance and have your factory return it

The resulting factory should look like this:

angular.module('angularfireSlackApp')
  .factory('Auth', function($firebaseAuth){
    var auth = $firebaseAuth();

    return auth;
  });

Now that we have an Auth service ready for our application to use, let's create a controller to use with our login and registration forms.

Check your work

You can view the completed & working code for this tutorial here: