mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
fadymak
19dfbd250a
Exposes the access token expiry (`JWT_EXP`) under `Auth -> Sessions` settings as opposed to the Legacy JWT settings previously used. <img width="1632" height="1199" alt="Screenshot 2026-07-23 at 10 06 33" src="https://github.com/user-attachments/assets/85356e57-da95-404c-852a-21cf9cab2b74" /> <img width="1198" height="1119" alt="Screenshot 2026-07-23 at 10 06 19" src="https://github.com/user-attachments/assets/bfa64b3b-1902-45eb-83ed-ca8bc12673af" /> <img width="1237" height="513" alt="Screenshot 2026-07-23 at 10 03 44" src="https://github.com/user-attachments/assets/85779e9b-30f2-48c5-9faa-4c650d450227" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added an **Access Tokens** section to configure JWT expiration with dedicated Save/Cancel controls and success/error toasts. * Enforced a maximum JWT expiration value (must be **less than 604800 seconds**). * **Bug Fixes** * Updated the Sessions auth page text to better clarify configuration for access tokens, refresh tokens, and user sessions. * **Documentation** * Updated JWT expiration guidance to point to **Auth settings → Access Tokens** (replacing legacy JWT secret references). * **Chores** * Expanded automated tests covering Access Tokens saving and validation. * **Refactor** * Removed JWT expiration editing from the legacy JWT Secrets area, consolidating it under Access Tokens. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
525 lines
18 KiB
TypeScript
525 lines
18 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useParams } from 'common'
|
|
import { useEffect, useState } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardFooter,
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormInputGroupInput,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupText,
|
|
Switch,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
import {
|
|
PageSection,
|
|
PageSectionContent,
|
|
PageSectionMeta,
|
|
PageSectionSummary,
|
|
PageSectionTitle,
|
|
} from 'ui-patterns/PageSection'
|
|
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
|
import * as z from 'zod'
|
|
|
|
import { AlertError } from '@/components/ui/AlertError'
|
|
import { NoPermission } from '@/components/ui/NoPermission'
|
|
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
|
|
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
|
|
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
|
|
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { IS_PLATFORM } from '@/lib/constants'
|
|
|
|
function HoursOrNeverText({ value }: { value: number }) {
|
|
if (value === 0) {
|
|
return 'never'
|
|
} else if (value === 1) {
|
|
return 'hour'
|
|
} else {
|
|
return 'hours'
|
|
}
|
|
}
|
|
|
|
const MAX_JWT_EXP = 604800
|
|
|
|
const AccessTokenSchema = z.object({
|
|
JWT_EXP: z.coerce
|
|
.number()
|
|
.int('Must be a whole number')
|
|
.positive('Must be greater than 0')
|
|
.max(MAX_JWT_EXP, `Must be less than ${MAX_JWT_EXP}`),
|
|
})
|
|
|
|
const RefreshTokenSchema = z.object({
|
|
REFRESH_TOKEN_ROTATION_ENABLED: z.boolean(),
|
|
SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: z.coerce.number().min(0, 'Must be a value more than 0'),
|
|
})
|
|
|
|
const UserSessionsSchema = z.object({
|
|
SESSIONS_TIMEBOX: z.coerce.number().min(0, 'Must be a positive number'),
|
|
SESSIONS_INACTIVITY_TIMEOUT: z.coerce
|
|
.number()
|
|
.multipleOf(0.1)
|
|
.min(0, 'Must be a positive number'),
|
|
SESSIONS_SINGLE_PER_USER: z.boolean(),
|
|
})
|
|
|
|
export const SessionsAuthSettingsForm = () => {
|
|
const { ref: projectRef } = useParams()
|
|
const {
|
|
data: authConfig,
|
|
error: authConfigError,
|
|
isError,
|
|
isPending: isLoading,
|
|
} = useAuthConfigQuery({ projectRef })
|
|
const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation()
|
|
|
|
// Separate loading states for each form
|
|
const [isUpdatingAccessToken, setIsUpdatingAccessToken] = useState(false)
|
|
const [isUpdatingRefreshTokens, setIsUpdatingRefreshTokens] = useState(false)
|
|
const [isUpdatingUserSessions, setIsUpdatingUserSessions] = useState(false)
|
|
|
|
const { can: canReadConfig } = useAsyncCheckPermissions(
|
|
PermissionAction.READ,
|
|
'custom_config_gotrue'
|
|
)
|
|
const { can: canUpdateConfig } = useAsyncCheckPermissions(
|
|
PermissionAction.UPDATE,
|
|
'custom_config_gotrue'
|
|
)
|
|
|
|
const { hasAccess: hasUserSessionsEntitlement, isLoading: isLoadingEntitlements } =
|
|
useCheckEntitlements('auth.user_sessions')
|
|
const promptProPlanUpgrade = IS_PLATFORM && !hasUserSessionsEntitlement
|
|
|
|
const accessTokenForm = useForm<z.infer<typeof AccessTokenSchema>>({
|
|
resolver: zodResolver(AccessTokenSchema),
|
|
defaultValues: {
|
|
JWT_EXP: 3600,
|
|
},
|
|
})
|
|
|
|
const refreshTokenForm = useForm<z.infer<typeof RefreshTokenSchema>>({
|
|
resolver: zodResolver(RefreshTokenSchema),
|
|
defaultValues: {
|
|
REFRESH_TOKEN_ROTATION_ENABLED: false,
|
|
SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: 0,
|
|
},
|
|
})
|
|
|
|
const userSessionsForm = useForm({
|
|
resolver: zodResolver(UserSessionsSchema),
|
|
defaultValues: {
|
|
SESSIONS_TIMEBOX: 0,
|
|
SESSIONS_INACTIVITY_TIMEOUT: 0,
|
|
SESSIONS_SINGLE_PER_USER: false,
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (authConfig) {
|
|
// Only reset forms if they're not currently being updated
|
|
if (!isUpdatingAccessToken) {
|
|
accessTokenForm.reset({
|
|
JWT_EXP: authConfig.JWT_EXP ?? 3600,
|
|
})
|
|
}
|
|
|
|
if (!isUpdatingRefreshTokens) {
|
|
refreshTokenForm.reset({
|
|
REFRESH_TOKEN_ROTATION_ENABLED: authConfig.REFRESH_TOKEN_ROTATION_ENABLED || false,
|
|
SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: authConfig.SECURITY_REFRESH_TOKEN_REUSE_INTERVAL,
|
|
})
|
|
}
|
|
|
|
if (!isUpdatingUserSessions) {
|
|
userSessionsForm.reset({
|
|
SESSIONS_TIMEBOX: authConfig.SESSIONS_TIMEBOX || 0,
|
|
SESSIONS_INACTIVITY_TIMEOUT: authConfig.SESSIONS_INACTIVITY_TIMEOUT || 0,
|
|
SESSIONS_SINGLE_PER_USER: authConfig.SESSIONS_SINGLE_PER_USER || false,
|
|
})
|
|
}
|
|
}
|
|
}, [authConfig, isUpdatingAccessToken, isUpdatingRefreshTokens, isUpdatingUserSessions])
|
|
|
|
const onSubmitAccessToken = (values: z.infer<typeof AccessTokenSchema>) => {
|
|
const payload = { ...values }
|
|
setIsUpdatingAccessToken(true)
|
|
|
|
updateAuthConfig(
|
|
{ projectRef: projectRef!, config: payload },
|
|
{
|
|
onError: (error) => {
|
|
toast.error(`Failed to update access token settings: ${error?.message}`)
|
|
setIsUpdatingAccessToken(false)
|
|
},
|
|
onSuccess: () => {
|
|
toast.success('Successfully updated access token settings')
|
|
setIsUpdatingAccessToken(false)
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
const onSubmitRefreshTokens = (values: any) => {
|
|
const payload = { ...values }
|
|
setIsUpdatingRefreshTokens(true)
|
|
|
|
updateAuthConfig(
|
|
{ projectRef: projectRef!, config: payload },
|
|
{
|
|
onError: (error) => {
|
|
toast.error(`Failed to update refresh token settings: ${error?.message}`)
|
|
setIsUpdatingRefreshTokens(false)
|
|
},
|
|
onSuccess: () => {
|
|
toast.success('Successfully updated refresh token settings')
|
|
setIsUpdatingRefreshTokens(false)
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
const onSubmitUserSessions = (values: any) => {
|
|
const payload = { ...values }
|
|
setIsUpdatingUserSessions(true)
|
|
|
|
updateAuthConfig(
|
|
{ projectRef: projectRef!, config: payload },
|
|
{
|
|
onError: (error) => {
|
|
toast.error(`Failed to update user session settings: ${error?.message}`)
|
|
setIsUpdatingUserSessions(false)
|
|
},
|
|
onSuccess: () => {
|
|
toast.success('Successfully updated user session settings')
|
|
setIsUpdatingUserSessions(false)
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<AlertError error={authConfigError} subject="Failed to retrieve auth configuration" />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
if (!canReadConfig) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<NoPermission resourceText="view auth configuration settings" />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
if (isLoading || isLoadingEntitlements) {
|
|
return (
|
|
<PageSection>
|
|
<PageSectionContent>
|
|
<GenericSkeletonLoader />
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageSection>
|
|
<PageSectionMeta>
|
|
<PageSectionSummary>
|
|
<PageSectionTitle>User Sessions</PageSectionTitle>
|
|
</PageSectionSummary>
|
|
</PageSectionMeta>
|
|
<PageSectionContent>
|
|
<Form {...userSessionsForm}>
|
|
<form
|
|
onSubmit={userSessionsForm.handleSubmit(onSubmitUserSessions)}
|
|
className="space-y-4"
|
|
>
|
|
<Card>
|
|
<CardContent>
|
|
<FormField
|
|
control={userSessionsForm.control}
|
|
name="SESSIONS_SINGLE_PER_USER"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Enforce single session per user"
|
|
description="If enabled, all but a user's most recently active session will be terminated."
|
|
>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
|
|
/>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField
|
|
control={userSessionsForm.control}
|
|
name="SESSIONS_TIMEBOX"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Time-box user sessions"
|
|
description="The amount of time before a user is forced to sign in again. Use 0 for never."
|
|
>
|
|
<FormControl className="w-full">
|
|
<InputGroup>
|
|
<FormInputGroupInput
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>
|
|
<HoursOrNeverText value={field.value || 0} />
|
|
</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
<CardContent>
|
|
<FormField
|
|
control={userSessionsForm.control}
|
|
name="SESSIONS_INACTIVITY_TIMEOUT"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Inactivity timeout"
|
|
description="The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never."
|
|
>
|
|
<FormControl className="w-full">
|
|
<InputGroup>
|
|
<FormInputGroupInput
|
|
type="number"
|
|
{...field}
|
|
className="flex-1"
|
|
disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>
|
|
<HoursOrNeverText value={field.value || 0} />
|
|
</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
|
|
{promptProPlanUpgrade && (
|
|
<UpgradeToPro
|
|
fullWidth
|
|
source="authSessions"
|
|
featureProposition="configure user sessions"
|
|
primaryText="Configuring user sessions is only available on the Pro Plan and above"
|
|
secondaryText="Upgrade to Pro Plan to configure settings for user sessions."
|
|
/>
|
|
)}
|
|
|
|
<CardFooter className="justify-end space-x-2">
|
|
{userSessionsForm.formState.isDirty && (
|
|
<Button variant="default" onClick={() => userSessionsForm.reset()}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant={promptProPlanUpgrade ? 'default' : 'primary'}
|
|
type="submit"
|
|
disabled={
|
|
!canUpdateConfig ||
|
|
isUpdatingUserSessions ||
|
|
!userSessionsForm.formState.isDirty
|
|
}
|
|
loading={isUpdatingUserSessions}
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
</Form>
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
|
|
<PageSection>
|
|
<PageSectionMeta>
|
|
<PageSectionSummary>
|
|
<PageSectionTitle>Access Tokens</PageSectionTitle>
|
|
</PageSectionSummary>
|
|
</PageSectionMeta>
|
|
<PageSectionContent>
|
|
<Form {...accessTokenForm}>
|
|
<form
|
|
onSubmit={accessTokenForm.handleSubmit(onSubmitAccessToken)}
|
|
className="space-y-4"
|
|
>
|
|
<Card>
|
|
<CardContent>
|
|
<FormField
|
|
control={accessTokenForm.control}
|
|
name="JWT_EXP"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Access token expiry time"
|
|
description="How long access tokens are valid for before they must be refreshed. Recommendation: 3600 seconds."
|
|
>
|
|
<FormControl className="w-full">
|
|
<InputGroup>
|
|
<FormInputGroupInput
|
|
type="number"
|
|
min={1}
|
|
{...field}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>seconds</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
<CardFooter className="justify-end space-x-2">
|
|
{accessTokenForm.formState.isDirty && (
|
|
<Button variant="default" onClick={() => accessTokenForm.reset()}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="primary"
|
|
type="submit"
|
|
disabled={
|
|
!canUpdateConfig ||
|
|
isUpdatingAccessToken ||
|
|
!accessTokenForm.formState.isDirty
|
|
}
|
|
loading={isUpdatingAccessToken}
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
</Form>
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
|
|
<PageSection>
|
|
<PageSectionMeta>
|
|
<PageSectionSummary>
|
|
<PageSectionTitle>Refresh Tokens</PageSectionTitle>
|
|
</PageSectionSummary>
|
|
</PageSectionMeta>
|
|
<PageSectionContent>
|
|
<Form {...refreshTokenForm}>
|
|
<form
|
|
onSubmit={refreshTokenForm.handleSubmit(onSubmitRefreshTokens)}
|
|
className="space-y-4"
|
|
>
|
|
<Card>
|
|
<CardContent>
|
|
<FormField
|
|
control={refreshTokenForm.control}
|
|
name="REFRESH_TOKEN_ROTATION_ENABLED"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Detect and revoke potentially compromised refresh tokens"
|
|
description="Prevent replay attacks from potentially compromised refresh tokens."
|
|
>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
<CardContent>
|
|
<FormField
|
|
control={refreshTokenForm.control}
|
|
name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Refresh token reuse interval"
|
|
description="Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds."
|
|
>
|
|
<FormControl className="w-full">
|
|
<InputGroup>
|
|
<FormInputGroupInput
|
|
type="number"
|
|
min={0}
|
|
{...field}
|
|
disabled={!canUpdateConfig}
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>seconds</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
<CardFooter className="justify-end space-x-2">
|
|
{refreshTokenForm.formState.isDirty && (
|
|
<Button variant="default" onClick={() => refreshTokenForm.reset()}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="primary"
|
|
type="submit"
|
|
disabled={
|
|
!canUpdateConfig ||
|
|
isUpdatingRefreshTokens ||
|
|
!refreshTokenForm.formState.isDirty
|
|
}
|
|
loading={isUpdatingRefreshTokens}
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
</Form>
|
|
</PageSectionContent>
|
|
</PageSection>
|
|
</>
|
|
)
|
|
}
|