Angular 18 Login with Google Gmail Account Example
Hi Dev, In this post, I will show you how to add login with google account in angular 18 application.
In this illustration, we're incorporating a button labeled "Login with Google." Upon clicking the button, a popup will appear prompting the user to grant access to their Gmail account for login purposes. To achieve Google account login in Angular 18, simply follow the steps outlined below:
Step for Login with Google in Angular 18
- Step 1: Create Google App
- Step 2: Create Angular 18 Project
- Step 3: Update Component TS File
- Step 4: Update Component HTML File
- Run Angular App
Let's follow the below steps:
Step 1: Create Google App
Here you need to create a google app and get the client id and secret. so let's go to Google Console.
Now let's see one by one screenshot show you:
Step 2: Create Angular 18 Project
You can easily create your angular app using below command:
ng new my-new-app
Step 3: Update Component TS File
Here, we will use ElementRef from "@angular/core" package. so, let's update "app.component.ts" file.
src/app/app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'loginGoogle';
auth2: any;
@ViewChild('loginRef', {static: true }) loginElement!: ElementRef;
constructor() { }
/*------------------------------------------
--------------------------------------------
About
--------------------------------------------
--------------------------------------------*/
ngOnInit() {
this.googleAuthSDK();
}
/**
* Write code on Method
*
* @return response()
*/
callLoginButton() {
this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
(googleAuthUser:any) => {
let profile = googleAuthUser.getBasicProfile();
console.log('Token || ' + googleAuthUser.getAuthResponse().id_token);
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
/* Write Your Code Here */
}, (error:any) => {
alert(JSON.stringify(error, undefined, 2));
});
}
/**
* Write code on Method
*
* @return response()
*/
googleAuthSDK() {
(window)['googleSDKLoaded'] = () => {
(window)['gapi'].load('auth2', () => {
this.auth2 = (window)['gapi'].auth2.init({
client_id: 'GOOGLE_CLIENT_ID',
cookiepolicy: 'single_host_origin',
scope: 'profile email'
});
this.callLoginButton();
});
}
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script');
js.id = id;
js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
fjs?.parentNode?.insertBefore(js, fjs);
}(document, 'script', 'google-jssdk'));
}
}
Step 4: Update Component HTML File
Let's update app.component.html file with following code:
src/app/app.component.html
<div class="container mt-5">
<h1>Google Login with Angular - ItSolutionStuff.com</h1>
<div class="row mt-5">
<div class="col-md-4 mt-2 m-auto ">
<button class="btn btn-danger" #loginRef>
Login with Google
</button>
</div>
</div>
</div>
Run Angular App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:
ng serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:4200
Output:
I hope it can help you...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Angular 18 HttpClient & Http Services Tutorial
- Angular 18 RxJS Observable with Httpclient Example
- How to Define Global Variables in Angular 18?
- Angular 18 Template Driven Form with Validation Example
- Angular 18 Multiple Image Upload Example Tutorial
- Angular 18 File Upload Tutorial Example
- Angular 18 Image Upload with Preview Example
- Angular 18 Reactive Forms with Validation Example
- How to Add Bootstrap 5 in Angular 18 Application?
- How to Update Angular 17 to Angular 18 Version?