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!

Answer 1

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.

Answer 2

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.

Answer 3

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