From 52ce12656e535ddc0242977920c2b6fd04f97a33 Mon Sep 17 00:00:00 2001
From: Zoey <zoey@z0ey.de>
Date: Wed, 14 Jan 2026 17:53:25 +0100
Subject: [PATCH] render totp qrcode locally (do not expose the totp secret to
 a third party api)

Signed-off-by: Zoey <zoey@z0ey.de>
---
 frontend/package.json                  | 1 +
 frontend/src/modals/TwoFactorModal.tsx | 8 ++------
 frontend/yarn.lock                     | 5 +++++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index e0a36a17e5..dcd664c86e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
 		"formik": "^2.4.6",
 		"generate-password-browser": "^1.1.0",
 		"humps": "^2.0.1",
+		"qrcode.react": "^4.2.0",
 		"query-string": "^9.3.1",
 		"react": "^19.2.3",
 		"react-bootstrap": "^2.10.10",
diff --git a/frontend/src/modals/TwoFactorModal.tsx b/frontend/src/modals/TwoFactorModal.tsx
index b5dd480c30..e2cbe9d2d0 100644
--- a/frontend/src/modals/TwoFactorModal.tsx
+++ b/frontend/src/modals/TwoFactorModal.tsx
@@ -1,5 +1,6 @@
 import EasyModal, { type InnerModalProps } from "ez-modal-react";
 import { Field, Form, Formik } from "formik";
+import { QRCodeSVG } from "qrcode.react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
@@ -166,12 +167,7 @@ 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" }}
-						/>
+						<QRCodeSVG value={setupData.otpauthUrl} size={256} marginSize={4} />
 					</div>
 					<label className="mb-3 d-block">
 						<span className="form-label small text-muted">
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0fe46ccd49..c6d0df3f95 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2361,6 +2361,11 @@ property-information@^7.0.0:
   resolved "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz"
   integrity sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==
 
+qrcode.react@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-4.2.0.tgz#1bce8363f348197d145c0da640929a24c83cbca3"
+  integrity sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==
+
 query-string@^9.3.1:
   version "9.3.1"
   resolved "https://registry.npmjs.org/query-string/-/query-string-9.3.1.tgz"