Angular 16 Google Social Login or Signin Tutorial

Last Updated on by in Angular

Angular Google social login tutorial, In this extensive tutorial, you will discover how to create Google social login in an angular application using the angularx-social-login package.

Social login is the way of accessing or signing in to the third-party app without creating a new login account, especially using the current information gathered from social media platforms like Google, Twitter, Facebook, etc.

In this angular google login example: We will show you how to implement google Signin into Angular using Google Developer, and Angular social login plugin.

Angular 16 Login with Google Example

  • Step 1: Install New Angular App
  • Step 2: Install Bootstrap UI
  • Step 3: Get Google Client ID & Secret
  • Step 4: Install Angular Social Login Package
  • Step 5: Register Social Login Modules
  • Step 6: Integrate Google Social Login in Angular
  • Step 7: Run Angular Application

Install New Angular Project

Commence the first step by installing the new angular project:

ng new ng-demo-app

Including, get into the project’s root:

cd ng-demo-app

Install Bootstrap UI

To make the google login auth template, you need bootstrap; hence install it now with below command:

npm i bootstrap

Next, place the Bootstrap module CSS path in the styles array:

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Get Google Client ID and Secret

We have compiled a series of steps leading towards: How to create a new project in Google for Developer account and how get a Client ID, Secret.

It will allow obtain Google secret keys to implement Login with Google in Angular.

First, head over to Google Developer console:

Step 1: Now, you have to create the latest project similarly shown as given below:

create the project

Step 2: Define the project name like it is declared on the following screenshot:

project name

Step 3: Further, you see internal and external user type within the OAuth consent screen; hence select External from the options:

external user type

Step 4: Additionally, on the subsequent screen, you need to define the site or privacy policy url:

site url

Step 5: Next, click on the Create Credentials, choose OAuth client ID from the options:

choose OAuth client ID

Step 6: On top of that, choose Web application from the application type options. Right after, provide the app name, define your URL app under the Authorized JavaScript origins options.

For instance, we are working on localhost; consequently, we defined the localhost URL:

choose OAuth client ID

Step 7: Ultimately, the OAuth client popup manifests on the screen, from here you can copy Your Client Id or client secret.

Google Client Id or client secret

Install Angular Social Login Package

To implement Google Social Signin with Angular, run the following command to install the angularx-social-login package.

npm install @abacritt/angularx-social-login --legacy-peer-deps

Register Social Login Modules in App Module

Open app.module.ts file, import ReactiveFormsModule, SocialLoginModule, SocialAuthServiceConfig and GoogleLoginProvider modules.

Also, inject these modules in imports as well as inside the providers’ array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import {
  SocialLoginModule,
  SocialAuthServiceConfig,
} from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, SocialLoginModule],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('Google-Client-ID-Goes-Here'),
          },
        ],
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

We imported GoogleLoginProvider from the ‘angularx-social-login’ package, albeit you can also import the other social platforms in conjunction with building social login in angular.

Moreover, the Google client id has to be injected within the GoogleLoginProvider() provider.

Integrate Google Social Login in Angular

In this step, we will do the most crucial task of this tutorial, which is to implement angular google social login.

Hence, app.component.html template file and add the following code.

<div class="container" style="max-width: 550px">
  <h2 class="text-center mb-5">Angular Login with Google</h2>
  <div *ngIf="isLoggedin === false">
    <div>
      <button type="button" (click)="loginWithGoogle()" class="btn btn-danger">Login with Google</button>
    </div>
  </div>
  <div *ngIf="isLoggedin === true">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly>
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly>
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" [value]="socialUser.email" id="email" readonly>
    </div>
    <button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button>
  </div>
</div>

Open and update the app.component.ts template.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
  SocialAuthService,
  GoogleLoginProvider,
  SocialUser,
} from '@abacritt/angularx-social-login';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  loginForm!: FormGroup;
  socialUser!: SocialUser;
  isLoggedin?: boolean;
  constructor(
    private formBuilder: FormBuilder,
    private socialAuthService: SocialAuthService
  ) {}
  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });
    this.socialAuthService.authState.subscribe((user) => {
      this.socialUser = user;
      this.isLoggedin = user != null;
      console.log(this.socialUser);
    });
  }
  loginWithGoogle(): void {
    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
  logOut(): void {
    this.socialAuthService.signOut();
  }
}

Run Angular Application

Ultimately, Google social login has been integrated in Angular, this leads us to start the app development server.

So, to start the app, use below command:

ng serve --open

The provided url will start the project:

http://localhost:4200

Conclusion

In this guide we covered an imperative topic: How to SignIn with Google using Angular and Google client id.

Eventually, the Angular Login with Google example tutorial is over! Hope you will love and share this tutorial with others.

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.