Angular 13 Google Social Login

Angular 13 social login with google; Through this tutorial, i am going to show you how to integrate google social login or signin in angular 13 apps.

Angular 13 Google Social Login

Follow the below given steps to add google social login in angular 13 apps; as follows:

  • Step 1 – Create Google Login App
  • Step 2 – Create New Angular App
  • Step 3 – Install Social Google Login Library
  • Step 4 – Import Modules on App.Module.ts File
  • Step 5 – Create Goolge Login View
  • Step 6 – Add Code On App.Component ts File
  • Step 7 – Start the Angular Google Login App

Step 1 – Create Google Login App

  1. Open the Google API Console. If you don’t have a Google account, select More options > Create account and then fill in the form to create an account.
  2. From the projects list, select a project or create a project.
  3. Open the API Library.
  4. Search the API Library for the Google Play Custom App Publishing API.

Step 2 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 3 – Install Social Login Library

Install NPM package called angularx-social-login and bootstrap library for implement google social login in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install --save angularx-social-login

After that, open angular.json file and update the following code into it:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

Step 4 – Import Modules on App.Module.ts File

Go to src/app directory and open app.module.ts file. And please add YOUR-GOOGLE-CLIENT-ID in following code. Then add the following lines of into app.module.ts file:

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, AuthServiceConfig } from 'angularx-social-login';
const config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("YOUR-GOOGLE-CLIENT-ID")
  }
]);
export function provideConfig() {
  return config;
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5 – Create Goolge Login View

Go to src/app/app.component.html and add the following code into it:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Angular 13 Google Social Login - Laratutorials.com</title>
  </head><body class="bg-light">
  <div class="container">
    <div class="row py-5 justify-content-center">
      <div class="col-md-8">
        <h1 class="text-center py-4">Angular 13 Sign In with Google - Laratutorials.com</h1>        
        <div *ngIf="loggedIn===false">
          <div>
            <button type="button" (click)="signInWithGoogle()" class="btn btn-primary">Sign In With Google</button>
          </div>
        </div>        
        <div *ngIf="loggedIn===true">
          <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname" [value]="user.firstName" readonly >
          </div>          <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname" [value]="user.lastName" readonly >
          </div>          <div class="form-group">
            <label for="email2">Email</label>
            <input type="text" class="form-control" id="email2" [value]="user.email" readonly >
          </div>
        
          <button type="button" (click)="signOut()" class="btn btn-primary">Sign Out</button>         </div>
      </div>
    </div>
  </div>
</body>
</html>

Step 6 – Add Code On App.Component ts File

Go to the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService,GoogleLoginProvider, SocialUser } from 'angularx-social-login';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  signinForm: FormGroup;
  user: SocialUser;
  loggedIn: boolean;  
  constructor(private fb: FormBuilder, private authService: AuthService) { }  
  ngOnInit() {
    this.signinForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      console.log(this.user);
    });
  }  
  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
  signOut(): void {
    this.authService.signOut();
  }
}

Step 7 – Start the Angular Google Login App

Run the following command on command prompt to start angular google social login app:

ng serve

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.