Skip to content

feat(settings): render qr code in mfa setup flow #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndreLiar merged 1 commit into from
Jun 15, 2026
Merged

feat(settings): render qr code in mfa setup flow #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"lucide-react": "^0.563.0",
"next": "16.2.7",
"next-themes": "^0.4.6",
"qrcode.react": "^4.2.0",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-dropzone": "^15.0.0",
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/features/settings/components/mfa-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Loader2, ShieldCheck, ShieldOff, Copy } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
Expand Down Expand Up @@ -123,17 +124,18 @@ export function MfaSection() {

{!enabled && setup && (
<div className="space-y-4">
<div className="space-y-1">
<div className="space-y-3">
<p className="text-sm font-medium">{t('settings.mfa.step1')}</p>
<p className="text-xs text-muted-foreground">
{t('settings.mfa.step1Desc')}
</p>
<code className="block break-all rounded bg-muted px-2 py-1 text-xs">
<div className="flex justify-center rounded-lg border bg-white p-4">
<QRCodeSVG value={setup.otpauthUrl} size={180} />
</div>
<p className="text-xs text-muted-foreground">{t('settings.mfa.manualEntry')}</p>
<code className="block break-all rounded bg-muted px-2 py-1 text-xs select-all">
{setup.secret}
</code>
<code className="block break-all rounded bg-muted px-2 py-1 text-xs">
{setup.otpauthUrl}
</code>
</div>
<Separator />
<div className="space-y-2">
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/shared/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,8 @@
"copyCodes": "Copy codes",
"setup": "Set up two-factor authentication",
"step1": "1. Add this account to your authenticator app",
"step1Desc": "Scan the otpauth URL as a QR code, or enter the secret manually:",
"step1Desc": "Open Microsoft Authenticator (or Google Authenticator) and scan the QR code below:",
"manualEntry": "Can't scan? Enter this secret manually in your app:",
"step2": "2. Enter the 6-digit code to confirm",
"codePlaceholder": "123456",
"enable": "Enable",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/shared/i18n/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,8 @@
"copyCodes": "Copier les codes",
"setup": "Configurer l'authentification à deux facteurs",
"step1": "1. Ajoutez ce compte à votre application d'authentification",
"step1Desc": "Scannez l'URL otpauth sous forme de QR code, ou saisissez le secret manuellement :",
"step1Desc": "Ouvrez Microsoft Authenticator (ou Google Authenticator) et scannez le QR code ci-dessous :",
"manualEntry": "Impossible de scanner ? Saisissez ce secret manuellement dans votre application :",
"step2": "2. Saisissez le code à 6 chiffres pour confirmer",
"codePlaceholder": "123456",
"enable": "Activer",
Expand Down
Loading
Loading