github/TREK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mfa): generate SVG QR code

Browse Source 
Replace the rasterized 180px PNG QR code with a crisp 250px SVG
This commit is contained in:
jubnl
2026-04-05 17:14:36 +02:00
parent 9ee5d21c3a
commit c6148ba4f2
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/Settings/AccountTab.tsx
View File

@@ -253,8 +253,8 @@ export default function AccountTab(): React.ReactElement {
onClick={async () => {
setMfaLoading(true)
try {
const data = await authApi.mfaSetup() as { qr_data_url: string; secret: string }
setMfaQr(data.qr_data_url)
const data = await authApi.mfaSetup() as { qr_svg: string; secret: string }
setMfaQr(data.qr_svg)
setMfaSecret(data.secret)
setMfaSetupCode('')
} catch (err: unknown) {
@@ -274,7 +274,7 @@ export default function AccountTab(): React.ReactElement {
{!user?.mfa_enabled && mfaQr && (
<div className="space-y-3">
<p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.scanQr')}</p>
<img src={mfaQr} alt="" className="rounded-lg border mx-auto block" style={{ maxWidth: 200, borderColor: 'var(--border-primary)' }} />
<div className="rounded-lg border mx-auto block overflow-hidden" style={{ width: 'fit-content', borderColor: 'var(--border-primary)' }} dangerouslySetInnerHTML={{ __html: mfaQr! }} />
<div>
<label className="block text-xs font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.secretLabel')}</label>
<code className="block text-xs p-2 rounded break-all" style={{ background: 'var(--bg-hover)', color: 'var(--text-primary)' }}>{mfaSecret}</code>

4
server/src/routes/auth.ts
View File

@@ -260,8 +260,8 @@ router.post('/mfa/setup', authenticate, (req: Request, res: Response) => {
const result = setupMfa(authReq.user.id, authReq.user.email);
if (result.error) return res.status(result.status!).json({ error: result.error });
result.qrPromise!
.then((qr_data_url: string) => {
res.json({ secret: result.secret, otpauth_url: result.otpauth_url, qr_data_url });
.then((qr_svg: string) => {
res.json({ secret: result.secret, otpauth_url: result.otpauth_url, qr_svg });
})
.catch((err: unknown) => {
console.error('[MFA] QR code generation error:', err);

2
server/src/services/authService.ts
View File

@@ -816,7 +816,7 @@ export function setupMfa(userId: number, userEmail: string): { error?: string; s
console.error('[MFA] Setup error:', err);
return { error: 'MFA setup failed', status: 500 };
}
return { secret, otpauth_url, qrPromise: QRCode.toDataURL(otpauth_url) };
return { secret, otpauth_url, qrPromise: QRCode.toString(otpauth_url, { type: 'svg', width: 250 }) };
}
export function enableMfa(userId: number, code?: string): { error?: string; status?: number; success?: boolean; mfa_enabled?: boolean; backup_codes?: string[] } {

2
server/tests/integration/auth.test.ts
View File

@@ -312,7 +312,7 @@ describe('MFA', () => {
expect(res.status).toBe(200);
expect(res.body.secret).toBeDefined();
expect(res.body.otpauth_url).toContain('otpauth://');
expect(res.body.qr_data_url).toMatch(/^data:image/);
expect(res.body.qr_svg).toMatch(/^<svg/);
});
it('AUTH-015 — POST /api/auth/mfa/enable with valid TOTP code enables MFA', async () => {