fix(auth): ensure turnstile widget is only shown initially on when in…

…teractive refs #627
akash-network · Jan 16, 2025 · f699cc1 · f699cc1
1 parent c5efbff
commit f699cc1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/apps/deploy-web/.env.local.sample b/apps/deploy-web/.env.local.sample
@@ -38,4 +38,3 @@ BASE_API_SANDBOX_URL=http://${BASE_API_MAINNET_URL}:3080
 GITHUB_CLIENT_SECRET=GITHUB_CLIENT_SECRET
 BITBUCKET_CLIENT_SECRET=BITBUCKET_CLIENT_SECRET
 GITLAB_CLIENT_SECRET=GITLAB_CLIENT_SECRET
-NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAA5S2ADjyKnHmdzo
diff --git a/apps/deploy-web/src/components/turnstile/Turnstile.tsx b/apps/deploy-web/src/components/turnstile/Turnstile.tsx
@@ -8,9 +8,9 @@ import classnames from "classnames";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 
-type TurnstileStatus = "uninitialized" | "solved" | "expired" | "error" | "dismissed";
+type TurnstileStatus = "uninitialized" | "solved" | "interactive" | "expired" | "error" | "dismissed";
 
-const VISIBILITY_STATUSES: TurnstileStatus[] = ["uninitialized", "expired", "error"];
+const VISIBILITY_STATUSES: TurnstileStatus[] = ["uninitialized", "error", "interactive"];
 
 export const Turnstile: FC = () => {
   const turnstileRef = useRef<TurnstileInstance>();
@@ -29,7 +29,7 @@ export const Turnstile: FC = () => {
     }
   }, [isVisible]);
 
-  return (
+  return browserEnvConfig.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
     <>
       <div className={classnames({ hidden: !isVisible }, "fixed inset-0 z-[101] flex content-center items-center justify-center bg-white bg-opacity-90")}>
         <div className="flex flex-col items-center">
@@ -38,10 +38,11 @@ export const Turnstile: FC = () => {
           <div className="h-[66px]">
             <ReactTurnstile
               ref={turnstileRef}
-              siteKey={browserEnvConfig.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+              siteKey={"3x00000000000000000000FF"}
               onError={() => setStatus("error")}
               onExpire={() => setStatus("expired")}
               onSuccess={() => setStatus("solved")}
+              onBeforeInteractive={() => setStatus("interactive")}
             />
           </div>
           {status === "error" && <p className="text-red-600">Some error occurred</p>}
@@ -71,5 +72,5 @@ export const Turnstile: FC = () => {
         </div>
       </div>
     </>
-  );
+  ) : null;
 };
diff --git a/apps/deploy-web/src/config/env-config.schema.ts b/apps/deploy-web/src/config/env-config.schema.ts
@@ -27,7 +27,7 @@ export const browserEnvSchema = z.object({
   NEXT_PUBLIC_GITLAB_CLIENT_ID: z.string().optional(),
   NEXT_PUBLIC_GITHUB_CLIENT_ID: z.string().optional(),
   NEXT_PUBLIC_CI_CD_IMAGE_NAME: z.string(),
-  NEXT_PUBLIC_TURNSTILE_SITE_KEY: z.string()
+  NEXT_PUBLIC_TURNSTILE_SITE_KEY: z.string().optional()
 });
 
 export const serverEnvSchema = browserEnvSchema.extend({