AngularJS and Firebase Authentication

Question

I would like to add an authentication mechanism to my AngularJS app with Firebase backend. The requirements are simple:

Authenticated users should be able to access any page.
If unauthenticated users goes to /some_page (any page except /login), they should be redirected to /login. Once they enter the right credentials, they should be redirected to back to /other_page.

Possible solution that is described here makes the following assumption:

My solution assumes the following server side behaviour: for every /resources/* call, if user is not authorized, response a 401 status

But, I'm not sure if it is possible to enforce this behavior when using Firebase as a backend.

Any help and/or examples to implement such AngularJS+Firebase integration will be appreciated!

score 2 · Accepted Answer · answered Feb 21 '13 at 19:52

2

One solution is to do your routing on the client side with the $route service.

When a user authenticates through Firebase, save some record of this on the client, like in localstorage, some all-encompassing controller, or your own Angular service (my preferred option).

In your routing controller, if the user is authenticated, redirect to /some_page, otherwise redirect to /login and keep track of the $location where the user intended to go.

If, on the other hand, you want to route with your server, you could use the solution you linked to by having your server generate Firebase auth tokens.

answered Feb 21 '13 at 19:52

bennlich

1,207
10
21

Thanks for your answer. [Related question](http://stackoverflow.com/q/15024253/247243) – Misha Moroshko Feb 22 '13 at 12:30
Hi bennlich, are you mean store the auth info which returned from FirebaseAuthClient in Angular service ($rootScope). So next time we just get the info from $rootScope without calling FirebaseAuthClient? – vzhen Jun 09 '13 at 17:12
@vzhen see my answer to your SO question here: http://stackoverflow.com/questions/17026374/angularjs-should-i-rootscope-data-returned-from-firebase/17029756#17029756. In general it is better to share data through a service than through $rootScope (for modularity's sake and so that your $rootScope properties aren't accidentally overwritten). – bennlich Jun 10 '13 at 17:49

score 1 · Answer 2 · answered Apr 14 '15 at 14:39

I had the same requirement recently and came across this blog post. http://www.42id.com/articles/firebase-authentication-and-angular-js/

It explains setting up an Angular JS application that interacts with Firebase. Also included are ways to authenticate against OAuth providers such as Google+ and Github using Firebase API, routing based on authentication status, storing user profile information on Firebase and setting up security rules on Firebase to protect user data.

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

If you are using Firebase Simple Login (rather than generating the authentication tokens on your own servers), you can see how to detect your login state client-side here: Displaying text after login

edited May 23 '17 at 12:06

Community

1
1

answered Feb 22 '13 at 20:01

Andrew Lee

10,127
3
46
40

AngularJS and Firebase Authentication

3 Answers3