FIx errors when turnstile token expiring near checkout button (#304)

Author: devksingh4

src/components/TurnstileWidget.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useRef, useState } from 'react';
+import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile';
+
+const TOKEN_LIFETIME_MS = 300_000; // 300s per Cloudflare docs
+const REFRESH_BUFFER_MS = 5_000;
+
+export function useTurnstile() {
+  const [token, setToken] = useState<string>();
+  const tokenObtainedAt = useRef<number>(0);
+  const ref = useRef<TurnstileInstance>(null);
+
+  const onSuccess = useCallback((t: string) => {
+    setToken(t);
+    tokenObtainedAt.current = Date.now();
+  }, []);
+
+  const resetToken = useCallback(() => {
+    setToken(undefined);
+    tokenObtainedAt.current = 0;
+    ref.current?.reset();
+  }, []);
+
+  const ensureFreshToken = useCallback(async (): Promise<
+    string | undefined
+  > => {
+    const age = Date.now() - tokenObtainedAt.current;
+    const isStale =
+      !ref.current?.getResponse() ||
+      ref.current?.isExpired() ||
+      age >= TOKEN_LIFETIME_MS - REFRESH_BUFFER_MS;
+
+    if (isStale) {
+      setToken(undefined);
+      tokenObtainedAt.current = 0;
+      ref.current?.reset();
+      try {
+        return await ref.current?.getResponsePromise(60_000);
+      } catch {
+        return undefined;
+      }
+    }
+
+    return ref.current?.getResponse();
+  }, []);
+
+  return {
+    token,
+    ref,
+    onSuccess,
+    onExpire: resetToken,
+    onError: resetToken,
+    ensureFreshToken,
+    resetToken,
+  };
+}
+
+export type UseTurnstileReturn = ReturnType<typeof useTurnstile>;
+
+interface TurnstileWidgetProps {
+  id: string;
+  siteKey: string;
+  turnstile: UseTurnstileReturn;
+  className?: string;
+}
+
+export default function TurnstileWidget({
+  id,
+  siteKey,
+  turnstile,
+  className,
+}: TurnstileWidgetProps) {
+  return (
+    <Turnstile
+      ref={turnstile.ref}
+      id={id}
+      siteKey={siteKey}
+      onSuccess={turnstile.onSuccess}
+      onExpire={turnstile.onExpire}
+      onError={turnstile.onError}
+      options={{
+        size: 'flexible',
+        theme: 'light',
+      }}
+      className={className}
+    />
+  );
+}

src/components/store/StoreItem.tsx

@@ -15,7 +15,7 @@ import ErrorPopup, { useErrorPopup } from '../ErrorPopup';
 import ReactNavbar from '../generic/ReactNavbar';
 import { LoadingSpinner } from '../generic/LargeLoadingSpinner';
 import AuthActionButton, { type ShowErrorFunction } from '../AuthActionButton';
-import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile';
+import TurnstileWidget, { useTurnstile } from '../TurnstileWidget';
 import type {
   IPublicClientApplication,
   AccountInfo,
@@ -77,7 +77,7 @@ const StoreItem = ({
   const [email, setEmail] = useState('');
   const [emailConfirm, setEmailConfirm] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [turnstileToken, setTurnstileToken] = useState<string>();
+  const turnstile = useTurnstile();
 
   // MSAL state
   const [pca, setPca] = useState<IPublicClientApplication>();
@@ -90,8 +90,6 @@ const StoreItem = ({
   const [membershipPreloaded, setMembershipPreloaded] = useState(false);
   const activeMembershipKeyRef = useRef<string | null>(null);
   const membershipCache = useRef<Map<string, boolean>>(new Map());
-
-  const turnstileRef = useRef<TurnstileInstance>(null);
   const { error, showError, clearError } = useErrorPopup();
 
   const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY!;
@@ -442,7 +440,8 @@ const StoreItem = ({
     accessToken: string,
     showError: ShowErrorFunction
   ) => {
-    if (!turnstileToken) {
+    const freshToken = await turnstile.ensureFreshToken();
+    if (!freshToken) {
       showError(400, 'Please complete the security verification.');
       return;
     }
@@ -461,7 +460,7 @@ const StoreItem = ({
       const syncPromise = syncIfRequired();
 
       const checkoutResponse = await storeApiClient.apiV1StoreCheckoutPost({
-        xTurnstileResponse: turnstileToken,
+        xTurnstileResponse: freshToken,
         xUiucToken: accessToken,
         apiV1StoreCheckoutPostRequest: {
           items: [
@@ -478,6 +477,7 @@ const StoreItem = ({
       await syncPromise;
       window.location.replace(checkoutResponse['checkoutUrl']);
     } catch (e) {
+      turnstile.resetToken();
       if (e instanceof ResponseError) {
         const response = await e.response.json();
         showError(
@@ -498,15 +498,16 @@ const StoreItem = ({
   const handleGuestCheckout = async () => {
     setIsLoading(true);
 
-    if (!turnstileToken) {
+    const freshToken = await turnstile.ensureFreshToken();
+    if (!freshToken) {
       showError(400, 'Please complete the security verification.');
       setIsLoading(false);
       return;
     }
 
     try {
       const checkoutResponse = await storeApiClient.apiV1StoreCheckoutPost({
-        xTurnstileResponse: turnstileToken,
+        xTurnstileResponse: freshToken,
         apiV1StoreCheckoutPostRequest: {
           items: [
             {
@@ -522,6 +523,7 @@ const StoreItem = ({
       });
       window.location.replace(checkoutResponse['checkoutUrl']);
     } catch (e) {
+      turnstile.resetToken();
       if (e instanceof ResponseError) {
         const response = await e.response.json();
         showError(
@@ -942,23 +944,10 @@ const StoreItem = ({
                     )}
 
                   <div className="w-full">
-                    <Turnstile
-                      ref={turnstileRef}
+                    <TurnstileWidget
                       id={id}
                       siteKey={turnstileSiteKey}
-                      onSuccess={setTurnstileToken}
-                      onExpire={() => {
-                        setTurnstileToken(undefined);
-                        turnstileRef.current?.reset();
-                      }}
-                      onError={() => {
-                        setTurnstileToken(undefined);
-                        turnstileRef.current?.reset();
-                      }}
-                      options={{
-                        size: 'flexible',
-                        theme: 'light',
-                      }}
+                      turnstile={turnstile}
                       className="w-full"
                     />
                   </div>