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 = () => {
We highly recommend{' '}
- {
- const el = document.getElementById('enable-captcha')
- if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
- }}
- >
+
enabling captcha
- {' '}
+ {' '}
for anonymous sign-ins
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 = () => {
(
-
-
- {
+ const selectedProvider = CAPTCHA_PROVIDERS.find((x) => x.key === field.value)
+ return (
+
+
+
+
+
+
+
+ {CAPTCHA_PROVIDERS.map((x) => (
+
+ {x.label}
+
+ ))}
+
+
+
+
-
-
-
-
- hCaptcha
-
- Turnstile by Cloudflare
-
-
-
-
-
- )}
+ How to set up {selectedProvider?.label}?
+
+
+ )
+ }}
/>