Mfa

apps/dashboard/src/actions/mfa-verify-action.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import { createClient } from "@midday/supabase/server";
+import { revalidatePath } from "next/cache";
+import { action } from "./safe-action";
+import { mfaVerifySchema } from "./schema";
+
+export const mfaVerifyAction = action(
+  mfaVerifySchema,
+  async ({ factorId, challengeId, code }) => {
+    const supabase = createClient();
+
+    const { data } = await supabase.auth.mfa.verify({
+      factorId,
+      challengeId,
+      code,
+    });
+
+    revalidatePath("/settings/security");
+
+    return data;
+  }
+);

apps/dashboard/src/actions/schema.ts

@@ -85,7 +85,13 @@ export const createFolderSchema = z.object({
 });
 
 export const unenrollMfaSchema = z.object({
-  factoryId: z.string(),
+  factorId: z.string(),
+});
+
+export const mfaVerifySchema = z.object({
+  factorId: z.string(),
+  challengeId: z.string(),
+  code: z.string(),
 });
 
 export const shareFileSchema = z.object({

apps/dashboard/src/actions/unenroll-mfa-action.ts

@@ -7,11 +7,11 @@ import { unenrollMfaSchema } from "./schema";
 
 export const unenrollMfaAction = action(
   unenrollMfaSchema,
-  async ({ factoryId }) => {
+  async ({ factorId }) => {
     const supabase = createClient();
 
     const { data, error } = await supabase.auth.mfa.unenroll({
-      factoryId,
+      factorId,
     });
 
     if (error) {

apps/dashboard/src/components/enroll-mfa.tsx

@@ -1,6 +1,6 @@
 import { createClient } from "@midday/supabase/client";
+import { Button } from "@midday/ui/button";
 import Image from "next/image";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import PinField from "react-pin-field";
@@ -48,6 +48,14 @@ export function EnrollMFA() {
     enroll();
   }, []);
 
+  const handleOnCancel = () => {
+    supabase.auth.mfa.unenroll({
+      factorId,
+    });
+
+    router.push("/onboarding");
+  };
+
   return (
     <>
       <div className="flex items-center justify-center">
@@ -75,9 +83,13 @@ export function EnrollMFA() {
       </div>
 
       <div className="flex border-t-[1px] pt-4 mt-6 justify-center mb-6">
-        <Link href="/onboarding" className="text-medium text-sm">
+        <Button
+          onClick={handleOnCancel}
+          variant="ghost"
+          className="text-medium text-sm hover:bg-transparent"
+        >
           Cancel
-        </Link>
+        </Button>
       </div>
     </>
   );

apps/dashboard/src/components/mfa-list.tsx

@@ -36,7 +36,7 @@ export async function MFAList() {
             </p>
           </div>
 
-          <RemoveMFAButton factoryId={factor.id} />
+          <RemoveMFAButton factorId={factor.id} />
         </div>
       );
     });

apps/dashboard/src/components/modals/add-new-device.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { mfaVerifyAction } from "@/actions/mfa-verify-action";
 import { createClient } from "@midday/supabase/client";
 import { Button } from "@midday/ui/button";
 import { Dialog, DialogContent } from "@midday/ui/dialog";
 import { cn } from "@midday/ui/utils";
+import { useAction } from "next-safe-action/hook";
 import Image from "next/image";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -20,25 +22,21 @@ export function AddNewDeviceModal() {
   const [qr, setQR] = useState("");
   const isOpen = searchParams.get("add") === "device";
 
+  const verify = useAction(mfaVerifyAction, {
+    onSuccess: () => router.push(pathname),
+  });
+
   const onComplete = async (code: string) => {
     if (!isValidating) {
       setValidating(true);
 
       const challenge = await supabase.auth.mfa.challenge({ factorId });
 
-      try {
-        const verify = await supabase.auth.mfa.verify({
-          factorId,
-          challengeId: challenge.data.id,
-          code,
-        });
-
-        if (verify.data) {
-          router.push(pathname);
-        }
-      } catch {
-        setError(true);
-      }
+      verify.execute({
+        factorId,
+        challengeId: challenge.data.id,
+        code,
+      });
     }
   };
 
@@ -65,9 +63,22 @@ export function AddNewDeviceModal() {
     }
   }, [isOpen]);
 
+  const handleOnClose = () => {
+    router.push(pathname);
+
+    supabase.auth.mfa.unenroll({
+      factorId,
+    });
+  };
+
   return (
-    <Dialog open={isOpen} onOpenChange={() => router.push(pathname)}>
-      <DialogContent className="max-w-[455px]">
+    <Dialog open={isOpen} onOpenChange={handleOnClose}>
+      <DialogContent
+        className="max-w-[455px]"
+        onInteractOutside={(evt) => {
+          evt.preventDefault();
+        }}
+      >
         <div className="p-6">
           <div className="flex items-center justify-center mt-8">
             <div className="w-[190px] h-[190px] bg-white rounded-md">
@@ -96,7 +107,7 @@ export function AddNewDeviceModal() {
 
           <div className="flex border-t-[1px] pt-4 mt-4 justify-center">
             <Button
-              onClick={() => router.push(pathname)}
+              onClick={handleOnClose}
               variant="ghost"
               className="text-medium text-sm hover:bg-transparent"
             >

apps/dashboard/src/components/remove-mfa-button.tsx

@@ -6,10 +6,10 @@ import { useToast } from "@midday/ui/use-toast";
 import { useAction } from "next-safe-action/hook";
 
 type Props = {
-  factoryId: string;
+  factorId: string;
 };
 
-export function RemoveMFAButton({ factoryId }: Props) {
+export function RemoveMFAButton({ factorId }: Props) {
   const { toast } = useToast();
 
   const unenroll = useAction(unenrollMfaAction, {
@@ -23,7 +23,7 @@ export function RemoveMFAButton({ factoryId }: Props) {
   });
 
   return (
-    <Button variant="outline" onClick={() => unenroll.execute({ factoryId })}>
+    <Button variant="outline" onClick={() => unenroll.execute({ factorId })}>
       Remove
     </Button>
   );