use Google Sign-In

src/@types/gsi/index.d.ts

@@ -1,14 +1,14 @@
 declare namespace google { }
 declare namespace google.accounts { }
 declare namespace google.accounts.id {
-    export function initialize(config: object);
-    export function prompt(any);
+    export function initialize(config: IdConfiguration):void;
+    export function prompt(listener: (notification: PromptMomentNotification) => void): void;
 }
+
 declare namespace google.accounts.oauth2 {
     export function initTokenClient(config: TokenClientConfig): TokenClient;
     export function revoke(token: string): void;
 
-
 }
 
 interface TokenClient {
@@ -35,7 +35,27 @@ interface TokenClientConfig {
     scope?: string;
     prompt?: string;
     enable_serial_consent?: boolean;
-    hint?: string;
-    hosted_domain?: string;
+    login_hint?: string;
+    hd?: string;
     state?: string;
+}
+
+interface IdConfiguration {
+    client_id: string;
+    callback: (response: CredentialResponse) => void;
+    auto_select?: boolean;
+    login_hint?: string;
+    hd?: string;
+}
+
+interface CredentialResponse {
+    credential: string;
+    select_by: string;
+    state: string;
+}
+
+interface PromptMomentNotification {
+    isDisplayMoment(): boolean;
+    getMomentType(): string;
+
 }

src/lib/google-sign-in/lib/google-sign-in.module.ts

@@ -4,6 +4,7 @@ import { GoogleAccessTokenService } from './services/google-access-token.service
 import { GoogleApiLoaderService } from './services/google-api-loader.service';
 import { GoogleAuthService } from './services/google-auth.service';
 import { GoogleSignInLoaderService } from './services/google-sign-in-loader.service';
+import { GoogleSignInService } from './services/google-sign-in.service';
 
 
 @NgModule({
@@ -18,6 +19,7 @@ export class GoogleSignInModule {
                 GoogleAccessTokenService,
                 GoogleApiLoaderService,
                 GoogleAuthService,
+                GoogleSignInService,
                 GoogleSignInLoaderService,
             ]
         };

src/lib/google-sign-in/lib/services/google-api-loader.service.ts

@@ -2,6 +2,7 @@ import { Inject, Injectable, InjectionToken } from '@angular/core';
 import { forkJoin, Observable, ReplaySubject } from 'rxjs';
 import { GoogleApiClientConfig } from '../config/google-api.config';
 import { GoogleSignInLoaderService } from './google-sign-in-loader.service';
+import { GoogleSignInService } from './google-sign-in.service';
 
 export const GSI_CONFIG: InjectionToken<GoogleApiClientConfig> =
     new InjectionToken<GoogleApiClientConfig>('gsi.config');
@@ -19,14 +20,16 @@ export class GoogleApiLoaderService {
 
 
     constructor(@Inject(GSI_CONFIG) config: GoogleApiClientConfig,
-        private gsiLoader: GoogleSignInLoaderService) {
+        private gsiLoader: GoogleSignInLoaderService,
+    private signIn: GoogleSignInService) {
 
         this.loadGapi();
 
-        forkJoin([this.onLoad(), this.gsiLoader.onLoad()]).subscribe(() => {
+        forkJoin([this.onLoad(), this.gsiLoader.onLoad(), this.signIn.onSignedIn()]).subscribe(([_1, _2, cr]) => {
 
             this.client = google.accounts.oauth2.initTokenClient({
                 client_id: config.client_id,
+                login_hint: this.extractEmail(cr.credential),
                 scope: config.scope,
                 callback: () => undefined,
                 prompt: config.prompt || ''
@@ -59,4 +62,9 @@ export class GoogleApiLoaderService {
         };
         document.getElementsByTagName('head')[0].appendChild(node);
     }
+
+    private extractEmail(credential:string): string {
+        const {email, sub} = JSON.parse(atob(credential.split('.')[1]));
+        return email;
+    }
 }

src/lib/google-sign-in/lib/services/google-sign-in.service.ts

@@ -0,0 +1,40 @@
+import { Inject, Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+import { GoogleApiClientConfig } from '../config/google-api.config';
+import { GoogleSignInLoaderService } from './google-sign-in-loader.service';
+import { GSI_CONFIG } from './google-api-loader.service';
+
+
+
+
+@Injectable()
+export class GoogleSignInService {
+
+    private authenticated = new ReplaySubject<CredentialResponse>(1);
+
+
+    constructor(@Inject(GSI_CONFIG) config: GoogleApiClientConfig,
+        private gsiLoader: GoogleSignInLoaderService) {
+
+
+        this.gsiLoader.onLoad().subscribe(() => {
+
+            google.accounts.id.initialize({
+                client_id: config.client_id,
+                auto_select: true,
+                callback: (response: CredentialResponse) => {
+                    this.authenticated.next(response);
+                    this.authenticated.complete();
+                },
+            });
+            google.accounts.id.prompt((notification) => {});
+
+        });
+    }
+
+    public onSignedIn(): Observable<CredentialResponse> {
+        return this.authenticated;
+    }
+
+
+}