Turn of 2fa platform

cortip · Feb 23, 2024 · 0585541 · 0585541
1 parent e63dbbe
commit 0585541
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 8 deletions.
diff --git a/apps/platform/src/hooks/use2FA.ts b/apps/platform/src/hooks/use2FA.ts
@@ -6,7 +6,8 @@ import {
   turnOn2FAStep2Service,
   auth2FAService,
   authDisableService,
-  Recover2FAData
+  Recover2FAData,
+  turnOff2FA2Service
 } from '@isomera/impl'
 import useSession from './useSession'
 
@@ -41,16 +42,24 @@ const useTwoFactorAuthHook = () => {
     }
   )
 
+  const { mutateAsync: turnOff2FA, isLoading: isLoadingTurnOf2FA } =
+    useMutation(async (data: Pure<Verify2FAData>) => {
+      const response = await turnOff2FA2Service(data)
+      return response
+    })
+
   return {
     generate2FA,
     verify2FA,
     authenticate,
     disable2FA,
+    turnOff2FA,
     isLoading:
       isLoadingGenerate ||
       isLoadingVerify ||
       isLoadingAuthenticate ||
-      isLoadingDisable
+      isLoadingDisable ||
+      isLoadingTurnOf2FA
   }
 }
 

diff --git a/apps/platform/src/views/user /profile-security.view.tsx b/apps/platform/src/views/user /profile-security.view.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import useSession from '../../hooks/useSession'
 import { useTwoFactorAuthHook } from '../../hooks/use2FA'
+import { setAuthState } from '@isomera/impl'
+import { UserInterface } from '@isomera/interfaces'
 
 export const UserSecurityView: React.FC = () => {
-  const { generate2FA, verify2FA, isLoading } = useTwoFactorAuthHook()
+  const { generate2FA, verify2FA, turnOff2FA, isLoading } = useTwoFactorAuthHook()
   const [qrCodeImage, setQrCodeImage] = useState<string | null>(null)
   const [code, setCode] = useState('')
   const [verificationError, setVerificationError] = useState<string | null>(
@@ -14,7 +16,8 @@ export const UserSecurityView: React.FC = () => {
     recoveryCodes,
     updateRecoveryCodes,
     recoveryViewed,
-    updateRecoveryViewed
+    updateRecoveryViewed,
+    setUser
   } = useSession()
 
   const [showRecoveryCodes, setShowRecoveryCodes] = useState(false)
@@ -58,8 +61,8 @@ export const UserSecurityView: React.FC = () => {
   const handle2FAToggleChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
+    setIsTwoFAEnabled(event.target.checked)
     if (!isTwoFAEnabled) {
-      setIsTwoFAEnabled(event.target.checked)
       handleToggle2FA()
     }
   }
@@ -82,6 +85,28 @@ export const UserSecurityView: React.FC = () => {
     }
   }
 
+  const handleTurnoff2FA = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      const codeNoSpace = code.split(' ').join('')
+      const {status, access_token, refresh_token} = await turnOff2FA({ code: codeNoSpace })
+      if (status === 'ok') {
+        setCode('')
+        setAuthState({accessToken: access_token, refreshToken: refresh_token})
+        const newUser = {...user}
+        newUser.isTwoFAEnabled = false
+        newUser.accessToken = access_token
+        newUser.refreshToken = refresh_token
+        setUser(newUser as UserInterface)
+      } else {
+        setVerificationError('Failed to verify 2FA code.')
+      }
+    } catch (error) {
+      console.error('Error verifying 2FA code:', error)
+      setVerificationError('An error occurred while verifying the 2FA code.')
+    }
+  }
+
   useEffect(() => {
     if (user) {
       setIsTwoFAEnabled(user.isTwoFAEnabled)
@@ -97,11 +122,33 @@ export const UserSecurityView: React.FC = () => {
             type="checkbox"
             checked={isTwoFAEnabled}
             onChange={handle2FAToggleChange}
-            disabled={isLoading || isTwoFAEnabled}
+            disabled={isLoading}
           />
           {isTwoFAEnabled ? '2FA Enabled' : 'Enable 2FA'}
         </label>
       )}
+      {
+        user?.isTwoFAEnabled && !isTwoFAEnabled && (
+          <form onSubmit={handleTurnoff2FA}>
+            <div>
+              <label>
+                Enter the code from your authenticator app:
+                {''}
+                <input
+                  type="text"
+                  value={code}
+                  onChange={e => setCode(e.target.value)}
+                  required
+                />
+              </label>
+            </div>
+            <button type="submit">Verify Code</button>
+            {verificationError && (
+              <p style={{ color: 'red' }}>{verificationError}</p>
+            )}
+          </form>
+        )
+      }
       {qrCodeImage && (
         <>
           <p>

diff --git a/libs/impl/src/constants/apiRoutes.ts b/libs/impl/src/constants/apiRoutes.ts
@@ -24,6 +24,7 @@ export const API_AUTH_2FA_STEP_2 = 'auth/2fa/turn-on'
 export const API_AUTH_2FA_STEP_3 = 'auth/2fa/authenticate'
 export const API_AUTH_2FA_RECOVER = 'auth/2fa/request-recovery'
 export const API_AUTH_2FA_CONFIRM_RECOVERY = 'auth/2fa/confirm-recovery'
+export const API_AUTH_2FA_TURN_OFF = 'auth/2fa/turn-off'
 
 // User
 

diff --git a/libs/impl/src/services/auth/twoFactor.service.ts b/libs/impl/src/services/auth/twoFactor.service.ts
@@ -1,10 +1,11 @@
-import { UserInterface } from '@isomera/interfaces'
+import { TurnOff2FAResponseInterface, UserInterface } from '@isomera/interfaces'
 import {
   API_AUTH_2FA_CONFIRM_RECOVERY,
   API_AUTH_2FA_RECOVER,
   API_AUTH_2FA_STEP_1,
   API_AUTH_2FA_STEP_2,
-  API_AUTH_2FA_STEP_3
+  API_AUTH_2FA_STEP_3,
+  API_AUTH_2FA_TURN_OFF
 } from '../../constants'
 import { axiosInstance } from '../../utils'
 
@@ -74,3 +75,11 @@ export const authDisableService = async (
 
   return response.data
 }
+
+export const turnOff2FA2Service = async (
+  data: Verify2FAData
+): Promise<TurnOff2FAResponseInterface> => {
+  const response = await axiosInstance.post(API_AUTH_2FA_TURN_OFF, data)
+
+  return response.data
+}