mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
## What kind of change does this PR introduce? After users have set up a new MFA (first or not), we must: - check whether recovery codes have already been generated - if there are none, generate recovery codes and display them, "forcing" users to copy them - if already generated, show them how many are still available > [!NOTE] > The _Delete my recovery codes_ button in last screenshot only appear on local and staging environments ## How to test - On an account that doesn't have recovery codes generated yet and has an MFA added - You should see an admonition suggesting to generate the codes ## Screenshots <img width="729" height="306" alt="image" src="https://github.com/user-attachments/assets/79ba3870-4ef8-4571-9fd6-36eed20c9c24" /> <img width="550" height="356" alt="image" src="https://github.com/user-attachments/assets/1632611a-996a-470d-b6cd-a4693b0f4602" /> <img width="719" height="205" alt="image" src="https://github.com/user-attachments/assets/73cef611-05cf-4fac-bbd2-243f9b28e48d" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added support for generating, copying, and confirming MFA recovery codes. - Added recovery-code status visibility, including remaining and exhausted codes. - Added the ability to delete recovery codes with confirmation. - Added clear loading, success, and error states for recovery-code actions. - Recovery-code status refreshes after codes are generated or deleted. - **Bug Fixes** - Recovery-code notices now remain visible when all codes have been used. - Recovery-code dialogs can now be closed after generation errors. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import { recoveryCodeKeys } from './keys'
|
|
import { handleError } from '@/data/fetchers'
|
|
import { auth } from '@/lib/gotrue'
|
|
import type { ResponseError, UseCustomQueryOptions } from '@/types'
|
|
|
|
export async function getRecoveryCodesStatus() {
|
|
const { data, error } = await auth.mfa.recoveryCodes.getStatus()
|
|
// If users haven't enrolled yet, just return null so that UI does not retry the request and
|
|
// offer to enroll
|
|
if (error?.code === 'mfa_factor_not_found') {
|
|
return { status: 'unenrolled', data: null } as const
|
|
}
|
|
if (error) handleError(error)
|
|
|
|
return { status: 'available', data } as const
|
|
}
|
|
|
|
export type RecoveryCodesStatusData = Awaited<ReturnType<typeof getRecoveryCodesStatus>>
|
|
export type RecoveryCodesError = ResponseError
|
|
|
|
export const useRecoveryCodesStatusQuery = <TData = RecoveryCodesStatusData>({
|
|
enabled = true,
|
|
...options
|
|
}: UseCustomQueryOptions<RecoveryCodesStatusData, RecoveryCodesError, TData> = {}) =>
|
|
useQuery<RecoveryCodesStatusData, RecoveryCodesError, TData>({
|
|
queryKey: recoveryCodeKeys.status(),
|
|
queryFn: () => getRecoveryCodesStatus(),
|
|
staleTime: 1000 * 60 * 30,
|
|
enabled,
|
|
...options,
|
|
})
|