Authorization of users with AngularJS and Firebase

In the last article , I talked about Firebase. Today I want to tell how I organized user authorization using AngularJS and Firebase.

At the moment I am working in my free time on my project, if in brief, this is a service for creating prototypes of SPA applications, I think soon I will be able to tell more about it, but only about authorization. Why did I choose Firebase? It's simple, I am a very lazy programmer and I don’t like to write bicycles, and this service offers a bunch of ready-made solutions, including authorization and user registration.

For the basis of the project, I use ngBoilerplate, so I consider it a fairly successful build that does not require any special modifications. The assembly preinstalled Twitter Bootstrap, Angular UI, Angular Bootstrap, Font Awesome and LESS. Also fine tuned by Grunt and Bower. To install and run a clean application, you just need to run the following commands:

$ git clone git://github.com/joshdmiller/ng-boilerplate $ cd ng-boilerplate $ sudo npm -g install grunt-cli karma bower $ npm install $ bower install $ grunt watch 

')

Something I moved away from the topic, we will continue. In the project, I created an authentication module and called it, oddly enough, Auth. That's actually what it looks like:

 angular.module('Auth', [ 'firebase' ]) .service('AuthService', [ '$rootScope','$firebase', '$firebaseAuth', '$location', '$q', function AuthService( $rootScope, $firebase, $firebaseAuth, $location, $q ){ var firebaseObj = new Firebase('https://your-firebase-app.com/'); var userStorageKey = 'authUser'; var authUser = $.jStorage.get(userStorageKey) || { status:false, data: false }; return { createUserByEmail: function(email, password){ var deferred = $q.defer(); firebaseObj.createUser({ email : email, password : password }, function(error) { if (error === null) { deferred.resolve({ status: true }); } else { deferred.resolve({ status: false, error: error }); } }); return deferred.promise; }, signInUserByEmail: function(email, password){ var deferred = $q.defer(); firebaseObj.authWithPassword({ email : email, password : password }, function(error, data) { if (error === null) { // user authenticated with Firebase authUser = { status: true, data: data }; deferred.resolve(authUser); $.jStorage.set(userStorageKey, authUser); } else { deferred.resolve({ status: false, error: error }); } }); return deferred.promise; }, changeUserPass: function(email, password, newPassword){ firebaseObj.changePassword({ email : email, oldPassword : password, newPassword : newPassword }, function(error) { if (error === null) { console.log("Password changed successfully"); } else { console.log("Error changing password:", error); } }); }, resetAndSendPassword: function(email){ firebaseObj.resetPassword({ email : email }, function(error) { if (error === null) { console.log("Password reset email sent successfully"); } else { console.log("Error sending password reset email:", error); } }); }, deleteUser: function(email, password){ firebaseObj.removeUser({ email : email, password : password }, function(error) { if (error === null) { console.log("User removed successfully"); } else { console.log("Error removing user:", error); } }); }, getUserState:function(){ //console.info(Date(authUser.data.expires)); console.info(authUser); if(authUser.data){ var data = firebaseObj.getAuth(); authUser = { status: data ? true : false, data: (data == null) ? {} : data }; $.jStorage.set(userStorageKey, authUser); } return authUser.status; }, logOut: function(){ $firebaseAuth(firebaseObj).$unauth(); $.jStorage.deleteKey(userStorageKey); $rootScope.$userState = this.getUserState(); }, getAuthUser: function(){ return authUser.data; } }; }]) .directive('signInForm', [ '$rootScope', 'AuthService', '$location', function( $rootScope, AuthService, $location){ return{ restrict: 'A', templateUrl: 'auth/templates/sign-in.tpl.html', link: function(scope, element, attrs){ scope.userEmail = ''; scope.userPassword = ''; scope.userState = AuthService.getUserState(); scope.signInUserByEmail = function(){ AuthService.signInUserByEmail(scope.userEmail, scope.userPassword) .then(function(response){ scope.userState = AuthService.getUserState(); if(scope.userState) { alert('You are logged in'); $location.path('profile'); } else{ alert('Incorrect user email or password'); } }); }; } }; }]) .directive('signUpForm', [ '$rootScope', 'AuthService', '$location', function( $rootScope, AuthService, $location){ return{ restrict: 'A', templateUrl: 'auth/templates/sign-up.tpl.html', link: function(scope, element, attrs){ scope.userEmail = ''; scope.userPassword = ''; scope.facebookEnabled = false; scope.userState = AuthService.getUserState(); scope.isRegistered = false; scope.createUser = function(){ AuthService.createUserByEmail(scope.userEmail, scope.userPassword) .then(function(response){ if(response.status){ alert("Congratulations! You've successfully signed up. You can authorize"); scope.isRegistered = true; } else{ alert(response.error); } }); }; } }; }]) ; 

It consists of three parts: the service (AuthService) and two directives (one for the login form - signInForm, and the second for registration - signUpForm). Directives are of no particular interest, we are interested in a service in which everything happens. Inside the service there are a number of functions:

• createUserByEmail - creates a new user using email
• signInByEmail - user authorization by email
• changeUserPass - password change function
• The resetAndSendPassword is also a function to change the password, but it is different in that the old password will be reset, and the new one will come to the user in the mail
• deleteUser - delete user
• getUserState - the function that checks the user is authorized or not and returns its status
• logOut is logout (thanks to cap)
• getAuthUser - returns the data of the authorized user.

In the directives you can see a simple implementation of authorization and user registration.

Also, in the code you can see that I decided to use jStorage to store data about an authorized user. The choice fell on him because it is simple and remarkably supported by different browsers (even IE6).

Well, this is actually all you need to authorize / register users using Firebase. It is also possible to very simply add authorization / registration using social networks (Google, Facebook, Twitter, GitHub) for this you just need to go to the admin page on the Firebase website, check several checkboxes and specify the keys to your applications.

I don’t know what to write anymore, so I’ll be happy to answer any of your questions in the comments. Advice and suggestions, too, will be very happy.