logto-io · darcyYe · May 9, 2025 · May 27, 2025 · Jun 23, 2025 · Copilot
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-unassigned-import
 import 'dotenv/config';
 import type { Config } from '@docusaurus/types';
+import { yes } from '@silverhand/essentials';
 
 import {
   addAliasPlugin,
@@ -35,6 +36,14 @@ const config: Config = {
   organizationName: 'logto-io',
   projectName: 'docs',
 
+  scripts: [
+    {
+      src: 'https://accounts.google.com/gsi/client',
+      async: true,
+      defer: true,
+    },
+  ],
+
   i18n: {
     defaultLocale,
     locales: ['de', 'en', 'es', 'fr', 'ja', 'ko', 'pt-BR', 'zh-CN', 'zh-TW'],
@@ -43,6 +52,8 @@ const config: Config = {
 
   customFields: {
     inkeepApiKey: process.env.INKEEP_API_KEY,
+    logtoApiBaseUrl: process.env.LOGTO_API_BASE_URL,
+    isDevFeatureEnabled: yes(process.env.IS_DEV_FEATURE_ENABLED),
   },
 
   staticDirectories: ['static', 'static-localized/' + currentLocale],

diff --git a/package.json b/package.json
@@ -114,5 +114,8 @@
       "core-js-pure",
       "sharp"
     ]
+  },
+  "dependencies": {
+    "zod": "^3.25.13"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
@@ -0,0 +1,107 @@
+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 { useEffect, useState } from 'react';
+import { z } from 'zod';
+
+type Props = WrapperProps<typeof LayoutType>;
+
+const >
+  .object({
+    isEnabled: z.boolean().optional(),
+    autoSelect: z.boolean().optional(),
+    closeOnTapOutside: z.boolean().optional(),
+    itpSupport: z.boolean().optional(),
+  })
+  .optional();
+
+const googleOneTapConfigSchema = z.object({
+  clientId: z.string(),
+  oneTap: oneTapSchema,
+});
+
+type GoogleOneTapConfig = z.infer<typeof googleOneTapConfigSchema>;
+
+const CACHE_KEY = '_logto_google_one_tap_config';
+const CACHE_EXPIRY_KEY = '_logto_google_one_tap_config_expiry';
+const CACHE_EXPIRY_TIME = 1 * 60 * 60 * 1000; // 1 hour
+
+// Default API base URL
+const DEFAULT_API_BASE_PROD_URL = 'https://auth.logto.io';
+const DEFAULT_API_BASE_DEV_URL = 'https://auth.logto.dev';
+
+export default function LayoutWrapper(props: Props): ReactNode {
+  const [config, setConfig] = useState<GoogleOneTapConfig | undefined>(undefined);
+  const { siteConfig } = useDocusaurusContext();
+
+  // Get the API base URL from customFields, or use the default value if it doesn't exist
+  const logtoApiBaseUrl = siteConfig.customFields?.logtoApiBaseUrl;
+  const apiBaseUrl =
+    typeof logtoApiBaseUrl === 'string'
+      ? logtoApiBaseUrl
+      : siteConfig.customFields?.isDevFeatureEnabled
+        ? DEFAULT_API_BASE_DEV_URL
+        : DEFAULT_API_BASE_PROD_URL;
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const cachedConfig = localStorage.getItem(CACHE_KEY);
+        const cachedExpiry = localStorage.getItem(CACHE_EXPIRY_KEY);
+
+        if (cachedConfig && cachedExpiry && Number(cachedExpiry) > Date.now()) {
+          try {
+            const parsedConfig = googleOneTapConfigSchema.parse(JSON.parse(cachedConfig));
+            setConfig(parsedConfig);
+            return;
+          } catch (parseError) {
+            console.error('Cached config validation failed:', parseError);
+          }
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/google-one-tap/config`, {
+          headers: {
+            Origin: window.location.origin,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch Google One Tap config');
+        }
+
+        const data = await response.json();
+
+        const validatedConfig = googleOneTapConfigSchema.parse(data);
+
+        localStorage.setItem(CACHE_KEY, JSON.stringify(validatedConfig));
+        localStorage.setItem(CACHE_EXPIRY_KEY, String(Date.now() + CACHE_EXPIRY_TIME));
+
+        setConfig(validatedConfig);
+      } catch (error) {
+        console.error('Error fetching or validating Google One Tap config:', error);
-        console.error('Error fetching or validating Google One Tap config:', error);
+        console.error('Error fetching or validating Google One Tap config:', error);
+        setFetchError(true);
-        console.error('Error fetching or validating Google One Tap config:', error);
+        console.error('Error fetching or validating Google One Tap config:', error);
+        setFetchError(true);
+      }
+    };
+
+    void fetchConfig();
+  }, [apiBaseUrl]);
+
+  return (
+    <>
+      {config && config.oneTap?.isEnabled && (
+        <div
+          data-itp_support={Boolean(config.oneTap.itpSupport)}
+          data-auto_select={Boolean(config.oneTap.autoSelect)}
+          data-cancel_on_tap_outside={Boolean(config.oneTap.closeOnTapOutside)}
+          id="g_id_onload"
+          data-client_id={config.clientId}
+          // TODO: implement handleCredentialResponse page
+          data-callback="handleCredentialResponse"
+          data-context="signin"
+        ></div>
+      )}
+      <Layout {...props} />
+    </>
+      );
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,6 +18,7 @@
   },
   "include": [
     "src",
+    "src/theme",
     "docs",
     "i18n",
     "plugins",
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ @@
       },
       "include": [
         "src",
+        "src/theme",
         "docs",
         "i18n",
         "plugins",
@@ Expand Down @@