Getting Started

Firebase Authentication with Angular

Learn how to authenticate users with Angular and Firebase

Liat Kompas

Published in

Firebase Developers

5 min readJan 2, 2022

Website application development brings us many challenges. One of them is users' identity. Using Firebase Authentication makes this mission simpler, saves us a significant amount of time, and speeds up code implementation.

This post will cover Firebase Authentication — how, when, and why to use Firebase Authentication.

Firebase

Before drilling down to Authentication, let's explain what Firebase is.
Firebase is a BaaS (backend as a service) platform. It allows us to develop server-less web or mobile applications.
It exposes features and tools such as Cloud Function, CLI, Firestore, ML, and much more.

For more information, see Firebase’s site

Firebase Authentication

Firebase Authentication is one of Firebase's key features. It helps identify our users and manage users’ data quickly and easily. Firebase Authentication provides backend service and UI libraries that save us plenty of code and therefore speed up our development.
Using Firebase Authentication reveals sign-in methods like email and password, phone number, and popular federated identity providers like Twitter and Facebook.

How it works

Firebase Authentication implements industry-standard OAuth 2.0 and OpenID Connect to identify users. First, we get credential data from the user, such as Email and password, or an OAuth token from a federated identity provider. We send this data to Firebase Authentication SDK. The backend service verifies the credential and sends the response back to the client.
After the user successfully signs in to our app, we can get the user’s basic information like name and profile picture.

Firebase Pros

Using industry authentication standard
Integrates with other Firebase services
Comprehensive sign-in methods, including integration with OAuth providers
Exposes UI libraries to support client-side
Development time saver
Easy to use and manage
Free to use

Getting Started

This section displays code examples using Angular 13.0.1 and Firebase 9.5. The code example requires basic Angular understanding.

1. Create a Firebase project

To create your first Firebase project, go to Firebase Console, sign in with your Google account, and add a firebase project to your web app.

2. Setup sign-in methods

In your Firebase project, go to Authentication, click on Get Started to get into Sign-in methods, and enable the required methods.

Pay attention that federated identity providers' methods need extra data. For example, working with Facebook requires creating a Facebook app and updating the App ID and App Secret.

The next step is registering our web application in Firebase. In the Firebase project console, click on the web icon.

Add your web application name. At this point, you can add Firebase hosting or do it later, and click register app.

The following screen shows some instructions on installing Firebase and setting up our web app with the Firebase SDK. We can use either npm or the script tag. I chose the npm option for my Angular project.

Let’s go through it step by step

3. Setup your Angular project

To use Firebase Authentication, we need to install the firebase package, as was described in the image above. In addition, we need to install firebaseui to use in our Angular app.

To install all dependencies with npm run:

npm install firebase firebaseui @angular/fire firebaseui-angular -- save

4. Update app.module.ts

Import relevant modules:

Update imports in the NgModule decorator

Add the firebaseUiAuthConfig constant to set up FirebaseUI functionality like sign-in methods to use, terms of service, and privacy policy URLs.

To learn more, check out the docs at FirebaseUI configuration.

* Pay attention that sign-in methods in the firebaseUiAuthConfig are equivalent to enabled methods in your project in the Firebase console. In my Firebase project, I enabled only email and Facebook providers, therefore my firebaseUiAuthConfig signInOptions includes just those two.

5. Setup environment.ts and environment.prod.ts files:

To add the Firebase SDK to your Angular project, set up project environments files and add thefirebaseConfig property to the environment object.

5. Import firebase UI style

In your styles.scss file add the import command below to set the authentication style:

6. Start coding

At this point, our Angular project is set up with Firebase Authentication. We are now a few lines of code away from completing the mission.

My Angular project includes the following components: Home, About, Contact, Profile, and Nav.

Inject the AngularFireAuth object to the app.component.ts and nav.component.ts constructors.

Add the firebase-ui component to app.component.html. Pay attention to the ngIf directive on the div element that wraps the firebase-ui component; it will display the firebase-ui or the router-outlet component according to the Firebase user state.

On the firebase-ui component we have two sign-in callback functions:

signInSuccessWithAuthResult for success callback function. It receives a FirebaseUISignInSuccessWithAuthResult object. This object includes user data properties such as an access token, name, email, photo, etc. according to the data Firebase gets from the provider.
signInFailure for failure sign-in function callback that receives a FirebaseUISignInFailure object. This function is provided to handle unrecoverable errors during the sign-in process.

In nav.component.html add the same ngIf directive with the same condition on the navigation bar div wrapper and the profile picture. In addition, add a click action to run fbAuth.signOut() function on the logout li element.

When launching the application for the first time, the Firebase Authentication UI will be displayed.

After the user signs in, the Home component will be displayed in the router-outlet instead of the firebase-ui component. All navigation functionality will be enabled in the navigation bar as well.