feat: add refresh-expired and refresh-timeout attributes to Turnstile

nullcoder · claude · nullcoder · commit 45dd1d42fbf0 · 2025-06-08T11:42:15.000-07:00
- Add refreshExpired and refreshTimeout props with "auto" | "manual" | "never" options - Add onTimeout callback for handling interactive timeouts - Update Window interface to include timeout-callback and refresh attributes - Remove onExpire handler from create page since refreshExpired="auto" handles it - Fix test to use correct placeholder text for password input - Both refresh attributes default to "auto" for automatic handling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/create/page.test.tsx b/app/create/page.test.tsx
@@ -162,7 +162,7 @@ describe("CreateGistPage", () => {
       render(<CreateGistPage />);
 
       const pinInput = screen.getByPlaceholderText(
-        "Set a PIN to protect edits"
+        "Leave empty for no protection"
       );
       expect(pinInput).toBeInTheDocument();
 
diff --git a/app/create/page.tsx b/app/create/page.tsx
@@ -72,14 +72,6 @@ export default function CreateGistPage() {
     setIsTurnstileReady(false);
   }, []);
 
-  const handleTurnstileExpire = useCallback(() => {
-    setTurnstileToken(null);
-    setIsTurnstileReady(false);
-    setError(
-      "⏰ Security verification expired. Please refresh the page to continue."
-    );
-  }, []);
-
   const handleFilesChange = useCallback((newFiles: FileData[]) => {
     setFiles(newFiles);
     // Don't clear errors on file change - let them persist
@@ -391,9 +383,9 @@ export default function CreateGistPage() {
         <Turnstile
           sitekey={turnstileSiteKey}
           action="create_gist"
+          refreshExpired="auto"
           onSuccess={handleTurnstileSuccess}
           onError={handleTurnstileError}
-          onExpire={handleTurnstileExpire}
           appearance="interaction-only"
         />
       )}
diff --git a/components/ui/turnstile.tsx b/components/ui/turnstile.tsx
@@ -7,12 +7,15 @@ interface TurnstileProps {
   onSuccess?: (token: string) => void;
   onExpire?: () => void;
   onError?: () => void;
+  onTimeout?: () => void;
   theme?: "light" | "dark" | "auto";
   action?: string;
   size?: "normal" | "flexible" | "compact";
   appearance?: "always" | "execute" | "interaction-only";
   execution?: "render" | "execute";
   language?: string;
+  refreshExpired?: "auto" | "manual" | "never";
+  refreshTimeout?: "auto" | "manual" | "never";
 }
 
 declare global {
@@ -25,12 +28,15 @@ declare global {
           callback?: (token: string) => void;
           "error-callback"?: () => void;
           "expired-callback"?: () => void;
+          "timeout-callback"?: () => void;
           theme?: "light" | "dark" | "auto";
           action?: string;
           size?: "normal" | "flexible" | "compact";
           appearance?: "always" | "execute" | "interaction-only";
           execution?: "render" | "execute";
           language?: string;
+          "refresh-expired"?: "auto" | "manual" | "never";
+          "refresh-timeout"?: "auto" | "manual" | "never";
         }
       ) => string;
       reset: (widgetId: string) => void;
@@ -46,12 +52,15 @@ const Turnstile: React.FC<TurnstileProps> = ({
   onSuccess,
   onExpire,
   onError,
+  onTimeout,
   theme = "auto",
   action,
   size = "normal",
   appearance = "interaction-only",
   execution = "render",
   language = "auto",
+  refreshExpired = "auto",
+  refreshTimeout = "auto",
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const widgetIdRef = useRef<string | null>(null);
@@ -67,9 +76,12 @@ const Turnstile: React.FC<TurnstileProps> = ({
           appearance,
           execution,
           language,
+          "refresh-expired": refreshExpired,
+          "refresh-timeout": refreshTimeout,
           callback: onSuccess,
           "error-callback": onError,
           "expired-callback": onExpire,
+          "timeout-callback": onTimeout,
         });
       }
     };
@@ -110,12 +122,15 @@ const Turnstile: React.FC<TurnstileProps> = ({
     onSuccess,
     onError,
     onExpire,
+    onTimeout,
     theme,
     action,
     size,
     appearance,
     execution,
     language,
+    refreshExpired,
+    refreshTimeout,
   ]);
 
   return <div ref={containerRef} />;
