Angular and Firebase Authentication Integration

Angular and Firebase Authentication Integration

What are Firebase and Firebase authentication

The world is moving fast and developers need ways to deliver faster. This is where Firebase comes in — offering a tableless database storage system that comes complete with API interfaces that developers can use and reduce the need for an intermediary layer. 


Firebase has been around since 2012. Despite its initially slow uptake, it is growing in popularity as a tool for rapid prototyping and agile product delivery. 


While we often associate Firebase with data usage and storage, it is more than just a database. It is a complete suite of services, making it a full stack backend platform that you can use immediately. Cloud Firestore and Realtime Database is where your data lives. Cloud Functions lets you create microservice styled executions without the need for a separate backend, and hosting is where your frontend lives. 


Authentication rounds it off with the ability to use popular auth profiles like Google, Twitter, Facebook, or email verification without compromising on security.


Firebase itself is a massive area to explore. For the purpose of this tutorial, we will be focusing on implementing authentication with an Angular application.


Without further ado, let’s begin.


How to add Angular Fire to your Angular app


Once you have your Angular app set up, you can add authentication to your app. You’ve decided to use Firebase as the provider service rather than building your own from scratch.


To do this, you’ll need to add Angular Fire to your application. This module will connect your app to Firebase via config keys.


Here’s how you do it.


Step 1: Set up your Firebase project


The first thing to do is set up your Firebase project. Head over to the Firebase console, click on the ‘Add project’, give it a name, accept the terms and conditions and then click the ‘create project’ button.


Here’s a screenshot walkthrough of what it looks like:


1. Click on ‘Add project’.


  1. Give your project a name. No spaces allowed. Click on ‘continue’.



3. Deselect the analytics integration option as circled below:



4. Wait for the project to boot up. Your screen should look like this:



5. This is what it looks like when it’s completed loading. Once that’s done, navigate to your app by pressing ‘Continue’:



6. Look over to the left hand side where your options panel lives. Choose ‘Settings’. Add an app by clicking on ‘Add app’ and a Firebase SDK snippet will become available. This SDK snippet contains the config keys.



7. Once selected, scroll down to the bottom of the page. Under ‘Your apps’ section, select the ‘web’ option to set up a new app for this project.



8. A pop-up will appear. Give you app a name. Click on ‘Register app’.



9. Once completed, it will give you a ‘Firebase SDK’ script. You only need the firebaseConfig part.



10. If you’ve already got your app set up and want to access these details later, you just need to return to the ‘Settings’ page. Scroll down to the bottom. There will be two options to select from. Choose ‘Config’ to get the right JSON. This information will be used to connect up your Angular app ’s suite of services.



Step 2: Install Angular Fire

You will need firebase and @angular/fire packages. This will give you AngularFireModule and AngularFirestoreModule.

Use the following command in your terminal to install them:



Once this is done, navigate to your environment.ts file, located inside the environments folder, and paste the config details inside the environment object.
Your final environment object should look something like this:


Navigate to app.module.ts and import environment, AngularFireModule, and AngularFirestoreModule . Your code should look something like this:


Now that we’ve done that, we need to set up some auth profiles on Firebase.


Step 3: Setting up/using one of Firebase’s auth profiles


Firebase is a suite of services and its Authentication part includes 12 different profiles you can choose from: email/password, phone, Google, Play Games, Game Center, Facebook, Twitter, GitHub, Yahoo, Microsoft, Apple, and Anonymous sign in.


The process for using auth profiles often follows this flow:



For this tutorial, we’ll go over how to set up a simple email/password authentication process.

Navigate to the Authentication option in Firebase’s console. Select Sign-in method and enable Email/Password as the provider.

Here’s the screenshot walkthrough.

1. On your main console page, select ‘Authentication’:




2. Select ‘Sign-in method’. Hover over ‘Email/Password’. Click on the pencil that appears.



3. This will toggle the row and expand an options panel. Toggle the enable/disable slider. Click on ‘Save’.



4. This is what it looks like when an auth profile type is active:



Step 4: Adding Auth to your Angular app


Firebase has predefined API functions that you can use. Here is a quick list for the email/password login method:


  • .createUserWithEmailAndPassword(email,password)
  • .signInWithEmailAndPassword(email,password)
  • signOut()

To create a new user, you will need to push an email/password pair over to Firebase using .createUserWithEmailAndPassword(email,password).


To sign in a user, use .signInWithEmailAndPassword(email,password)


And finally, to logout, use signOut(). This works for all login profiles provided by Firebase.


For example, to create a service that contains these three functionalities, you can create a new service file with AngularFireAuth imported. Here is what you code can potentially look like:



To implement these service functions, you just need to call them in your component as needed.

Here is a quick example:



There you have it. Firebase will do the rest and deal with the management of logged in states and user login profiles.


However, while this is nice, the purpose of having a log in is to prevent unauthorized access to specific areas of your application. In Angular, this is where protected routes come in handy.


Step 5: Integrating auth into your Angular app with routes


Protected routes in Angular are called route guards. There are five different types of guards and each has its own accessibility levels. Here is a quick rundown:


  • CanActivate: checks the permission of the current user. If true, allows passage into the route.
  • CanActivateChild: checks the permission of the current user if they have the ability to access a child route. This can be good for fine-tuning admin or level of roles.
  • CanDeactivate: If all guards returns true, navigation can continue. If any guard returns false, then navigation is cancelled.
  • CanLoad: Checks if the user has permissions to load the requested child routes.
  • Resolve: Lets the user retrieve the data needed for a particular route. This is the last interface used if all conditions of access are met.


To create a route guard for pages that are only accessible by logged in users, a AuthGuard service can be used on the route.


For example, your routes may look something like this:



And in your route guard service:



Your _authService is linked to the sign in services and the response received from the server. So rather than console.log the response, you pass it into your route guards to verify.


How to address potential security vulnerabilities 


Although Firebase does most of the heavy lifting when it comes to security and identity management, there are still a few things you need to consider when it comes to application vulnerabilities.


You are still in charge of front end verification: this means you’ll need to find ways to deal with bot signups and brute force attacks. You might need to put in verification methods and limit login attempts. Account locking is a method that can help prevent brute-force attackers from gaining access to your protected routes.


Security of passwords still requires SSL: it’s easy to boot up an app without a second thought about security. Firebase has no formal requirement that passwords need to be sent through a secure system. Putting in an SSL will prevent your data packages from being sent over as simple and plain text.


client-side Angular app: When your entire login-process sits in the front end, malicious users have access to all of your front end code. Putting your Angular app on the server side can reduce this risk, and configuring it to only serve authenticated pages from the server after logging in can increase security. This can also reduce cross-site scripting and attacks.


Wrapping up


Those are the basics of implementing Firebase authentication with Angular and Angular protected guard routes.


If you want to use GitHub, Facebook, Twitter, or any of the other available login identities, you’ll need to create an app profile for the service you’re after. This is because they are third party providers and Firebase is the intermediary and central space for authentication management. 


Firebase acts as backend role management for profiles but not actually the auth providers themselves. It is a system that lets you keep all your auth profiles and connections in one place, while acting as an intermediary that connects your auth profiles to third party providers such as GitHub and Facebook. 


Thanks for reading this piece, I hope you’ve found it helpful!


Aphinya Dechalert

Aphinya Dechalert / About Author

Aphinya is a skilled technical writer with field experiences in software development, agile, and JavaScript full stack with AWS and Google cloud. She is a developer advocate and community builder, helping others navigate their journeys and careers as developers.