Merge pull request #47 from descope-sample-apps/chris-one-tap

Added one tap

Author: mrimboim

package.json

@@ -10,15 +10,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "@descope/angular-sdk": "0.5.0-alpha.2",
+    "@angular/animations": "^18.2.4",
+    "@angular/common": "^18.2.4",
+    "@angular/compiler": "^18.2.4",
+    "@angular/core": "^18.2.4",
+    "@angular/forms": "^18.2.4",
+    "@angular/platform-browser": "^18.2.4",
+    "@angular/platform-browser-dynamic": "^18.2.4",
+    "@angular/router": "^18.2.4",
+    "@descope/angular-sdk": "0.6.0",
     "angular-google-charts": "^2.2.3",
     "autoprefixer": "^10.4.17",
     "rxjs": "~7.8.0",
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular/cli": "~18.1.0",
+    "@angular-devkit/build-angular": "^18.2.4",
+    "@angular/cli": "~18.2.4",
     "@angular/compiler-cli": "^18.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",

src/app/app.component.ts

@@ -1,11 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { OneTapService } from './one-tap.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'my-angular-app';
+export class AppComponent implements OnInit {
+  constructor(private oneTapService: OneTapService, private router: Router) {}
 
+  async ngOnInit(): Promise<void> {
+    // Check if the user is authenticated
+    const isAuthenticated = this.oneTapService.isAuthenticated();
+
+    if (!isAuthenticated) {
+      // If the user is not authenticated and One Tap is not initialized, show One Tap
+      if (!this.oneTapService.isOneTapInitialized()) {
+        await this.oneTapService.displayOneTap();
+      }
+    } else {
+      // If user is authenticated, only redirect to dashboard if not already there
+      if (this.router.url !== '/dashboard') {
+        this.router.navigate(['/dashboard']);  // Use Angular router for navigation
+      }
+    }
+  }
 }

src/app/home/home.component.ts

@@ -20,7 +20,11 @@ export class HomeComponent {
           role: descopeUser.user.roleNames || 'No Role Set',
           picture: descopeUser.user.picture || '',
         };
-			}
+			} else {
+        // If the user is logged out, clear the user details
+        this.user = null;
+        // Optionally, trigger One Tap or another login flow here
+      }
 		});
   }
 }

src/app/one-tap.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import Descope from '@descope/web-js-sdk';
+import { environment } from '../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OneTapService {
+  private sdk: any;
+  private oneTapInitialized: boolean = false;
+
+  constructor() {
+    const projectId = environment.descopeProjectId;
+    this.sdk = Descope({ projectId: projectId, persistTokens: true, autoRefresh: true });
+  }
+
+  // Method to display Google One Tap
+  async displayOneTap(): Promise<void> {
+    if (this.oneTapInitialized) return;
+
+    try {
+      const resp = await this.sdk.fedcm.oneTap('google');
+      console.log("One Tap response:", resp);
+      // Redirect on success
+      window.location.replace("/dashboard");
+      this.oneTapInitialized = true;
+    } catch (error) {
+      console.error("Failed to display One Tap:", error);
+    }
+  }
+
+  // Method to check if the user is authenticated
+  isAuthenticated(): boolean {
+    const sessionToken = this.sdk.getSessionToken();
+    if (sessionToken) {
+      return !this.sdk.isJwtExpired(sessionToken);
+    }
+    return false;
+  }
+
+  // Method to check if One Tap has been initialized
+  isOneTapInitialized(): boolean {
+    return this.oneTapInitialized;
+  }
+}