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 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'.
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).
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.
If you try to get your data with the following URL:
You will get:
And that is because initially only authenticated users can get the data. You can set this in rules tab. If you switch JSON to
Anyone will be able to query/change the data. For this tutorial, put it to:
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).
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
Follow instructions there and install firebase npm package.
For initialization, we'll be using new AuthService:
Call that from your main AppComponent
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:
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:
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:
And use it like this:
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.