chore: highlight totp app friendly name (#48755)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

UI update

## What is the current behavior?

We only show the alternative factor's name, if one exists.

## What is the new behavior?

When presenting user with the MFA screen, make the MFA factor's
friendly_name appear.

## Additional context

Before:

<img width="456" height="371" alt="Screenshot 2026-08-05 at 15 41 07"
src="https://github.com/user-attachments/assets/7d506641-6a9e-49fe-8c40-98c1eef4b384"
/>


After:
<img width="459" height="394" alt="Screenshot 2026-08-05 at 15 38 27"
src="https://github.com/user-attachments/assets/034312ba-691e-4f56-b4e3-a82df2a17273"
/>
<img width="468" height="434" alt="Screenshot 2026-08-05 at 15 37 43"
src="https://github.com/user-attachments/assets/4c585eae-b8e2-4f93-8210-2c8ac7c20278"
/>


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

* **Bug Fixes**
* Improved multi-factor authentication prompts with clearer formatting
and more consistent factor labels.
* Ensured the primary code label appears whenever a verification factor
is selected.
* Added a fallback label for authentication factors without a display
name.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx

@@ -26,6 +26,11 @@ const schema = z.object({
 
 const formId = 'sign-in-mfa-form'
 
+function getFactorDisplayName(factor: Pick<Factor, 'friendly_name'> | null | undefined): string {
+  const name = factor?.friendly_name?.trim()
+  return name && name.length > 0 ? name : 'your authenticator app'
+}
+
 interface SignInMfaFormProps {
   context?: 'forgot-password' | 'sign-in'
 }
@@ -142,9 +147,14 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
                 <FormItemLayout
                   name="code"
                   label={
-                    selectedFactor && factors?.totp.length === 2
-                      ? `Code generated by ${selectedFactor.friendly_name}`
-                      : null
+                    selectedFactor ? (
+                      <>
+                        Code generated by{' '}
+                        <strong className="text-foreground">
+                          {getFactorDisplayName(selectedFactor)}
+                        </strong>
+                      </>
+                    ) : null
                   }
                 >
                   <FormControl>
@@ -208,9 +218,13 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
                 onClick={() =>
                   setSelectedFactor(factors.totp.find((f) => f.id !== selectedFactor?.id)!)
                 }
-              >{`Authenticate using ${
-                factors.totp.find((f) => f.id !== selectedFactor?.id)?.friendly_name
-              }?`}</a>
+              >
+                Authenticate using{' '}
+                <strong className="text-foreground">
+                  {getFactorDisplayName(factors.totp.find((f) => f.id !== selectedFactor?.id))}
+                </strong>
+                ?
+              </a>
             </li>
           )}
           <li>