Angular 14 Tutorial- Learn To Firebase Login With Google

Angular 14 Tutorial- Learn To Firebase Login With Google

Angular 14 Firebase Login With Google; We will learn how to create the Firebase Google Login Auth system in Angular. We already know that Firebase offers numerous features for User Authentication Service.

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

It’s pretty easy to implement Firebase Google Login Authentication Service to let our users Authenticate with Google API with Angular.

In this Angular tutorial, we will use AngularFire Library from the Node Package Manager (NPM) and the latest Angular release.

Setup Angular App For Creating Login With Google

ng new angularfirebaseprojectCopy

Our basic project will be set up after it enters into the project folder by using the given command:

cd angularfirebaseprojectCopy

Further, we set “strict”:false under compilerOptions property in the tsconfig.json file in order to remove strict type warnings or errors:

Setup AngularFire2 Library In Angular

In this step, we have to set up Firebase (AngularFire2 Library) in our Angular project:

npm install firebase @angular/fire --saveCopy

After we have set up this library, we need to make the connection between our Firebase account and our Angular app.

So, we go to the src/environments/environment.ts file in our project’s environments folder. Then, we will add the Firebase configuration in the environment files as given below:

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

Enable Google Auth Provider Service In The Firebase Account

We will now go to our Firebase account and click on the Authenticate button on the sidebar navigation menu and then click in front of the Google link:

Here, we will enter our Project name and Project support email token. Then, click on the save button. This method will activate our Google Auth Provider Service from firebase nackend.

Create Auth Service And Sign In Component

Now, we create the auth.service.ts core file which will hold our main logic:

ng generate service authCopy

Then, we will create Sign In template

ng generate component signinCopy

Create Main Auth Service

Now, we will create the auth.service.ts file in the Angular project:

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);
                                }
                                ); 
                             }
                         }

Here, we go to our signin.component.ts component:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css'],
})
export class SignInComponent implements OnInit {
  constructor(public authService: AuthService) {}
  ngOnInit() {}
}Copy

Implement Google Login Auth Provider Service In Angular HTML Template

Afterward, we integrate Firebase Google Login Auth Provider in the signin.component.html template:

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

We may get the reference of the final app module class by viewing the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { SigninComponent } from './signin/signin.component';
@NgModule({
  declarations: [AppComponent, SigninComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {}Copy

Now, we have to evoke the auth components by adding the given tags in the app.components.ts file:

<app-signin></app-signin>Copy

We are ready to view the application on the browser:

ng serve --openCopy

Conclusion

Here, in this Angular guide, we have learned how smooth and easy it is to build a firebase login with Google in an Angular app.

Also Read: React JS | Advantages and Disadvantages