Angular 14 Google OAuth Social Login Example Tutorial

Angular Login with Google tutorial, In this comprehensive tutorial, you will find out how to build Google social login in angular with the help of Google OAuth Client ID or Google API, most notably the profound angularx-social-login library.

The angularx-social-login package allows creating login into angular with Google, Facebook, Amazon, and VK.

If you have a requirement to build a login with a custom provider, you can do so. You will see the simple way of how to implement login with Google in an angular step by step.

Social login is the user-friendly method to let the user to access the application without the headache of signing up for a new account. This method enhances the user-engagement and also make the authentication process smooth.

You may use any provider like Google, Twitter, Facebook, VK, or even the custom one to signin into angular; when the user clicks on the login auth button, the user information is collected from the social login platform.

In the angular google login example, we will create a signin with a google button; when the user hits the UI button, then on the successful login, the user’s first name, last name, and email information will be displayed on the input fields.

Moreover, we will also learn to create Google OAuth API for making the angular google social login possible. This way, you will get the google client id and key. Thereupon, without wasting much time, let’s start implementing signin with google in angular.

Angular 14 Google Social Login Example

  • Step 1: Create Angular Project
  • Step 2: Get OAuth Client ID
  • Step 3: Install Angular Social Login Library
  • Step 4: Implement Google OAuth Signin
  • Step 5: Test Login with Google

Create Angular Project

First you make sure you have Angular CLI installed on your system:

npm install -g @angular/cli

Now, start the other process by creating a new a new angular application:

ng new login-with-angular-demo

Next, move inside the app:

cd login-with-angular-demo

To design the UI component swiftly, you need Bootstrap package and you can install it with below command:

npm install bootstrap

Add the Bootstrap main CSS in the styles array as shown here:

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

Get OAuth Client ID

You have to get the client id to create the signin with google in angular. Consequently, go to Google Developer Console, and follow the suggested process:

  • Step 1: On the google developer console, you have to click on the “create project” button for making the auth API.
  • Step 2: On the New, Project screen, provide the project name; likewise, click on the CREATE button.
  • Step 3: Right after, head over to the OAuth consent screen, choose the External option. This will help you choose to configure and register Google auth API for specific users.
  • Step 4: Afterward, provide application home page url, application privacy policy link, application terms of service link, or other mandatory details.
  • Step 5: Further, you need to select Web application from the application types; moreover, add the Authorized JavaScript origin to handle the request from a browser.
  • Step 6: Finally, the OAuth client screen appeared, from here you can grab your client id and client secret that you need in a while.

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install Angularx Social Login Package

Next, open the console then execute the suggested command to install the angularx-social-login package.

npm i angularx-social-login

Plus, import SocialLoginModule, SocialAuthServiceConfig, GoogleLoginProvider, ReactiveFormsModule modules, add into the imports and providers array as described by the code example. Also, you have to pass the google client id inside the GoogleLoginProvider() method.

Hence, open and add the given code in 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, 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'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }    
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implement Google OAuth Signin in Angular

Open and update below code in app.component.html file:

<div class="container" style="max-width: 500px">

  <button type="button" (click)="googleSignin()" class="btn btn-block btn-primary">Signin with Google</button>

  <div *ngIf="isSignedin === true" class="mt-4">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [value]="user.firstName" class="form-control" id="firstname" readonly>
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" [value]="user.lastName" class="form-control" id="lastname" readonly>
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="text" [value]="user.email" class="form-control" id="email" readonly>
    </div>
    <button type="button" (click)="logout()" class="btn btn-primary">Log Out</button>
  </div>

</div>

Add the following code in app.component.ts file:

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 {

  reactiveForm: FormGroup;
  user: SocialUser;
  isSignedin: boolean;  
  
  constructor(private fb: FormBuilder, private socialAuthService: SocialAuthService) { }

  ngOnInit() {
    this.reactiveForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });    
    
    this.socialAuthService.authState.subscribe((user) => {
      this.user = user;
      this.isSignedin = (user != null);
      console.log(this.user);
    });
  }

  googleSignin(): void {
    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

  logout(): void {
    this.socialAuthService.signOut();
  }

}

Test Angular Login with Google

Now, we can test the Login with google example, therefore open the command line terminal and execute the following command to start the angular development server:

ng serve

Check out the demo app with following url:

http://localhost:4200

Conclusion

The angular google social login tutorial is over, and this tutorial profoundly explained the best way to integrate google API in association with building angular signin auth app using Google OAuth Client.