From 5eddb59e365e08f4858cdbe4f4deca6527fc7c2c Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 7 Apr 2025 21:03:34 +0800
Subject: [PATCH] Fix enabling captcha link to protection page, and add docs to
 captcha providers (#34789)

---
 .../BasicAuthSettingsForm.tsx                 | 11 +--
 .../ProtectionAuthSettingsForm.tsx            | 70 ++++++++++++-------
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
index e00210e1748..18623d0ab94 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
@@ -238,16 +238,9 @@ const BasicAuthSettingsForm = () => {
                     <WarningIcon />
                     <AlertTitle_Shadcn_>
                       We highly recommend{' '}
-                      <span
-                        tabIndex={1}
-                        className="cursor-pointer underline"
-                        onClick={() => {
-                          const el = document.getElementById('enable-captcha')
-                          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
-                        }}
-                      >
+                      <InlineLink href={`/project/${projectRef}/auth/protection`}>
                         enabling captcha
-                      </span>{' '}
+                      </InlineLink>{' '}
                       for anonymous sign-ins
                     </AlertTitle_Shadcn_>
                     <AlertDescription_Shadcn_>
diff --git a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
index a0e3fe248f7..98370bad538 100644
--- a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
@@ -1,18 +1,18 @@
+import { yupResolver } from '@hookform/resolvers/yup'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Eye, EyeOff } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { boolean, number, object, string } from 'yup'
-import { yupResolver } from '@hookform/resolvers/yup'
 
 import { useParams } from 'common'
 import { ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
+import { InlineLink } from 'components/ui/InlineLink'
 import NoPermission from 'components/ui/NoPermission'
 import { useAuthConfigQuery } from 'data/auth/auth-config-query'
 import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
@@ -25,17 +25,23 @@ import {
   FormField_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
-  Select_Shadcn_,
+  PrePostTab,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
+  Select_Shadcn_,
   Switch,
   WarningIcon,
-  PrePostTab,
 } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { NO_REQUIRED_CHARACTERS } from '../Auth.constants'
 
+const CAPTCHA_PROVIDERS = [
+  { key: 'hcaptcha', label: 'hCaptcha' },
+  { key: 'turnstile', label: 'Turnstile by Cloudflare' },
+]
+
 const schema = object({
   DISABLE_SIGNUP: boolean().required(),
   EXTERNAL_ANONYMOUS_USERS_ENABLED: boolean().required(),
@@ -190,27 +196,43 @@ const ProtectionAuthSettingsForm = () => {
                   <FormField_Shadcn_
                     control={protectionForm.control}
                     name="SECURITY_CAPTCHA_PROVIDER"
-                    render={({ field }) => (
-                      <FormItemLayout layout="flex-row-reverse" label="Choose Captcha Provider">
-                        <FormControl_Shadcn_>
-                          <Select_Shadcn_
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            disabled={!canUpdateConfig}
+                    render={({ field }) => {
+                      const selectedProvider = CAPTCHA_PROVIDERS.find((x) => x.key === field.value)
+                      return (
+                        <FormItemLayout layout="flex-row-reverse" label="Choose Captcha Provider">
+                          <FormControl_Shadcn_>
+                            <Select_Shadcn_
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              disabled={!canUpdateConfig}
+                            >
+                              <SelectTrigger_Shadcn_>
+                                <SelectValue_Shadcn_ placeholder="Select provider" />
+                              </SelectTrigger_Shadcn_>
+                              <SelectContent_Shadcn_ align="end">
+                                {CAPTCHA_PROVIDERS.map((x) => (
+                                  <SelectItem_Shadcn_ key={x.key} value={x.key}>
+                                    {x.label}
+                                  </SelectItem_Shadcn_>
+                                ))}
+                              </SelectContent_Shadcn_>
+                            </Select_Shadcn_>
+                          </FormControl_Shadcn_>
+                          <InlineLink
+                            href={
+                              field.value === 'hcaptcha'
+                                ? 'https://supabase.com/docs/guides/auth/auth-captcha?queryGroups=captcha-method&captcha-method=hcaptcha-1'
+                                : field.value === 'turnstile'
+                                  ? 'https://supabase.com/docs/guides/auth/auth-captcha?queryGroups=captcha-method&captcha-method=turnstile-1'
+                                  : '/'
+                            }
+                            className="mt-2 text-xs text-foreground-light hover:text-foreground no-underline"
                           >
-                            <SelectTrigger_Shadcn_>
-                              <SelectValue_Shadcn_ placeholder="Select provider" />
-                            </SelectTrigger_Shadcn_>
-                            <SelectContent_Shadcn_>
-                              <SelectItem_Shadcn_ value="hcaptcha">hCaptcha</SelectItem_Shadcn_>
-                              <SelectItem_Shadcn_ value="turnstile">
-                                Turnstile by Cloudflare
-                              </SelectItem_Shadcn_>
-                            </SelectContent_Shadcn_>
-                          </Select_Shadcn_>
-                        </FormControl_Shadcn_>
-                      </FormItemLayout>
-                    )}
+                            How to set up {selectedProvider?.label}?
+                          </InlineLink>
+                        </FormItemLayout>
+                      )
+                    }}
                   />
                 </CardContent>