I am going to explain how to create Firebase Google login Auth system in Angular 7|8|9 . Firebase provides various features for the user authentication system. To create firebaseauth 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).
ng new angularfirebaseproject
Your basic project will be set up after that enter into the project folder by using the following command.
cd angularfirebaseproject
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.
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.
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
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() { }
}
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>
i hope you like this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to create custom radio buttons in HTML using CSS and jQuery
Use the CSS :checked Pseudo-class with j...How to Create Custom Maintenance Page in Laravel 7.x Example
In this article, I will apportion you si...Block and Inline elements
Every element in HTML has display level....How to split a string into an array in PHP
Use the PHP explode() function...Laravel Eloquent One to Many Polymorphic Relationship Tutorial with Example
In a database structure, There are many...