feat: add GOT callback handler

Author: darcyYe

src/theme/Layout/GoogleOneTapInitializer.tsx

@@ -1,29 +1,79 @@
-import { type ReactNode, useEffect } from 'react';
+import { type ReactNode, useCallback, useEffect } from 'react';
 
 import type { DebugLogger } from './debug-logger';
 import type { GoogleOneTapConfig } from './google-one-tap';
-
-type GoogleCredentialResponse = {
-  credential: string;
-};
+import { useApiBaseUrl, useGoogleOneTapVerify } from './hooks';
+import type {
+  SiteConfig,
+  GoogleOneTapCredentialResponse,
+  GoogleOneTapVerifyResponse,
+} from './types';
 
 type GoogleOneTapInitializerProps = {
   readonly config: GoogleOneTapConfig;
   readonly debugLogger: DebugLogger;
+  readonly siteConfig: SiteConfig;
 };
 
 export default function GoogleOneTapInitializer({
   config,
   debugLogger,
+  siteConfig,
 }: GoogleOneTapInitializerProps): ReactNode {
-  useEffect(() => {
-    // Define global handleCredentialResponse function
-    // eslint-disable-next-line @silverhand/fp/no-mutation
-    window.handleCredentialResponse = (response: GoogleCredentialResponse) => {
-      console.log('Encoded JWT ID token:', response.credential);
-      // TODO: Send to your backend for verification
-    };
-  }, []);
+  const { baseUrl: apiBaseUrl, authUrl, redirectUri } = useApiBaseUrl(siteConfig);
+  const verifyGoogleOneTap = useGoogleOneTapVerify(apiBaseUrl, debugLogger);
+
+  // Function to manually build Logto sign-in URL
+  const buildSignInUrl = useCallback(
+    ({ oneTimeToken, email, isNewUser }: GoogleOneTapVerifyResponse) => {
+      try {
+        const signInUrl = new URL(authUrl);
+
+        // Standard OIDC parameters: client_id
+        signInUrl.searchParams.set('client_id', 'admin-console');
+        signInUrl.searchParams.set('redirect_uri', redirectUri);
+        signInUrl.searchParams.set('first_screen', isNewUser ? 'register' : 'sign_in');
+
+        // Add one-time token parameters
+        signInUrl.searchParams.set('one_time_token', oneTimeToken);
+        signInUrl.searchParams.set('login_hint', email);
+
+        return signInUrl.toString();
+      } catch (error) {
+        debugLogger.error('Failed to build sign-in URL:', error);
+        return null;
+      }
+    },
+    [authUrl, redirectUri, debugLogger]
+  );
+
+  const handleCredentialResponse = useCallback(
+    async (response: GoogleOneTapCredentialResponse) => {
+      debugLogger.log('handleCredentialResponse received response:', response);
+
+      const verifyData = await verifyGoogleOneTap(response);
+
+      if (verifyData) {
+        debugLogger.log('Verification completed:', verifyData);
+
+        try {
+          // Build Logto sign-in URL with one-time token
+          const signInUrl = buildSignInUrl(verifyData);
+
+          if (signInUrl) {
+            // Open sign-in URL in new tab
+            window.open(signInUrl, '_blank', 'noopener,noreferrer');
+            debugLogger.log('Logto sign-in URL opened in new tab with one-time token');
+          } else {
+            debugLogger.error('Failed to build sign-in URL');
+          }
+        } catch (error) {
+          debugLogger.error('Failed to open sign-in URL:', error);
+        }
+      }
+    },
+    [verifyGoogleOneTap, debugLogger, buildSignInUrl]
+  );
 
   useEffect(() => {
     if (config.oneTap?.isEnabled && window.google?.accounts.id) {
@@ -34,7 +84,7 @@ export default function GoogleOneTapInitializer({
         window.google.accounts.id.initialize({
           client_id: config.clientId,
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          callback: window.handleCredentialResponse!,
+          callback: handleCredentialResponse,
           auto_select: config.oneTap.autoSelect,
           cancel_on_tap_outside: config.oneTap.closeOnTapOutside,
           itp_support: config.oneTap.itpSupport,

src/theme/Layout/hooks.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @silverhand/fp/no-mutation */
-import { condString } from '@silverhand/essentials';
+import { condString, type Optional } from '@silverhand/essentials';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createAuthStatusChecker } from './auth-status';
@@ -15,29 +15,45 @@ import {
 } from './constants';
 import { createDebugLogger, type DebugLogger } from './debug-logger';
 import type { GoogleOneTapConfig } from './google-one-tap';
-import type { SiteConfig } from './types';
+import type {
+  SiteConfig,
+  GoogleOneTapCredentialResponse,
+  GoogleOneTapVerifyResponse,
+} from './types';
 
 export function useDebugLogger(siteConfig: SiteConfig): DebugLogger {
   const isDebugMode = Boolean(siteConfig.customFields?.isDebuggingEnabled);
 
   return useMemo(() => createDebugLogger(isDebugMode), [isDebugMode]);
 }
 
-export function useApiBaseUrl(siteConfig: SiteConfig): string {
+export function useApiBaseUrl(siteConfig: SiteConfig): {
+  baseUrl: string;
+  authUrl: string;
+  redirectUri: string;
+} {
   return useMemo(() => {
     const logtoApiBaseUrl = siteConfig.customFields?.logtoApiBaseUrl;
-    return typeof logtoApiBaseUrl === 'string'
-      ? logtoApiBaseUrl
-      : siteConfig.customFields?.isDevFeatureEnabled
-        ? defaultApiBaseDevUrl
-        : defaultApiBaseProdUrl;
+    const baseUrl =
+      typeof logtoApiBaseUrl === 'string'
+        ? logtoApiBaseUrl
+        : siteConfig.customFields?.isDevFeatureEnabled
+          ? defaultApiBaseDevUrl
+          : defaultApiBaseProdUrl;
+    const authUrl = `${baseUrl}/oidc/auth`;
+    const redirectUri = `${typeof logtoApiBaseUrl === 'string' ? `${logtoApiBaseUrl}/${new URL(logtoApiBaseUrl).hostname === 'localhost' ? 'demo-app' : 'callback'}` : `${defaultApiBaseProdUrl}/callback`}`;
+    return {
+      baseUrl,
+      authUrl,
+      redirectUri,
+    };
   }, [siteConfig.customFields?.logtoApiBaseUrl, siteConfig.customFields?.isDevFeatureEnabled]);
 }
 
 export function useGoogleOneTapConfig(
   apiBaseUrl: string,
   debugLogger: DebugLogger
-): GoogleOneTapConfig | undefined {
+): Optional<GoogleOneTapConfig> {
   const [config, setConfig] = useState<GoogleOneTapConfig>();
 
   useEffect(() => {
@@ -65,6 +81,43 @@ export function useGoogleOneTapConfig(
   return config;
 }
 
+export function useGoogleOneTapVerify(
+  apiBaseUrl: string,
+  debugLogger: DebugLogger
+): (response: GoogleOneTapCredentialResponse) => Promise<Optional<GoogleOneTapVerifyResponse>> {
+  return useCallback(
+    async (response: GoogleOneTapCredentialResponse) => {
+      debugLogger.log('Google One Tap credential response received:', response);
+
+      try {
+        const verifyResponse = await fetch(`${apiBaseUrl}/api/google-one-tap/verify`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Origin: window.location.origin,
+          },
+          body: JSON.stringify({
+            idToken: response.credential,
+          }),
+        });
+
+        if (!verifyResponse.ok) {
+          throw new Error(`Verification failed: ${verifyResponse.status}`);
+        }
+
+        const data = await verifyResponse.json();
+        debugLogger.log('Google One Tap verification successful:', data);
+
+        // eslint-disable-next-line no-restricted-syntax
+        return data as GoogleOneTapVerifyResponse;
+      } catch (error) {
+        debugLogger.error('Google One Tap verification failed:', error);
+      }
+    },
+    [apiBaseUrl, debugLogger]
+  );
+}
+
 export type AuthStatusResult = {
   authStatus?: boolean;
   authCheckError?: string;

src/theme/Layout/index.tsx

@@ -14,7 +14,7 @@ export default function LayoutWrapper(props: Props): ReactNode {
   // Hooks must be called at the top level, outside of try-catch
   const { siteConfig } = useDocusaurusContext();
   const debugLogger = useDebugLogger(siteConfig);
-  const apiBaseUrl = useApiBaseUrl(siteConfig);
+  const { baseUrl: apiBaseUrl } = useApiBaseUrl(siteConfig);
   const config = useGoogleOneTapConfig(apiBaseUrl, debugLogger);
   const { authStatus } = useAuthStatus(siteConfig, debugLogger);
 
@@ -28,7 +28,13 @@ export default function LayoutWrapper(props: Props): ReactNode {
       <Layout {...props} />
       {authStatus === false && config?.oneTap?.isEnabled && (
         <BrowserOnly fallback={<div>Loading Google Sign-In...</div>}>
-          {() => <GoogleOneTapInitializer config={config} debugLogger={debugLogger} />}
+          {() => (
+            <GoogleOneTapInitializer
+              config={config}
+              debugLogger={debugLogger}
+              siteConfig={siteConfig}
+            />
+          )}
         </BrowserOnly>
       )}
     </>

src/theme/Layout/types.ts

@@ -27,6 +27,16 @@ export type SiteConfig = {
   };
 };
 
+export type GoogleOneTapCredentialResponse = {
+  credential: string;
+};
+
+export type GoogleOneTapVerifyResponse = {
+  oneTimeToken: string;
+  isNewUser: boolean;
+  email: string;
+};
+
 export type AuthStatusGlobal = {
   authStatus: boolean | undefined;
   authCheckError: string | undefined;