Simple Angular app with Firebase Authentication

Google’s firebase is a perfect Baas solution if you want to make a quick app with proper security. It allows you to add authentication to your app, provide a nosql backend database and hosting as well.

In this example, we will be focusing on how to integrate firebase authentication to your angular app with a simple sign in application. You can find the full github code here : https://github.com/ShinuMathew/ng-firebase.

Pre-requisites:

  1. You need to have node installed in your machine. We will be using v12.16.1 for this project.
  2. Install angular cli using npm. npm install -g @angular/cli.
  3. Create a firebase account. https://firebase.google.com/
  4. Add a new Project.

Step 1:

  • Create an angular app with the angular cli “ng new angular-firebase”
  • Install firebase dependencies firebase and @angular/fire : “npm install firebase @angular/fire

Step 2:

  1. Fetch the firebase config from firebase project console.

2. Add the firebaseConfig to the app.module.ts of the project by importing AngularFireModule from @angular/fire as below.

Step 3:

  1. Create new service : “ng generate service services/firebase”.
  2. Add the FirebaseService to “providers” array in app.module

3. Inside the FirebaseService class we are going to create 3 methods.

  • signInWithEmailAndPassword
  • signUpAsNewUser
  • logout

We will be using firebase auth methods for the above actions which is found in AngularFireAuth class in @angular/fire/auth package

So, import { AngularFireAuth } from ‘@angular/fire/auth’;

4. Add the below methods to your FirebaseService class

// SignIn with email and passwordasync signInWithEmailAndPassword(email : string, password : string) {  try {   let user = await this.angularFireAuth.signInWithEmailAndPassword(email, password);   if (user.user) {   localStorage.setItem('user', JSON.stringify(user.user));   console.log(user.user)  } } catch (e) {  console.log("Unexpected error occurred when trying to log you in.   Please try later") }}// SignIn with email and passwordasync signUpAsNewUser(email : string, password : string, firstName? : string, lastName? : string, phoneNo? : number) {  try {   let user = await this.angularFireAuth.createUserWithEmailAndPassword(email, password);   user.user.phoneNumber = phoneNo.toString()   user.user.displayName = `${firstName} ${lastName}`   if (user.user) {    localStorage.setItem('user', JSON.stringify(user.user));    console.log(user.user)   }  } catch (e) {    console.log("Unexpected error occured when trying to log you in. Please try later")  }}
// Logoutasync logout() { try { await this.angularFireAuth.signOut(); localStorage.removeItem('user'); } catch (e) { console.log("Unexpected error occured when trying to log you in. Please try later") }}

Step 4:

  1. Add authentication to your firebase app in firebase console.
  2. Navigate to your app and go to Authentications tab.

3. Enable Email/Password option

4. Save the settings

Step 5:

  1. Now use this methods in your component by importing the FirebaseService to your component.ts
import { Component, OnInit } from '@angular/core';import { FirebaseService } from 'src/app/services/firebase.service';@Component({  selector: 'app-signin',  templateUrl: './signin.component.html',  styleUrls: ['./signin.component.css']})export class SigninComponent implements OnInit {  constructor(public firebaseService : FirebaseService) { }  async onSignIn(email, password) {    await this.firebaseService.signInWithEmailAndPassword(email, password);  }}

2. Add view to the component

<div class="signin-form">  <h2>Sign In</h2>  <input #email type="text" placeholder="Email"/>  <input #password type="password" placeholder="Password"/>  <button (click)="onSignIn(email, password)">Submit</button></div>

Step 6:

Repeat the above steps for SignUp.

Now you are done with a simple Firebase auth integration. However there’s a lot to do with this project like styling, routing, route guarding, etc

You can refer to a complete demo here.

Senior SDET - Samsung Electronics | Java | Node | Python | Flutter | Angular | Linux