Only render captcha when sitekey is available (#2989)

Refs #2987

Author: notmd

website/package-lock.json

@@ -113,6 +113,7 @@
     "msw": "^1.2.1",
     "msw-storybook-addon": "^1.8.0",
     "path-browserify": "^1.0.1",
+    "pino-pretty": "^10.0.0",
     "prettier": "2.8.1",
     "prisma": "^4.13.0",
     "storybook": "^7.0.5",

website/package.json

@@ -1,15 +1,23 @@
 import { useColorMode } from "@chakra-ui/react";
 import { Turnstile, TurnstileInstance, TurnstileProps } from "@marsidev/react-turnstile";
 import { forwardRef } from "react";
+import { useBrowserConfig } from "src/hooks/env/BrowserEnv";
+import { StrictOmit } from "ts-essentials";
 
-export const CloudFlareCaptcha = forwardRef<TurnstileInstance, TurnstileProps>((props, ref) => {
-  const { siteKey, ...restProps } = props;
+export const CloudFlareCaptcha = forwardRef<TurnstileInstance, StrictOmit<TurnstileProps, "siteKey">>((props, ref) => {
+  const { ...restProps } = props;
   const { colorMode } = useColorMode();
+  const { CLOUDFLARE_CAPTCHA_SITE_KEY } = useBrowserConfig();
+
+  if (!CLOUDFLARE_CAPTCHA_SITE_KEY) {
+    return null;
+  }
+
   return (
     <Turnstile
       ref={ref}
       {...restProps}
-      siteKey={siteKey}
+      siteKey={CLOUDFLARE_CAPTCHA_SITE_KEY}
       options={{
         theme: colorMode,
         ...props.options,

website/src/components/CloudflareCaptcha.tsx

@@ -11,7 +11,6 @@ import {
 import { useColorMode } from "@chakra-ui/react";
 import { Discord, Google } from "@icons-pack/react-simple-icons";
 import { TurnstileInstance } from "@marsidev/react-turnstile";
-import { boolean } from "boolean";
 import { Bug, Mail } from "lucide-react";
 import { GetServerSideProps } from "next";
 import Head from "next/head";
@@ -64,11 +63,8 @@ interface SigninProps {
 
 function Signin({ providers }: SigninProps) {
   const router = useRouter();
-  const {
-    ENABLE_EMAIL_SIGNIN: enableEmailSignin,
-    ENABLE_EMAIL_SIGNIN_CAPTCHA: enableEmailSigninCaptcha,
-    CLOUDFLARE_CAPTCHA_SITE_KEY: cloudflareCaptchaSiteKey,
-  } = useBrowserConfig();
+  const { ENABLE_EMAIL_SIGNIN: enableEmailSignin, ENABLE_EMAIL_SIGNIN_CAPTCHA: enableEmailSigninCaptcha } =
+    useBrowserConfig();
   const { discord, email, google, credentials } = providers;
   const [error, setError] = useState("");
 
@@ -96,11 +92,7 @@ function Signin({ providers }: SigninProps) {
         <Stack spacing="2">
           {credentials && <DebugSigninForm providerId={credentials.id} />}
           {email && enableEmailSignin && (
-            <EmailSignInForm
-              providerId={email.id}
-              enableEmailSigninCaptcha={enableEmailSigninCaptcha}
-              cloudflareCaptchaSiteKey={cloudflareCaptchaSiteKey}
-            />
+            <EmailSignInForm providerId={email.id} enableEmailSigninCaptcha={enableEmailSigninCaptcha} />
           )}
           {discord && (
             <Button
@@ -156,11 +148,9 @@ export default Signin;
 const EmailSignInForm = ({
   providerId,
   enableEmailSigninCaptcha,
-  cloudflareCaptchaSiteKey,
 }: {
   providerId: string;
   enableEmailSigninCaptcha: boolean;
-  cloudflareCaptchaSiteKey: string;
 }) => {
   const {
     register,
@@ -196,7 +186,6 @@ const EmailSignInForm = ({
         </FormControl>
         {enableEmailSigninCaptcha && (
           <CloudFlareCaptcha
-            siteKey={cloudflareCaptchaSiteKey}
             options={{ size: "invisible" }}
             ref={captcha}
             onSuccess={() => setCaptchaSuccess(true)}