Angular 16 Google Social Login or Sign In Tutorial

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 application using Google developer account (client id and key) in conjugation with angularx social login plugin.

The angularx-social-login library provides a social login/signin and authentication module. To implement google login or signin into angular, you must have a client id and secret. You can get a client id and secret only after creating a Google project or app inside the Google developer console.

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

ng new ng-demo-app

Go inside the project folder by entering the command below :

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

Step 1: You have to create the latest project similarly shown as given below:

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

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

Step 4: Additionally, on the subsequent screen, you need to define the site or privacy policy url:
Step 5: Next, click on the Create Credentials, choose OAuth client ID from the options:
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.
Home » Angular » Angular 16 Google Social Login or Signin Tutorial
Angular 16 Google Social Login or Signin Tutorial
Last updated on: August 20, 2023 by Digamber

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 application using Google developer account (client id and key) in conjugation with angularx social login plugin.

The angularx-social-login library provides a social login/signin and authentication module for Angular 9+.

It is not limited to login with Google and immaculately supports authentication with Facebook, Amazon, including VK. Nonetheless, if you have some other providers, then fret not; you can also build social login with another provider.

To implement google login or signin into angular, you must have a client id and secret. You can get a client id and secret only after creating a Google project or app inside the Google developer console.

You will also be taught to create and get a client id and secret in conjugation with the google developer console.

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
This step profoundly explains how to get the Google client id and secret. Thereupon, head over to the Google developer console and follow the suggested steps respectively:

Step 1: You have to create the latest project similarly shown as given below:
Step 2: Define the project name like it is declared on the following screenshot:
Step 3: Further, you see internal and external user type within the OAuth consent screen; hence select External from the options:
Step 4: Additionally, on the subsequent screen, you need to define the site or privacy policy 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:
Step 7: Ultimately, the OAuth client popup manifests on the screen, from here you can copy Your Client Id or client secret.

Install Angular Social Login Package

Generically, now we have to use the NPM command to install the angularx-social-login package. This is the most quintessential plugin which allows building google social signin in angular application.

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, social login integrated into angular, and now you need to start the angular development server to test the app:

ng serve --open

Conclusion

Eventually, the angular login with Google tutorial is over; in this tutorial, we extensively explained how to signin with google in angular using the Google client id.

I hope you will love this step by step guide and share it with others.