Implement QR code for MFA setup

Author: codedmonkey

assets/stylesheets/dashboard-theme.css

@@ -69,3 +69,11 @@
   display: inline-block;
   width: 120px;
 }
+
+body.ea-dark-scheme img.img-light {
+  display: none;
+}
+
+body:not(.ea-dark-scheme) img.img-dark {
+  display: none;
+}

src/Controller/Dashboard/DashboardAccountController.php

@@ -8,6 +8,8 @@
 use CodedMonkey\Dirigent\Form\ChangePasswordFormType;
 use CodedMonkey\Dirigent\Form\MfaClearFormType;
 use CodedMonkey\Dirigent\Form\MfaSetupFormType;
+use Endroid\QrCode\Builder\Builder as QrCodeBuilder;
+use Endroid\QrCode\Color\Color;
 use Scheb\TwoFactorBundle\Security\TwoFactor\Provider\Totp\TotpAuthenticatorInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\FormError;
@@ -134,6 +136,29 @@ public function mfa(Request $request, #[CurrentUser] User $user): Response
         ]);
     }
 
+    #[Route('/account/mfa/qr-code', name: 'dashboard_account_mfa_qr_code', methods: ['GET'])]
+    #[IsGranted('ROLE_USER')]
+    public function mfaQrCode(Request $request, #[CurrentUser] User $user): Response
+    {
+        $session = $request->getSession();
+
+        if (null === $totpSecret = $session->get('totp_secret')) {
+            throw $this->createNotFoundException();
+        }
+
+        $darkMode = 'dark' === $request->query->getString('mode', 'light');
+
+        $user->setTotpSecret($totpSecret);
+
+        $builder = new QrCodeBuilder(data: $this->totpAuthenticator->getQRContent($user));
+        $result = $builder->build(
+            foregroundColor: $darkMode ? new Color(212, 212, 212) : null,
+            backgroundColor: $darkMode ? new Color(17, 21, 23) : null,
+        );
+
+        return new Response($result->getString(), 200, ['Content-Type' => 'image/png']);
+    }
+
     private function validatePassword(FormInterface $passwordField, User $user): void
     {
         $currentPassword = $passwordField->getData();

templates/dashboard/account/mfa_setup.html.twig

@@ -5,6 +5,10 @@
 {% block page_content %}
   <div class="row">
     <div class="col-md-6 col-xxl-5">
+      <div class="mb-3">
+        <img src="{{ path('dashboard_account_mfa_qr_code', {mode: 'dark'}) }}" alt="{{ 'account.mfa.qr-code-alt'|trans }}" class="img-dark">
+        <img src="{{ path('dashboard_account_mfa_qr_code') }}" alt="{{ 'account.mfa.qr-code-alt'|trans }}" class="img-light">
+      </div>
       <div class="mb-3">
         <label for="totp_secret" class="form-label">{{ 'MFA secret' }}</label>
         <input id="totp_secret" type="text" value="{{ totpContent }}" readonly class="form-control">

translations/messages.en.yaml

@@ -118,5 +118,6 @@ account:
     disable: Disable MFA authentication
     enable: Enable MFA authentication
     help: Secure your account with a time-based code from an authenticator app.
+    qr-code-alt: QR-code containing the MFA secret.
     state-disabled: Multi-Factor Authentication is currently disabled.
     state-enabled: Multi-Factor Authentication is currently enabled.