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 AngularFire2 Library from the Node Package Manager (NPM) and the latest Angular release.

 

Setup Angular App For Creating Login With Google

ng new angularfirebaseproject

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

cd angularfirebaseproject

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 --save

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

 

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:

Firebase Google Credentials Setting

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.

Google Details

 

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 auth

Then, we will create Sign In template

ng generate component signin

 

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() {}
}

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>

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 {}

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

<app-signin></app-signin>

We are ready to view the application on the browser:

ng serve --open

 

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.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *