From 4d30946d2f039f55a185201b00376c29f595b866 Mon Sep 17 00:00:00 2001
From: vgoer <goerblue@gmail.com>
Date: Tue, 25 Aug 2026 09:14:44 +0000
Subject: [PATCH] fix: local QR code

---
 frontend/src/modals/TwoFactorModal.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modals/TwoFactorModal.tsx b/frontend/src/modals/TwoFactorModal.tsx
index fa46c89cc..2b8639fa9 100644
--- a/frontend/src/modals/TwoFactorModal.tsx
+++ b/frontend/src/modals/TwoFactorModal.tsx
@@ -7,6 +7,7 @@ import { disable2FA, enable2FA, get2FAStatus, regenerateBackupCodes, start2FASet
 import { Button } from "src/components";
 import { T } from "src/locale";
 import { validateString } from "src/modules/Validations";
+import QRCode from "react-qr-code";
 
 type Step = "loading" | "status" | "setup" | "verify" | "backup" | "disable";
 
@@ -155,11 +156,10 @@ const TwoFactorModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						<T id="2fa.setup-instructions" />
 					</p>
 					<div className="text-center mb-3">
-						<img
-							src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(setupData.otpauthUrl)}`}
-							alt="QR Code"
-							className="img-fluid"
-							style={{ maxWidth: "200px" }}
+						<QRCode
+							value={setupData.otpauthUrl}
+							size={200}
+							style={{ maxWidth: "200px", height: "auto" }}
 						/>
 					</div>
 					<label className="mb-3 d-block">