Angular 11 Firebase Login with Google Example Tutorial

Last updated on March 31, 2021 by Digamber

I am going to explain how to create Firebase Google login Auth system in Angular 11. Firebase provides various features for the user authentication system. To create firebase auth service with Google you must know how to use this powerful real-time database.

You can easily implement Angular Firebase Google login auth service to let your users to authenticate with Google API with Angular app. I will be using Angular CLI AND AngularFire2 library from the node package manager (NPM).

Step: 1 – Install Angular App

ng new angularfirebaseproject

Your basic project will be set up after that enter into the project folder by using the following command.

cd angularfirebaseproject

You can follow this detailed article to set up the Angular project with external dependencies like Bootstrap4, FontAwesome, SASS, and NgBootstrap.

Step: 2 – Setup AngularFire2 Library in Angular

Now setup Firebase (AngularFire2 library) in your Angular project.

npm install firebase @angular/fire --save

Once you are done setting up this library, make the connection between your Firebase account and your Angular app.

Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project’s enviornments folder. Then add your firebase configuration details in both the environment files as given below.

Firebase Credentials Setting

Step: 3 – Enable Google Auth Provider Service in Firebase Account

Go to your Firebase account and click on Authenticate button on the sidebar navigation menu then click in front of the Google link.

Enter your Project name and project support email token then click on the save button. This method will activate your Google auth provider service from Firebase backend.

Step: 4 – Create Auth Service and Sign in component

Create auth.service.ts core file which will hold our main logic.

ng generate service auth

Create Sign in the template

ng generate component signin

Step: 5 – Generate Main Auth Service

Go to your auth.service.ts template.

import { Injectable } from '@angular/core';
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
  ) { }

  // Sign in with Google
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }  

  // Auth logic to run auth providers
  AuthLogin(provider) {
    return this.afAuth.auth.signInWithPopup(provider)
    .then((result) => {
        console.log('You have been successfully logged in!')
    }).catch((error) => {
        console.log(error)
    })
  }

}

Go to your signin.component.html template.

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

  constructor(public authService: AuthService) { }

  ngOnInit() { }

}

Step: 6 – Implement Google Login Auth Provider Service in Angular HTML Template

Integrate Google login service in signin.component.html template.

<!-- Calling GoogleAuth() Api from AuthService -->
<div class="formGroup">
  <button type="button" (click)="authService.GoogleAuth()">
    Log in with Google
  </button>
</div>

Thanks a lot for taking the time to read this article, I believe this post really helpful to you. If you think this tutorial has been helpful to you then must share this post with others.

You can download the full code of this tutorial from GitHub.