From fd2e1049ed2872cca29fa91c93153d98e60c6476 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 30 Apr 2024 15:21:30 +0800
Subject: [PATCH] Make the captcha provider conditional on the envar for self
 hosters

---
 packages/web/pages/_app.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index 8193e9bd2..595316cc3 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -4,7 +4,7 @@ import '../styles/articleInnerStyling.css'
 import type { AppProps } from 'next/app'
 import { IdProvider } from '@radix-ui/react-id'
 import { NextRouter, useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import TopBarProgress from 'react-topbar-progress-indicator'
 import {
   KBarProvider,
@@ -23,7 +23,6 @@ import { updateTheme } from '../lib/themeUpdater'
 import { ThemeId } from '../components/tokens/stitches.config'
 import { posthog } from 'posthog-js'
 import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
-import { Recaptcha } from '../components/elements/Recaptcha'
 
 TopBarProgress.config({
   barColors: {
@@ -67,6 +66,24 @@ const generateActions = (router: NextRouter) => {
   return defaultActions
 }
 
+const ConditionalCaptchaProvider = (props: {
+  children: ReactNode
+}): JSX.Element => {
+  if (process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY) {
+    return (
+      <GoogleReCaptchaProvider
+        type="v2-checkbox"
+        isEnterprise={true}
+        host="recaptcha.net"
+        siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY ?? ''}
+      >
+        {props.children}
+      </GoogleReCaptchaProvider>
+    )
+  }
+  return <>props.children</>
+}
+
 export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
   const router = useRouter()
 
@@ -81,12 +98,7 @@ export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
   }, [router.events])
 
   return (
-    <GoogleReCaptchaProvider
-      type="v2-checkbox"
-      isEnterprise={true}
-      host="recaptcha.net"
-      siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY ?? ''}
-    >
+    <ConditionalCaptchaProvider>
       <KBarProvider actions={generateActions(router)}>
         <KBarPortal>
           <KBarPositioner style={{ zIndex: 100 }}>
@@ -100,7 +112,7 @@ export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
           <Component {...pageProps} />
         </IdProvider>
       </KBarProvider>
-    </GoogleReCaptchaProvider>
+    </ConditionalCaptchaProvider>
   )
 }