mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Ivan Vasilov
cc47bcfa6d
* Add shimmering-loader CSS to ui-patterns. * Import the shimmering-loader classes from the ui-patterns component. * Remove ShimmeringLoader from studio. * Migrate studio to use ui-patterns/ShimmeringLoader. * Migrate away from using default import for ShimmeringLoader. * Fix the css imports in docs and studio.
537 lines
22 KiB
TypeScript
537 lines
22 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import Link from 'next/link'
|
|
import { useEffect } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { toast } from 'sonner'
|
|
import * as z from 'zod'
|
|
|
|
import { useParams } from 'common'
|
|
import AlertError from 'components/ui/AlertError'
|
|
import NoPermission from 'components/ui/NoPermission'
|
|
import { useAuthConfigQuery } from 'data/auth/auth-config-query'
|
|
import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
|
|
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardFooter,
|
|
FormControl_Shadcn_,
|
|
FormField_Shadcn_,
|
|
Form_Shadcn_,
|
|
Input_Shadcn_,
|
|
PrePostTab,
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
|
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
|
import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils'
|
|
|
|
export const RateLimits = () => {
|
|
const { ref: projectRef } = useParams()
|
|
const { can: canUpdateConfig } = useAsyncCheckPermissions(
|
|
PermissionAction.UPDATE,
|
|
'custom_config_gotrue'
|
|
)
|
|
const { can: canReadConfig } = useAsyncCheckPermissions(
|
|
PermissionAction.READ,
|
|
'custom_config_gotrue'
|
|
)
|
|
|
|
const {
|
|
data: authConfig,
|
|
error,
|
|
isPending: isLoading,
|
|
isError,
|
|
isSuccess,
|
|
} = useAuthConfigQuery({ projectRef })
|
|
const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
|
|
onSuccess: () => {
|
|
toast.success('Rate limits successfully updated')
|
|
},
|
|
onError: (error) => {
|
|
toast.error(`Failed to update rate limits: ${error.message}`)
|
|
},
|
|
})
|
|
|
|
const canUpdateEmailLimit = authConfig?.EXTERNAL_EMAIL_ENABLED && isSmtpEnabled(authConfig)
|
|
const canUpdateSMSRateLimit = authConfig?.EXTERNAL_PHONE_ENABLED
|
|
const canUpdateAnonymousUsersRateLimit = authConfig?.EXTERNAL_ANONYMOUS_USERS_ENABLED
|
|
const canUpdateWeb3RateLimit = authConfig?.EXTERNAL_WEB3_SOLANA_ENABLED
|
|
|
|
const FormSchema = z.object({
|
|
RATE_LIMIT_TOKEN_REFRESH: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an 5 minutes'),
|
|
RATE_LIMIT_VERIFY: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an 5 minutes'),
|
|
RATE_LIMIT_EMAIL_SENT: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an hour'),
|
|
RATE_LIMIT_SMS_SENT: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an hour'),
|
|
RATE_LIMIT_ANONYMOUS_USERS: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an hour'),
|
|
RATE_LIMIT_OTP: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an hour'),
|
|
RATE_LIMIT_WEB3: z.coerce
|
|
.number()
|
|
.min(0, 'Must be not be lower than 0')
|
|
.max(32767, 'Must not be more than 32,767 an hour'),
|
|
})
|
|
|
|
const form = useForm<z.infer<typeof FormSchema>>({
|
|
resolver: zodResolver(FormSchema),
|
|
defaultValues: {
|
|
RATE_LIMIT_TOKEN_REFRESH: 0,
|
|
RATE_LIMIT_VERIFY: 0,
|
|
RATE_LIMIT_EMAIL_SENT: 0,
|
|
RATE_LIMIT_SMS_SENT: 0,
|
|
RATE_LIMIT_ANONYMOUS_USERS: 0,
|
|
RATE_LIMIT_OTP: 0,
|
|
RATE_LIMIT_WEB3: 0,
|
|
},
|
|
})
|
|
|
|
const onSubmit = (data: z.infer<typeof FormSchema>) => {
|
|
if (!projectRef) return console.error('Project ref is required')
|
|
|
|
const payload: Partial<z.infer<typeof FormSchema>> = {}
|
|
const params = [
|
|
'RATE_LIMIT_TOKEN_REFRESH',
|
|
'RATE_LIMIT_VERIFY',
|
|
'RATE_LIMIT_EMAIL_SENT',
|
|
'RATE_LIMIT_SMS_SENT',
|
|
'RATE_LIMIT_ANONYMOUS_USERS',
|
|
'RATE_LIMIT_OTP',
|
|
'RATE_LIMIT_WEB3',
|
|
] as (keyof typeof payload)[]
|
|
params.forEach((param) => {
|
|
if (data[param] !== authConfig?.[param]) payload[param] = data[param]
|
|
})
|
|
|
|
updateAuthConfig({ projectRef, config: payload }, { onSuccess: () => form.reset(data) })
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
form.reset({
|
|
RATE_LIMIT_TOKEN_REFRESH: authConfig.RATE_LIMIT_TOKEN_REFRESH,
|
|
RATE_LIMIT_VERIFY: authConfig.RATE_LIMIT_VERIFY,
|
|
RATE_LIMIT_EMAIL_SENT: authConfig.RATE_LIMIT_EMAIL_SENT,
|
|
RATE_LIMIT_SMS_SENT: authConfig.RATE_LIMIT_SMS_SENT,
|
|
RATE_LIMIT_ANONYMOUS_USERS: authConfig.RATE_LIMIT_ANONYMOUS_USERS,
|
|
RATE_LIMIT_OTP: authConfig.RATE_LIMIT_OTP,
|
|
RATE_LIMIT_WEB3: authConfig.RATE_LIMIT_WEB3 ?? 0,
|
|
})
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isSuccess])
|
|
|
|
if (isError) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<AlertError error={error} subject="Failed to retrieve auth configuration" />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
if (!canReadConfig) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<NoPermission resourceText="view auth configuration settings" />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<GenericSkeletonLoader />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<Form_Shadcn_ {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
|
<Card>
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_EMAIL_SENT"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for sending emails"
|
|
description="Number of emails that can be sent per hour from your project"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="emails/h">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig || !canUpdateEmailLimit}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig || !canUpdateEmailLimit ? (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
{!authConfig.EXTERNAL_EMAIL_ENABLED ? (
|
|
<>
|
|
<p className="font-medium">
|
|
Email-based logins are not enabled for your project
|
|
</p>
|
|
<p className="mt-1">
|
|
Enable email-based logins to update this rate limit
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button asChild type="default" size="tiny">
|
|
<Link href={`/project/${projectRef}/auth/providers`}>
|
|
View auth providers
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="font-medium">
|
|
Custom SMTP provider is required to update this configuration
|
|
</p>
|
|
<p className="mt-1">
|
|
The built-in email service has a fixed rate limit. You will need
|
|
to set up your own custom SMTP provider to update your email rate
|
|
limit
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button asChild type="default" size="tiny">
|
|
<Link href={`/project/${projectRef}/auth/smtp`}>
|
|
View SMTP settings
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</TooltipContent>
|
|
) : null}
|
|
</Tooltip>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_SMS_SENT"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for sending SMS messages"
|
|
description="Number of SMS messages that can be sent per hour from your project"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="sms/h">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig || !canUpdateSMSRateLimit}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig || !canUpdateSMSRateLimit ? (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
Phone-based logins are not enabled for your project
|
|
</p>
|
|
<p className="mt-1">
|
|
Enable phone-based logins to update this rate limit
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button asChild type="default" size="tiny">
|
|
<Link href={`/project/${projectRef}/auth/providers`}>
|
|
View auth providers
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</TooltipContent>
|
|
) : null}
|
|
</Tooltip>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_TOKEN_REFRESH"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for token refreshes"
|
|
description="Number of sessions that can be refreshed in a 5 minute interval per IP address"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="requests/5 min">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig && (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
You don't have permission to update this setting
|
|
</p>
|
|
<p className="mt-1">
|
|
You need additional permissions to update auth configuration settings
|
|
</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
{form.watch('RATE_LIMIT_TOKEN_REFRESH') > 0 && (
|
|
<p className="text-foreground-lighter text-sm mt-2">
|
|
{form.watch('RATE_LIMIT_TOKEN_REFRESH') * 12} requests per hour
|
|
</p>
|
|
)}
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_VERIFY"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for token verifications"
|
|
description="Number of OTP/Magic link verifications that can be made in a 5 minute interval per IP address"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="requests/5 min">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig && (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
You don't have permission to update this setting
|
|
</p>
|
|
<p className="mt-1">
|
|
You need additional permissions to update auth configuration settings
|
|
</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
{form.watch('RATE_LIMIT_VERIFY') > 0 && (
|
|
<p className="text-foreground-lighter text-sm mt-2">
|
|
{form.watch('RATE_LIMIT_VERIFY') * 12} requests per hour
|
|
</p>
|
|
)}
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_ANONYMOUS_USERS"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for anonymous users"
|
|
description="Number of anonymous sign-ins that can be made per hour per IP address"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="requests/h">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig || !canUpdateAnonymousUsersRateLimit}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig || !canUpdateAnonymousUsersRateLimit ? (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
Anonymous sign-ins are not enabled for your project. Enable them to
|
|
control this rate limit.
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button asChild type="default" size="tiny">
|
|
<Link href={`/project/${projectRef}/auth/providers`}>
|
|
View auth settings
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</TooltipContent>
|
|
) : null}
|
|
</Tooltip>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_OTP"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for sign-ups and sign-ins"
|
|
description="Number of sign-up and sign-in requests that can be made in a 5 minute interval per IP address (excludes anonymous users)"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="requests/5 min">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig && (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
You don't have permission to update this setting
|
|
</p>
|
|
<p className="mt-1">
|
|
You need additional permissions to update auth configuration settings
|
|
</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
{form.watch('RATE_LIMIT_OTP') > 0 && (
|
|
<p className="text-foreground-lighter text-sm mt-2">
|
|
{form.watch('RATE_LIMIT_OTP') * 12} requests per hour
|
|
</p>
|
|
)}
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name="RATE_LIMIT_WEB3"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Rate limit for Web3 sign-ups and sign-ins"
|
|
description="Number of Web3 sign-up or sign-in requests that can be made per IP address in 5 minutes"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<FormControl_Shadcn_>
|
|
<PrePostTab postTab="requests/5 min">
|
|
<Input_Shadcn_
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig || !canUpdateWeb3RateLimit}
|
|
/>
|
|
</PrePostTab>
|
|
</FormControl_Shadcn_>
|
|
</TooltipTrigger>
|
|
{!canUpdateConfig || !canUpdateWeb3RateLimit ? (
|
|
<TooltipContent side="left" className="w-80 p-4">
|
|
<p className="font-medium">
|
|
Web3 auth provider is not enabled for this project. Enable it to
|
|
control this rate limit.
|
|
</p>
|
|
<div className="mt-3">
|
|
<Button asChild type="default" size="tiny">
|
|
<Link href={`/project/${projectRef}/auth/providers`}>
|
|
View Auth provider settings
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</TooltipContent>
|
|
) : null}
|
|
</Tooltip>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardFooter className="justify-end space-x-2">
|
|
{form.formState.isDirty && (
|
|
<Button type="default" onClick={() => form.reset()}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
disabled={!canUpdateConfig || isUpdatingConfig || !form.formState.isDirty}
|
|
loading={isUpdatingConfig}
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
</Form_Shadcn_>
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|