feat: add GOT callback handler

Author: darcyYe

src/theme/Layout/hooks.ts

@@ -1,35 +1,51 @@
 /* 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';
 import { fetchGoogleOneTapConfig } from './config-fetcher';
 import { defaultApiBaseProdUrl, defaultApiBaseDevUrl, authStatusPollInterval } 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(() => {
@@ -57,6 +73,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

@@ -2,19 +2,86 @@ import type { WrapperProps } from '@docusaurus/types';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import type LayoutType from '@theme/Layout';
 import Layout from '@theme-original/Layout';
-import { type ReactNode } from 'react';
+import { type ReactNode, useCallback, useEffect } from 'react';
 
-import { useDebugLogger, useApiBaseUrl, useGoogleOneTapConfig, useAuthStatus } from './hooks';
+import {
+  useDebugLogger,
+  useApiBaseUrl,
+  useGoogleOneTapConfig,
+  useAuthStatus,
+  useGoogleOneTapVerify,
+} from './hooks';
+import type { GoogleOneTapCredentialResponse, GoogleOneTapVerifyResponse } from './types';
 
 type Props = WrapperProps<typeof LayoutType>;
 
 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, authUrl, redirectUri } = useApiBaseUrl(siteConfig);
   const config = useGoogleOneTapConfig(apiBaseUrl, debugLogger);
   const { authStatus } = useAuthStatus(siteConfig, debugLogger);
+  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) => {
+      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]
+  );
+
+  // Make handleCredentialResponse globally available for Google One Tap callback
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @silverhand/fp/no-mutation, no-restricted-syntax
+      (window as unknown as Record<string, unknown>).handleCredentialResponse =
+        handleCredentialResponse;
+    }
+  }, [handleCredentialResponse]);
 
   // Safe logging with error handling
   try {

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;