Google Login with Angular | Google sign in with Angular

Let’s see how to integrate Google Login or Sign In with Angular Application.

This Angular tutorial helps you to integrate the google or social login with your angular application using the angularx-social-login NPM package with a perfect example.

Generally, the social login method is used to create a new account into the third-party applications. Here you learn how to integrate google sign in or login into Angular application using the Google developer console account and angular social login npm package – angularx-social-login.

The angularx-social-login package provides a social login/sign in and authentication module for Angular Applications. The angularx-social-login package is used to connect with Google, Facebook.

To connect gmail login into angular, you need to get the client id and secret key from the Google developer account. Create a Google app or project in the developer console account and get Google client id and secret key.

Before start working on the angular application, you need to install NodeJs, NPM and Angular CLI.

Install NodeJs – https://codeamend.com/blog/how-to-install-nodejs-and-npm-on-windows/

Run the below command to install the Angular CLI using the npm package manager.

npm install -g @angular/cli

For details about changes between Angular versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases

Follow the below steps to connect the google login with the Angular application

1: Create the new project.
2: Submit project name.
3: Select user type as External from the options on the OAuth consent screen.
4: Add the site domain and privacy policy URLs
5: Click the Create Credentials, and choose the OAuth client ID option.
6: Submit the web application details like app name and URLs
7: Get your Client Id and client secret.

Create a New Angular Application

To create a new Angular project, go to the directory of your new workspace and use the following command:

ng new google-login-app

Go to the new project directory using the below command:

cd google-login-app

Install Angular Social Login NPM Package

Use the NPM command to install the angularx-social-login package. Angular social login is the commonly used plugin that allows integration of the google social sign-in in Angular applications. Run the below command to install the angular social login package.

npm install angularx-social-login

Get Google Client ID & Secret from Google developer console

Open Google developer console and follow the below steps and screenshots respectively to create the Google client id and secret.

Create the latest project similarly shown images given below.

Enter the project name and click create.

Open the OAuth consent screen and select External from the options.

On the subsequent screen, you need to submit the app name, email, and site or privacy policy URL.

Then, click on the Create Credentials, choose OAuth client ID from the options.

Choose Web application from the application type options. Right after, define the app name, and your URL under the Authorized JavaScript origins options. Refer below image.

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

Connect Register Social Login Modules with angular app modules

Then we need to update the module information in the app module. Open app.module.ts file inside src/app folder, import following modules in imports as well as inside the providers’ array.

ReactiveFormsModule
SocialLoginModule
SocialAuthServiceConfig
GoogleLoginProvider

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 { }

Google client id need to be added within the GoogleLoginProvider() provider.

Integrate Google Login in Angular Components

Follow the below codes to integrate the Google Login in the Angular Application.

Open and edit app.component.html file.

<div>
    <h2>Angular Login with Google</h2>
    <div *ngIf="isLoggedIn === false">
        <div>
            <button type="button" (click)="loginWithGoogle()">Login with Google</button>
        </div>
    </div>
    <div *ngIf="isLoggedIn === true">
        <div class="form-group">
            <label>First Name</label>
            <input type="text" [value]="socialUser.firstName" id="firstname" readonly>
        </div>
        <br>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" [value]="socialUser.lastName" id="lastname" readonly>
        </div>
        <br>
        <div class="form-group">
            <label>Email</label>
            <input type="text" [value]="socialUser.email" id="email" readonly>
        </div>
        <br>
        <button type="button" (click)="logOut()">Log Out</button>
    </div>
</div>

Open and edit 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.css']
})
export class AppComponent implements OnInit {
    loginForm:any ='';
    socialUser:any="";
    isLoggedIn:boolean=false;
    
    constructor(private formBuilder: FormBuilder, private googleAuthService: SocialAuthService) { }

    ngOnInit() {
        this.loginForm = this.formBuilder.group({
            email: ['', Validators.required],
            password: ['', Validators.required]
        });    

        this.googleAuthService.authState.subscribe((user) => {
            this.socialUser = user;
            this.isLoggedIn = (user != null);
            console.log(this.socialUser);
        });
    }

    loginWithGoogle(): void {
        this.googleAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
    }

    logOut(): void {
        this.googleAuthService.signOut();
    }
}

Run the Angular Application

Google login integrated into angular, and now you can start the angular development server to test the app by running the below command then open URL – http://localhost:4200.

ng serve

Output

Important Note

You can improve your style by using the bootstrap on the angular applications. Run the below command to install the angular social login package.

npm i bootstrap

Then open angular.json file and add Bootstrap module CSS path in the styles array like below.

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

Total Views: 14,744

Google Login or Sign In with Angular Application