Google Social Login With Angular 12 Tutorial

Angular 12 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 sign in 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/sign-in 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 sign in into angular 12, 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.

Google Login with Angular 12 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

If you don’t have installed angular on your machine then please follow my Angular installation guide

Commence the first step by installing the new angular project:

ng new ng-demo-app

Including, getting 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 the 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:

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 sign-in in angular applications.

npm install angularx-social-login

BashCopy

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ReactiveFormsModule } from '@angular/forms';

import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    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 { }

TypeScriptCopy

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>

MarkupCopy

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 '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();
  }

}

TypeScriptCopy

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

BashCopy

The provided URL will start the project:

http://localhost:4200

BashCopy

Conclusion

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

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