use angularx social login

core/gui/package.json

@@ -21,6 +21,7 @@
   },
   "private": true,
   "dependencies": {
+    "@abacritt/angularx-social-login": "2.1.0",
     "@ali-hm/angular-tree-component": "12.0.5",
     "@angular/animations": "16.2.12",
     "@angular/cdk": "16.2.12",

core/gui/src/app/app.module.ts

@@ -140,6 +140,10 @@ import { LandingPageComponent } from "./hub/component/landing-page/landing-page.
 import { BrowseSectionComponent } from "./hub/component/browse-section/browse-section.component";
 import { BreakpointConditionInputComponent } from "./workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component";
 import { CodeDebuggerComponent } from "./workspace/component/code-editor-dialog/code-debugger.component";
+import { SocialLoginModule, SocialAuthServiceConfig, GoogleSigninButtonModule } from "@abacritt/angularx-social-login";
+import {
+  GoogleLoginProvider,
+} from "@abacritt/angularx-social-login";
 
 registerLocaleData(en);
 
@@ -289,6 +293,8 @@ registerLocaleData(en);
     NzTreeViewModule,
     NzNoAnimationModule,
     TreeModule,
+    SocialLoginModule,
+    GoogleSigninButtonModule,
   ],
   providers: [
     provideNzI18n(en_US),
@@ -303,6 +309,24 @@ registerLocaleData(en);
       useClass: BlobErrorHttpInterceptor,
       multi: true,
     },
+    {
+      provide: "SocialAuthServiceConfig",
+      useValue: {
+        autoLogin: false,
+        lang: "en",
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              "127689596526-if7cekkg5fv1kpva65h0cdth2l2sadts.apps.googleusercontent.com"
+            ),
+          },
+        ],
+        onError: err => {
+          console.error(err);
+        },
+      } as SocialAuthServiceConfig,
+    },
   ],
   bootstrap: [AppComponent],
 })

core/gui/src/app/common/service/user/auth.service.ts

