supabase / supabase / 42760996519

87%

push

github

feat(studio): add a shared shield badge to identity verification (#53145)

## Problem

The authenticator and recovery-code verification screens use the plain
Supabase logo, while other security interstitials use a badge to show
the purpose of the screen.

## Solution

Add the same shield with a cut-out check to **Verify your identity** and
**Use a recovery code**, using `InterstitialLogoBadge`.

| After |
| --- |
| <img width="942" height="456" alt="CleanShot 2026-11-09 at 18 02
09@2x"
src="https://github.com/user-attachments/assets/6e19eb79-7b42-4f95-967d-479ca38cc347"
/> |
| _Note the grey “Shield with cut-out check” for verification
interstitials like this one._ |
| <img width="1016" height="454" alt="CleanShot 2026-11-09 at 10 35
46@2x"
src="https://github.com/user-attachments/assets/dca51146-c7ee-44fd-a318-ef7101f1c77f"
/> |
| _No visual changes here, just showing the family of badges._ |

## Review instructions

1. On [Security on this
preview](https://studio-staging-git-dnywh-verification-shield-badge-supabase.vercel.app/dashboard/account/security),
follow [#52352’s breakpoint
steps](https://github.com/supabase/supabase/pull/52352#review-instructions)
with a disposable MFA account that has recovery codes. Check for the
shield in the top-right corner of the Supabase logo.
2. Choose **Use recovery code instead**. Check that the same badge
appears on the recovery-code screen.

2102 of 2476 branches covered (84.89%)

Branch coverage included in aggregate %.

2888 of 3247 relevant lines covered (88.94%)

201.74 hits per line