Integrating Firebase SDK Authorization with Angular

Posted by Slaven Tomac Friday, Jul 28, 2017
Angular + Firebase (Source: Angular (https://angular.io/) official logo + Firebase (https://firebase.google.com/) official logo)

In this tutorial, I will show you how to set up your Firebase database and Angular services to easily get you going with authorization process of your application.

I will not be giving an introduction to Angular here, but for those who want to learn Angular basics first, you can take a look here https://angular.io/tutorial

Firebase

Firebase is a cloud service where you can store your real-time noSQL database. While using its SDK the data is being synced through all of the apps which are currently connected to your database. It is a really fast way to get going developing your mobile/web application without worrying about the backend implementation (at that moment). Besides that, Firebase is a serious cloud platform which can be used in the production as well. For more information, as it offers a lot more (outside the scope of this blog), see here https://firebase.google.com/

Setting up new Firebase project

Go to https://console.firebase.google.com and click 'Add project'.

Creating a Firebase project

Go to Database and enter URL https://fir-project-1-cbefe.firebaseio.com/blogs and import following JSON there (we will use that for our demo).

JSON import

Setting up authentication in Firebase

Click on the Authentication entry on the left side and after that click 'Set up sign-in' method. In there, enable Email/Password authentication.

Setting up authentication

If you try to get your data with the following URL:

https://your_project_url_here/blogs.json

You will get:

{

    "error": "Permission denied"

}

And that is because initially only authenticated users can get the data. You can set this in rules tab. If you switch JSON to

Unsecured database

Anyone will be able to query/change the data. For this tutorial, put it to:

Auth database

Adding new user to Firebase

For this tutorial, we will add a user manually (but you can use Firebase SDK to create users as well). Go to Authentication entry from the sidebar (Users tab should be opened automatically). Click Add user and remember that credentials (we will use them later).

Add user

Now you have your Firebase backend all set up. We will switch to frontend part (with Angular) now.

Creating Angular service to handle all authorization logic

I will assume you have your Angular application ready since this will give you only some tips how you can organize your authorization part.

Initialize Firebase SDK

Within your application, you have to get Firebase SDK somehow and initialize it. For this example, we will be using NPM package for it (you can use it as a pure JavaScript library as well – see here for that https://firebase.google.com/docs/web/setup).  To get config data go to home page of your Firebase project and click 'Add Firebase to your web app'. Window with information should be shown:

Add Firebase info

Follow instructions there and install firebase npm package.

For initialization, we'll be using new AuthService:

Firebase app init

Call that from your main AppComponent

Auth service init

Now, we somehow need to log in into our backend. For that, we will use firebase's signInWithEmailAndPassword method which will return a token which we will be using for further communication with REST API. We will implement that method inside our AuthService:

Login

Here we are using signInWithEmailAndPassword to login into Firebase and after that is a success we are using getToken() method (which is async and therefore a promise, but there are also some user information in that response which you can store in your app) to get current user token to store it for later uses.

To use it, you can use it within any of your components:

Using login

Now, to get those blogs, we need to use this token in order if we want to get them. Let's create helper method in AuthService to get the token:

getToken

And use it like this:

Using getToken

Firebase is using auth key to authorize with the token.

Now it just remains to call getToken before each REST call and append it to URL like described above. I hope this tutorial will get you going with using other Firebase functions.

You can find entire code base here https://github.com/slavede/angular-firebase-auth

comments powered by Disqus

news / events / blogs