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.

• Navigate to firebase console : https://console.firebase.google.com/project/
• Open your project
• Add a new app -> web -> enter the app name -> Register app and get the firebaseConfig from Add Firebase SDK

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 password
async 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 password
async 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")
  }
}

// Logout
async 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.