feat: initial implementation for totp authenticator

2026-10-14 17:40:44 +00:00 · 2024-11-14 00:07:35 +08:00
parent 2d2ad0724f
commit 6bdbac4750
36 changed files with 1250 additions and 117 deletions
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+
+import { useGetUserTotpRegistration } from "@app/hooks/api";
+import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";
+
+import { createNotification } from "../notifications";
+import { Button, ContentLoader, Input } from "../v2";
+
+type Props = {
+  onComplete?: () => Promise<void>;
+};
+
+const TotpRegistration = ({ onComplete }: Props) => {
+  const { data: registration, isLoading } = useGetUserTotpRegistration();
+  const { mutateAsync: verifyUserTotp } = useVerifyUserTotpRegistration();
+  const [qrCodeUrl, setQrCodeUrl] = useState("");
+  const [totp, setTotp] = useState("");
+
+  const handleTotpVerify = async () => {
+    await verifyUserTotp({
+      totp
+    });
+
+    createNotification({
+      text: "Successfully configured mobile authenticator",
+      type: "success"
+    });
+
+    if (onComplete) {
+      onComplete();
+    }
+  };
+
+  useEffect(() => {
+    const generateQRCode = async () => {
+      if (registration?.otpUrl) {
+        const url = await QRCode.toDataURL(registration.otpUrl);
+        setQrCodeUrl(url);
+      }
+    };
+
+    generateQRCode();
+  }, [registration]);
+
+  if (isLoading) {
+    return <ContentLoader />;
+  }
+  return (
+    <div className="flex max-w-sm flex-col text-bunker-200">
+      <div className="mb-4 text-center">
+        Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR code.
+      </div>
+      <div className="mb-10 flex items-center justify-center">
+        <img src={qrCodeUrl} alt="registration-qr" />
+      </div>
+      <div className="mb-4 text-center">Enter the resulting verification code</div>
+      <div className="mb-4 flex flex-row gap-2">
+        <Input
+          onChange={(e) => setTotp(e.target.value)}
+          value={totp}
+          placeholder="Verification code"
+        />
+        <Button onClick={handleTotpVerify}>Enable MFA</Button>
+      </div>
+    </div>
+  );
+};
+
+export default TotpRegistration;