mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
Danny White
89cd156e39
## What kind of change does this PR introduce? Bug fix (copy and layout) ## What is the current behavior? After setting up a single MFA factor, Account > Security warns you to add a "backup sign-in method". That reads like another account identity (email / Google / SSO), not a second authenticator app. The add action also sits at the bottom of the MFA card, so the callout has no nearby control. Fixes [FE-4171](https://linear.app/supabase/issue/FE-4171/clarify-backup-sign-in-method-after-mfa-setup) ## What is the new behavior? The MFA block is a `PageSection` with **Add app** in the aside. When one factor is configured, a danger callout above the card tells you to add a backup authenticator app, with **Add another app** opening the same modal. | Before | After | | --- | --- | | <img width="1482" height="896" alt="CleanShot 2026-08-14 at 10 27 33@2x" src="https://github.com/user-attachments/assets/7a8f3737-8e11-49c4-8f8e-3fda527a8c40" /> | <img width="1468" height="802" alt="CleanShot 2026-08-14 at 10 57 06@2x" src="https://github.com/user-attachments/assets/b2f6060e-b6c1-49e4-ae5c-99553ea3e60a" /> | ## To test 1. Open **Account > Security** (`/account/security`). 2. **0 apps:** empty card, **Add app** in the section aside. Click it. The add-factor modal should open. 3. **1 app:** danger callout under the section title. Copy should mention a backup authenticator app, not a sign-in method. **Add another app** and **Add app** should both open the same modal. 4. **2 apps:** callout and add buttons gone. Remove still works. Add or remove an authenticator app on that page to hit each state. If you already have one factor, step 3 is the important check. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Improved the multi-factor authentication interface with clearer sections, cards, and guidance. * Added an empty state when no authenticator apps are configured. * Added a warning when only one authenticator remains to help prevent account lockout. * Limited authenticator app setup to two configured factors. * **Bug Fixes** * Improved loading and error-state presentation for authentication factor management. * Simplified the security page to provide a more consistent MFA experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { PageContainer } from 'ui-patterns/PageContainer'
|
|
import {
|
|
PageHeader,
|
|
PageHeaderDescription,
|
|
PageHeaderMeta,
|
|
PageHeaderSummary,
|
|
PageHeaderTitle,
|
|
} from 'ui-patterns/PageHeader'
|
|
|
|
import { TOTPFactors } from '@/components/interfaces/Account/TOTPFactors'
|
|
import AccountLayout from '@/components/layouts/AccountLayout/AccountLayout'
|
|
import { AppLayout } from '@/components/layouts/AppLayout/AppLayout'
|
|
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
|
import { UnknownInterface } from '@/components/ui/UnknownInterface'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
import type { NextPageWithLayout } from '@/types'
|
|
|
|
const Security: NextPageWithLayout = () => {
|
|
const showSecuritySettings = useIsFeatureEnabled('account:show_security_settings')
|
|
|
|
if (!showSecuritySettings) {
|
|
return <UnknownInterface urlBack={`/account/me`} />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageHeader size="small">
|
|
<PageHeaderMeta>
|
|
<PageHeaderSummary>
|
|
<PageHeaderTitle>Security</PageHeaderTitle>
|
|
<PageHeaderDescription>
|
|
Manage your account security settings and authentication methods.
|
|
</PageHeaderDescription>
|
|
</PageHeaderSummary>
|
|
</PageHeaderMeta>
|
|
</PageHeader>
|
|
<PageContainer size="small">
|
|
<TOTPFactors />
|
|
</PageContainer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
Security.getLayout = (page) => (
|
|
<AppLayout>
|
|
<DefaultLayout headerTitle="Account">
|
|
<AccountLayout title="Security">{page}</AccountLayout>
|
|
</DefaultLayout>
|
|
</AppLayout>
|
|
)
|
|
|
|
export default Security
|