Angular 16 Firebase Login with Google Tutorial

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

Next, to remove strict type warnings or error make sure to set “strict”: false under compilerOptions property in tsconfig.json file.

Step: 2 – Setup AngularFire2 Library in Angular

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

npm install @angular/fire firebase@9.16.0 --legacy-peer-deps

You’ve successfully installed AngularFire2 library from NPM community, let’s make the communication between your Firebase account and your Angular app.

First, create src/environments/ folder and environment.ts file, then add firebase configurations in environments/environment.ts file.

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

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

Step: 5 – Generate Main Auth Service

Go to your auth.service.ts template.

import { Injectable } from '@angular/core';
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}

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

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

Go to your app.component.ts template.

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

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

export class AppComponent {
  constructor(public authService: AuthService) {}
}

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

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

<div class="formGroup">
  <button type="button" (click)="authService.GoogleAuth()">
    Log in with Google
  </button>
</div>

Here is the final reference of app module class, you may add the given code in the the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent],
})

export class AppModule {}

We are ready to view the application on the browser.

ng serve --open

Thanks a lot for taking the time to read this article, I believe this post have been helpful to you. If you think this tutorial produced the results as expected then must share this guide with others.Read more: Complete Angular Firebase Authentication Tutorial

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