rate-limits.tsx81 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { PageContainer } from 'ui-patterns/PageContainer'
4import {
5 PageHeader,
6 PageHeaderAside,
7 PageHeaderDescription,
8 PageHeaderMeta,
9 PageHeaderSummary,
10 PageHeaderTitle,
11} from 'ui-patterns/PageHeader'
12import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
13import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
14
15import { RateLimits } from '@/components/interfaces/Auth/RateLimits/RateLimits'
16import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
17import DefaultLayout from '@/components/layouts/DefaultLayout'
18import { DocsButton } from '@/components/ui/DocsButton'
19import NoPermission from '@/components/ui/NoPermission'
20import { UnknownInterface } from '@/components/ui/UnknownInterface'
21import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
22import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
23import { DOCS_URL } from '@/lib/constants'
24import type { NextPageWithLayout } from '@/types'
25
26const RateLimitsPage: NextPageWithLayout = () => {
27 const { ref } = useParams()
28 const showRateLimits = useIsFeatureEnabled('authentication:rate_limits')
29
30 const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions(
31 PermissionAction.READ,
32 'custom_config_gotrue'
33 )
34
35 if (!showRateLimits) {
36 return <UnknownInterface urlBack={`/project/${ref}/auth/users`} />
37 }
38
39 if (isPermissionsLoaded && !canReadAuthSettings) {
40 return <NoPermission isFullPage resourceText="access your project's auth rate limit settings" />
41 }
42
43 return (
44 <>
45 <PageHeader size="default">
46 <PageHeaderMeta>
47 <PageHeaderSummary>
48 <PageHeaderTitle>Rate Limits</PageHeaderTitle>
49 <PageHeaderDescription>
50 Safeguard against bursts of incoming traffic to prevent abuse and maximize stability
51 </PageHeaderDescription>
52 </PageHeaderSummary>
53 <PageHeaderAside>
54 <DocsButton
55 href={`${DOCS_URL}/guides/platform/going-into-prod#rate-limiting-resource-allocation--abuse-prevention`}
56 />
57 </PageHeaderAside>
58 </PageHeaderMeta>
59 </PageHeader>
60 <PageContainer size="default">
61 {!isPermissionsLoaded ? (
62 <PageSection>
63 <PageSectionContent>
64 <GenericSkeletonLoader />
65 </PageSectionContent>
66 </PageSection>
67 ) : (
68 <RateLimits />
69 )}
70 </PageContainer>
71 </>
72 )
73}
74
75RateLimitsPage.getLayout = (page) => (
76 <DefaultLayout>
77 <AuthLayout title="Rate Limits">{page}</AuthLayout>
78 </DefaultLayout>
79)
80
81export default RateLimitsPage