Files
supabase/apps/docs/content/guides/platform/multi-factor-authentication.mdx
Danny White d1e7c403ac fix(ui): align Admonition titles and docs link hover with prose (#48428)
## What kind of change does this PR introduce?

UI bug fix.

## What is the current behavior?

After the recent Admonition a11y refactor:

- Titled Admonitions in MDX (blog and docs) could pick up large prose
top margin on the title, or (after follow-ups) end up with a title much
smaller than the body because the title was a `div` at `text-sm` while
body `<p>`s took prose ~15px
- Docs MDX links (including inside Admonitions) had a weak hover: prose
only shifted underline colour

Prior issues:

- A couple of guide callouts bolded link text via `[**…**](…)`
- Some funky Admonition formatting as called out in comments below

## What is the new behavior?

- `AlertTitle` is a `<p>` with `!mt-0 mb-0.5 font-medium` (not an `h5` /
bare `div`), so it does not break heading hierarchy and matches
admonition body font-size under prose
- Admonition uses `AlertTitle` again (though with `<p>` as explained
above) and wraps MDX `children` in `AlertDescription` (same as
`description`)
- `Alert` / `AlertTitle` / `AlertDescription` get `data-slot`
attributes; description keeps string→`<p>` wrapping, Studio density,
plus `text-balance`
- Docs link hover: typography `a:hover` and `MdxAnchor` now move text +
decoration toward foreground (InlineLink-like), without stealing brand
link colour via `text-inherit`
- Content: remove accidental bold on oauth-scopes and
multi-factor-authentication guide links

| Before | After |
| --- | --- |
| <img width="1360" height="378" alt="CleanShot 2026-07-29 at 16 44
48@2x"
src="https://github.com/user-attachments/assets/1aa98cb4-e691-428e-b7e2-a78afcdf518d"
/> | <img width="1350" height="362" alt="CleanShot 2026-07-29 at 16 44
08@2x"
src="https://github.com/user-attachments/assets/63c9c7df-c1c7-49c4-8fdb-0411ae251a71"
/> |
| <img width="1518" height="448" alt="CleanShot 2026-07-29 at 16 46
18@2x"
src="https://github.com/user-attachments/assets/d618e138-fcd7-4a44-b16d-cb0ac5ba6b0e"
/> | <img width="1524" height="424" alt="CleanShot 2026-07-29 at 16 46
30@2x"
src="https://github.com/user-attachments/assets/dbc7710e-42c6-483c-b367-19b2ff3a6475"
/> |
| <img width="1524" height="598" alt="CleanShot 2026-07-29 at 16 47
15@2x"
src="https://github.com/user-attachments/assets/c9c07f37-4e2b-40fa-bc90-c86a17e5ea32"
/> | <img width="1530" height="584" alt="CleanShot 2026-07-29 at 16 47
39@2x"
src="https://github.com/user-attachments/assets/806735f0-fa44-42e6-bd5a-127899d0bfc2"
/> |

## To test

**Docs**

1. [Functions
quickstart](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/functions/quickstart):
titled tip near the top. Title and body should be the same size, no
giant gap above the title
2. [BYO
MCP](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/ai-tools/byo-mcp):
tip with links. Hover a link (text + underline should both go
foreground)
3. [OAuth
scopes](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes):
note link is not bold
4. [Multi-factor
authentication](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/platform/multi-factor-authentication):
same, note link not bold

**Blog**

5. [CLI v2 config as
code](https://zone-www-dot-com-git-fix-admonition-alert-title-prose-supabase.vercel.app/blog/cli-v2-config-as-code):
titled Admonitions. Title size matches body, no huge top margin

**Other**

6. [Design system:
Admonition](https://design-system-git-fix-admonition-alert-title-prose-supabase.vercel.app/design-system/docs/fragments/admonition):
component reference
7. Studio (e.g. project Edge Functions secrets): Admonitions should stay
compact `text-sm` outside prose. Preview:
[studio-staging](https://studio-staging-git-fix-admonition-alert-title-prose-supabase.vercel.app)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
  * None

* **Style**
* Improved link decoration consistency (underline/hover) across internal
and external documentation content, with safer external link handling.

* **Bug Fixes**
* Refined alert/admonition rendering for clearer title/description
semantics and better spacing/text wrapping.
* Updated documentation image rendering to avoid forwarding
whitespace-only children and adjusted chart image layout.

* **Tests**
  * Expanded assertions for alert/admonition structure and styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-31 12:23:16 +10:00

50 lines
2.4 KiB
Plaintext

---
title: 'Multi-factor Authentication'
description: 'Enable multi-factor authentication (MFA) to keep your account secure.'
subtitle: 'Enable multi-factor authentication (MFA) to keep your account secure.'
---
<Admonition type="note">
This guide is for adding MFA to your Supabase user account. If you want to enable MFA for users in your Supabase project, refer to [this guide](/docs/guides/auth/auth-mfa) instead.
</Admonition>
Multi-factor authentication (MFA) adds an additional layer of security to your user account, by requiring a second factor to verify your user identity. Supabase allows users to enable MFA on their account and set it as a requirement for subsequent logins.
## Supported authentication factors
Currently, Supabase supports adding a unique time-based one-time password (TOTP) to your user account as an additional security factor. You can manage your TOTP factor using apps such as 1Password, Authy, Google Authenticator or Apple's Keychain.
## Enable MFA
You can enable MFA for your user account under your [Supabase account settings](/dashboard/account/security). Enabling MFA will result in all other user sessions to be automatically logged out and forced to sign-in again with MFA.
<Admonition type="note">
Supabase does not return recovery codes. Instead, we recommend that you register a backup TOTP factor to use in an event that you lose access to your primary TOTP factor. Make sure you use a different device and app, or store the secret in a secure location different than your primary one.
</Admonition>
<Admonition type="caution">
For security reasons, we will not be able to restore access to your account if you lose all your two-factor authentication credentials. Do register a backup factor if necessary.
</Admonition>
## Login with MFA
Once you've enabled MFA for your Supabase user account, you will be prompted to enter your second factor challenge code as seen in your preferred TOTP app.
If you are an organization owner and on the Pro, Team or Enterprise plan, you can enforce that all organization members [must have MFA enabled](/docs/guides/platform/mfa/org-mfa-enforcement).
## Disable MFA
You can disable MFA for your user account under your [Supabase account settings](/dashboard/account/security). On subsequent login attempts, you will not be prompted to enter an MFA code.
<Admonition type="caution">
We strongly recommend that you do not disable MFA to avoid unauthorized access to your user account.
</Admonition>