Angular 18 Login with Google Gmail Account Example

By Hardik Savani July 9, 2024 Category : Angular

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.


import { Component, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

  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() { }
  ngOnInit() {
   * 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'
    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement('script'); = id;
      js.src = "";
      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:


<div class="container mt-5">
  <h1>Google Login with Angular -</h1>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
        <button class="btn btn-danger" #loginRef>
            Login with Google

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:



I hope it can help you...