From 9a6543e0a7a023747ac01095959b4c88ba885d88 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Thu, 13 Feb 2025 08:56:11 +0700
Subject: [PATCH] MFA fixes (#163)

1. Add a background to the QR code to improve scanning
2. Re-fetch MFA factor list after mutation
---
 apps/web/app/home/(user)/layout.tsx                   |  2 --
 .../mfa/multi-factor-auth-setup-dialog.tsx            | 11 +++++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/home/(user)/layout.tsx b/apps/web/app/home/(user)/layout.tsx
index 814a997d5..2360eccd9 100644
--- a/apps/web/app/home/(user)/layout.tsx
+++ b/apps/web/app/home/(user)/layout.tsx
@@ -32,8 +32,6 @@ function SidebarLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
   const state = use(getLayoutState());
 
-  console.log('state', state);
-
   return (
     <UserWorkspaceContextProvider value={workspace}>
       <SidebarProvider defaultOpen={state.open}>
diff --git a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
index f1bb32b5f..254ca776a 100644
--- a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
@@ -413,7 +413,7 @@ function FactorNameForm(
 
 function QrImage({ src }: { src: string }) {
   // eslint-disable-next-line @next/next/no-img-element
-  return <img alt={'QR Code'} src={src} width={160} height={160} />;
+  return <img alt={'QR Code'} src={src} width={160} height={160} className={'p-2 bg-white'} />;
 }
 
 function useEnrollFactor(userId: string) {
@@ -454,6 +454,7 @@ function useEnrollFactor(userId: string) {
 function useVerifyCodeMutation(userId: string) {
   const mutationKey = useFactorsMutationKey(userId);
   const client = useSupabase();
+  const queryClient = useQueryClient();
 
   const mutationFn = async (params: { factorId: string; code: string }) => {
     const challenge = await client.auth.mfa.challenge({
@@ -479,7 +480,13 @@ function useVerifyCodeMutation(userId: string) {
     return verify;
   };
 
-  return useMutation({ mutationKey, mutationFn });
+  return useMutation({
+    mutationKey,
+    mutationFn,
+    onSuccess: () => {
+      return queryClient.refetchQueries({ queryKey: mutationKey });
+    },
+  });
 }
 
 function ErrorAlert() {