Fix Google Login button disappearing issue

core/amber/src/main/scala/edu/uci/ics/texera/web/resource/auth/GoogleAuthResource.scala

@@ -37,8 +37,9 @@ class GoogleAuthResource {
 
   @GET
   @Path("/clientid")
-  def getClientId: String = {
-    clientId
+  @Produces(Array(MediaType.APPLICATION_JSON))
+  def getClientId: Map[String, String] = {
+    Map("clientId" -> clientId)
   }
 
   @POST

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,9 +140,31 @@ 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 { GoogleAuthService } from "./common/service/user/google-auth.service";
+import { SocialLoginModule, SocialAuthServiceConfig, GoogleSigninButtonModule } from "@abacritt/angularx-social-login";
+import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
+import { lastValueFrom } from "rxjs";
 
 registerLocaleData(en);
 
+const socialConfigFactory = (googleAuthService: GoogleAuthService) => {
+  return lastValueFrom(googleAuthService.getClientId()).then(response => ({
+    autoLogin: false,
+    lang: "en",
+    providers: [
+      {
+        id: GoogleLoginProvider.PROVIDER_ID,
+        provider: new GoogleLoginProvider(response?.clientId || "", {
+          oneTapEnabled: false,
+        }),
+      },
+    ],
+    onError: err => {
+      console.error(err);
+    },
+  })) as Promise<SocialAuthServiceConfig>;
+};
+
 @NgModule({
   declarations: [
     AdminGmailComponent,
@@ -289,6 +311,8 @@ registerLocaleData(en);
     NzTreeViewModule,
     NzNoAnimationModule,
     TreeModule,
+    SocialLoginModule,
+    GoogleSigninButtonModule,
   ],
   providers: [
     provideNzI18n(en_US),
@@ -303,6 +327,11 @@ registerLocaleData(en);
       useClass: BlobErrorHttpInterceptor,
       multi: true,
     },
+    {
+      provide: "SocialAuthServiceConfig",
+      useFactory: socialConfigFactory,
+      deps: [GoogleAuthService],
+    },
   ],
   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

@@ -1,40 +1,15 @@
 import { Injectable } from "@angular/core";
-import { Subject } from "rxjs";
+import { Observable } from "rxjs";
 import { HttpClient } from "@angular/common/http";
 import { AppSettings } from "../../app-setting";
-declare var window: any;
-export interface CredentialResponse {
-  client_id: string;
-  credential: string;
-  select_by: string;
-}
+
 @Injectable({
   providedIn: "root",
 })
 export class GoogleAuthService {
-  private _googleCredentialResponse = new Subject<CredentialResponse>();
   constructor(private http: HttpClient) {}
-  public googleAuthInit(parent: HTMLElement | null) {
-    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);
-      },
-    });
-  }
 
-  get googleCredentialResponse() {
-    return this._googleCredentialResponse.asObservable();
+  getClientId(): Observable<{ clientId: string }> {
+    return this.http.get<{ clientId: string }>(`${AppSettings.getApiEndpoint()}/auth/google/clientid`);
   }
 }

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

@@ -141,7 +141,7 @@
   <div class="page-container">
     <nz-layout>
       <div
-        *ngIf="displayNavbar"
+        [hidden]="!displayNavbar"
         id="nav">
         <texera-search-bar></texera-search-bar>
         <ng-container *ngIf="isLogin">

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,6 @@
+<div>
+  <asl-google-signin-button
+    type="standard"
+    size="large"
+    width="200"></asl-google-signin-button>
+</div>

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

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { GoogleLoginComponent } from "./google-login.component";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { UserService } from "../../../../common/service/user/user.service";
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { of } from "rxjs";
+
+describe("GoogleLoginComponent", () => {
+  let component: GoogleLoginComponent;
+  let fixture: ComponentFixture<GoogleLoginComponent>;
+  let userService: jasmine.SpyObj<UserService>;
+  let socialAuthService: jasmine.SpyObj<SocialAuthService>;
+
+  beforeEach(async () => {
+    const userServiceSpy = jasmine.createSpyObj("UserService", ["googleLogin"]);
+    const socialAuthServiceSpy = jasmine.createSpyObj("SocialAuthService", [], {
+      authState: of({ idToken: "mock-id-token" }),
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [GoogleLoginComponent],
+      providers: [
+        { provide: UserService, useValue: userServiceSpy },
+        { provide: SocialAuthService, useValue: socialAuthServiceSpy },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GoogleLoginComponent);
+    component = fixture.componentInstance;
+    userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
+    socialAuthService = TestBed.inject(SocialAuthService) as jasmine.SpyObj<SocialAuthService>;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should render Google Sign-In button", () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const button = compiled.querySelector("asl-google-signin-button");
+    expect(button).toBeTruthy();
+  });
+});

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

@@ -1,31 +1,28 @@
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, Component } 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 {
-  @ViewChild("googleButton") googleButton!: ElementRef;
   constructor(
     private userService: UserService,
     private route: ActivatedRoute,
-    private googleAuthService: GoogleAuthService,
     private router: Router,
-    private elementRef: ElementRef
+    private socialAuthService: SocialAuthService
   ) {}
 
-  ngAfterViewInit(): void {
-    this.googleAuthService.googleAuthInit(this.elementRef.nativeElement);
-    this.googleAuthService.googleCredentialResponse
+  ngAfterViewInit() {
+    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"