@@ -61,7 +61,13 @@ export class AuthService {
   public googleAuth(credential: string): Observable<Readonly<{ accessToken: string }>> {
     return this.http.post<Readonly<{ accessToken: string }>>(
       `${AppSettings.getApiEndpoint()}/${AuthService.GOOGLE_LOGIN_ENDPOINT}`,
-      `${credential}`
+      credential,
+      {
+        headers: {
+          "Content-Type": "text/plain",
+          "Accept": "application/json",
+        },
+      }
     );
   }
 

core/gui/src/app/common/service/user/google-auth.service.ts

@@ -15,45 +15,22 @@ export class GoogleAuthService {
   private _googleCredentialResponse = new Subject<CredentialResponse>();
   constructor(private http: HttpClient) {}
   public googleAuthInit(parent: HTMLElement | null) {
-    this.waitForGoogleScript(2000)
-      .then(() => {
-        this.http.get(`${AppSettings.getApiEndpoint()}/auth/google/clientid`, { responseType: "text" }).subscribe({
-          next: response => {
-            window.google.accounts.id.initialize({
-              client_id: response,
-              callback: (auth: CredentialResponse) => {
-                this._googleCredentialResponse.next(auth);
-              },
-            });
-            window.google.accounts.id.renderButton(parent, { width: 200 });
-            window.google.accounts.id.prompt();
-          },
-          error: (err: unknown) => {
-            console.error(err);
-          },
-        });
-      })
-      .catch(err => {
-        console.error(err.message);
-      });
-  }
-
-  private waitForGoogleScript(timeout: number): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const interval = 100;
-      let elapsedTime = 0;
-
-      const checkGoogleScript = setInterval(() => {
-        elapsedTime += interval;
-
-        if (typeof window.google !== "undefined") {
-          clearInterval(checkGoogleScript);
-          resolve();
-        } else if (elapsedTime >= timeout) {
-          clearInterval(checkGoogleScript);
-          reject(new Error("Google script is not loaded or not available within the timeout period."));
-        }
-      }, interval);
+    this.http.get(`${AppSettings.getApiEndpoint()}/auth/google/clientid`, { responseType: "text" }).subscribe({
+      next: response => {
+        window.onGoogleLibraryLoad = () => {
+          window.google.accounts.id.initialize({
+            client_id: response,
+            callback: (auth: CredentialResponse) => {
+              this._googleCredentialResponse.next(auth);
+            },
+          });
+          window.google.accounts.id.renderButton(parent, { width: 200 });
+          window.google.accounts.id.prompt();
+        };
+      },
+      error: (err: unknown) => {
+        console.error(err);
+      },
     });
   }
 

core/gui/src/app/common/service/user/user.service.ts

@@ -53,6 +53,7 @@ export class UserService {
   }
 
   public logout(): void {
+    console.log("log out!!!!!")
     this.authService.logout();
     this.changeUser(undefined);
   }

core/gui/src/app/dashboard/component/dashboard.component.scss

@@ -70,3 +70,9 @@ nz-content {
 .hidden {
   display: none;
 }
+
+#nav {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}

core/gui/src/app/dashboard/component/user/google-login/google-login.component.html

@@ -0,0 +1,3 @@
+<div>
+  <asl-google-signin-button type="standard" size="large"></asl-google-signin-button>
+</div>

core/gui/src/app/dashboard/component/user/google-login/google-login.component.ts

@@ -1,31 +1,31 @@
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 import { UserService } from "../../../../common/service/user/user.service";
 import { mergeMap } from "rxjs/operators";
 import { GoogleAuthService } from "../../../../common/service/user/google-auth.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { DASHBOARD_USER_WORKFLOW } from "../../../../app-routing.constant";
 import { ActivatedRoute, Router } from "@angular/router";
+import { SocialAuthService } from "@abacritt/angularx-social-login";
 
 @UntilDestroy()
 @Component({
   selector: "texera-google-login",
-  template: "",
+  templateUrl: "./google-login.component.html",
 })
-export class GoogleLoginComponent implements AfterViewInit {
+export class GoogleLoginComponent implements OnInit {
   @ViewChild("googleButton") googleButton!: ElementRef;
   constructor(
     private userService: UserService,
     private route: ActivatedRoute,
-    private googleAuthService: GoogleAuthService,
     private router: Router,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private socialAuthService: SocialAuthService
   ) {}
 
-  ngAfterViewInit(): void {
-    this.googleAuthService.googleAuthInit(this.elementRef.nativeElement);
-    this.googleAuthService.googleCredentialResponse
+  ngOnInit() {
+    this.socialAuthService.authState
       .pipe(
-        mergeMap(res => this.userService.googleLogin(res.credential)),
+        mergeMap(res => this.userService.googleLogin(res.idToken)),
         untilDestroyed(this)
       )
       .subscribe(() => {

core/gui/yarn.lock

@@ -5,6 +5,18 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
+"@abacritt/angularx-social-login@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@abacritt/angularx-social-login@npm:2.1.0"
+  dependencies:
+    tslib: "npm:>=2.5.0"
+  peerDependencies:
+    "@angular/common": ">=16.0.0"
+    "@angular/core": ">=16.0.0"
+  checksum: 10c0/b1759db0d79fdbc902180aa1974c5aa8db5372a7c4750127bbf5b1d94aadeb1f7bad27a0ac488e98cbe53a600a438a3900b4974009e4a648df5edf583cc5eb0d
+  languageName: node
+  linkType: hard
+
 "@adobe/css-tools@npm:^4.0.1":
   version: 4.4.0
   resolution: "@adobe/css-tools@npm:4.4.0"
@@ -11066,6 +11078,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "gui@workspace:."
   dependencies:
+    "@abacritt/angularx-social-login": "npm:2.1.0"
     "@ali-hm/angular-tree-component": "npm:12.0.5"
     "@angular-builders/custom-webpack": "npm:16.0.1"
     "@angular-devkit/build-angular": "npm:16.2.12"
@@ -17971,6 +17984,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:>=2.5.0":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.6.0, tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"