shemmjunior / ngx-google-auth

Google one tap authentication library for angular

ngx-google-auth

---

A new Google Identity Services library for angular

📝 Table of Contents

• About
• Getting Started
• Deployment
• Usage
• Built Using
• Authors
• References

🧐 About

As google are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date this library. According to Google, the new GIS SDK uses pop-up dialogues in the browser, which helps reduce user friction, streamlines authentication and authorization flows, and increases user engagement.

This library was generated using angular v11.2.14, other versions are untested.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

What things you need to install the software and how to install them.

• NodeJs - Base Environment
• Angular - Angular Environment

Installing

npm install ngx-google-auth

🔧 Running the tests

A step by step series of guides how to install the library for local dev. From here I assume you have already installed nodejs to your local machine, Next is:

1. Install Angular v11.2.14 using npm i @angular/cli@11.2.14
2. On the root directory of this project run npm install to install all projects dependencies

Add more tests steps here.

🎈 Usage

1. Install the package from npm with

npm i ngx-google-auth

2. Import the module to GoogleAuthModule

import { GoogleAuthModule } from 'ngx-google-auth';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GoogleAuthModule.forRoot({ clientId: 'provide_your_client_id' })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Import the service anywhere on your component

import { Component } from '@angular/core';
import { GoogleAuthService } from 'dist/google-auth'; // After running ng build google-auth

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  constructor(private googleAuthService: GoogleAuthService) {}

  load(): void {
    this.googleAuthService
      .init({
        context: 'signin',
        callback: (response: any) => {
          console.log(response);
          /** Continue with your logic */
        }
      });
  }
}

3. For better security please verify the token on your server side Verifying Token on the server side

⛏️ Built Using

• NodeJs - Base Environment
• Angular - Angular Environment

✍️ Authors

• @shemmjunior - Initial work

🎉 References

• Google Identity Services - Introduction
• Google Identity Services Guides - Guides