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.
Next, you'll have to configure our Angular app and point the Firebase library at our Firebase
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
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.
$firebaseAuth into our Auth factory.
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: