How to make simple role based authorization in AngularJS and FireBase?
17,446
There is a lot information about how to make it.
Articles / guides / answers from stackoverflow
- Article about advanced data modelling and role based authorization
- Article about role based routing in AngularJS (by ng-mm-route)
- Little guide about developing a permission-based authorization system in a AngularJS app
- Article about authorization and role based permissions in AngularJs
- Good solution from StackOverflow
- Recommendation from StackOverflow (angular permission)
Helpful repositories
- Basic user profile management
- Demo to show how to use Angular + Firebase + Google Material Design together
- Simple Login (Facebook, Twitter, Google, Github) and Chat Application with Angular and Firebase
- Role based authorization for Firebase
- Role-based permissions for AngularJS
- Stand-alone project showing how to make a robust angular application serving access permissions from Server
Author by
Ann Pavlov
Updated on June 04, 2022Comments
-
Ann Pavlov almost 2 years
I want to make a simple role based authorization in AngularJS and FireBase (admin, user). I made the base authorization, and routing (look at 3 files below).
I found a repository in github and article but code is too hard for me. Is there an easier way? How do I change my code to add this functionality? I would be grateful for links to articles and repositories that can help me.
app.js
var app = angular.module( 'journalApp', [ 'firebase', 'ngRoute' ] ); app.constant( 'FIREBASE', '<FIREBASE URL>' ); app.config( [ '$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ) { $routeProvider.when( '/login', { templateUrl: 'views/login.html', controller: 'loginCtrl', controllerAs: 'loginCtl' } ); $routeProvider.when( '/logout', { templateUrl: 'views/login.html', controller: 'loginCtrl', controllerAs: 'loginCtl', resolve: { "logout": [ "authService", function( authService ) { authService.signOut(); }] } } ); $routeProvider.when( '/', { templateUrl: 'views/dashboard.html', resolve: { "currentAuth": [ "authService", function( authService ) { var auth = authService.auth(); return auth.$requireSignIn(); }] } }); $routeProvider.otherwise( { redirectTo: '/' } ); $locationProvider.html5Mode( true ); } ] ); app.run( [ "$rootScope", "$location", function( $rootScope, $location ) { $rootScope.$on("$routeChangeError", function(event, next, previous, error) { if (error === "AUTH_REQUIRED") { $location.path("/login"); } }); } ] );
loginCtrl.js
app.controller( 'loginCtrl', [ 'authService', function( authService ) { var self = this; self.signUp = function() { authService.createUser(self.email, self.password); }; self.logIn = function() { authService.authUser(self.loginEmail, self.loginPassword); }; self.signOut = function() { authService.signOut(); }; }]);
authFactory.js
app.factory( 'authService', [ '$firebaseAuth', '$window', function( $firebaseAuth, $window ) { var authService = {}; var auth = $firebaseAuth(firebase.auth()); authService.createUser = function(email, password) { auth.$createUserWithEmailAndPassword( email, password ); }; authService.authUser = function( email, password ) { auth.$signInWithEmailAndPassword( email, password ).then(function( user ) { $window.location.href = "/"; }, function( error ) { var errorCode = error.code; var errorMessage = error.message; console.info( "Error in authUser - errorCode: " + errorCode + ". errorMessage: " + errorMessage); }); }; authService.signOut = function() { auth.$signOut(); }; authService.auth = function() { return auth; }; return authService; }]);
-
Frank van Puffelen over 7 yearsNice repository of links! I also highly recommend "neat trick #2" from this talk at this year's I/O: youtu.be/5hYMDfDoHpI?t=9m13s
-
bojeil over 6 yearsFirebase just launched support for role based access via custom user claims on the ID token: firebase.google.com/docs/auth/admin/custom-claims