From ab800bbef9563490b644c838eb1551a99b3f88c8 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:43:39 +0200
Subject: [PATCH] fix: handle Logto data URI in MFA QR code display

Logto's secretQrCode is a data:image/png;base64 URI, not an otpauth://
string. QRCodeSVG crashes trying to encode it ("Data too long"). Now
renders data URIs as <img> and only uses QRCodeSVG for otpauth:// URIs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/account/MfaSection.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/account/MfaSection.tsx b/ui/src/components/account/MfaSection.tsx
index fb50592..e9dde51 100644
--- a/ui/src/components/account/MfaSection.tsx
+++ b/ui/src/components/account/MfaSection.tsx
@@ -162,7 +162,11 @@ export function MfaSection() {
           Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.), then enter the 6-digit code below.
         </p>
         <div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
-          <QRCodeSVG value={setupData.secretQrCode} size={200} />
+          {setupData.secretQrCode.startsWith('data:') ? (
+            <img src={setupData.secretQrCode} alt="TOTP QR Code" width={200} height={200} />
+          ) : (
+            <QRCodeSVG value={setupData.secretQrCode} size={200} />
+          )}
         </div>
         <div style={{
           textAlign: 'center',