+
+ Add an extra layer of security to your account with multi-factor
+ authentication (MFA). When enabled, you'll need to provide a
+ verification code from your authenticator app in addition to your
+ password when signing in.
+
- {success && (
- setSuccess('')}>
- {success}
-
- )}
+ {success && (
+ setSuccess('')}>
+ {success}
+
+ )}
- {error && (
- setError('')}>
- {error}
-
- )}
+ {error && (
+ setError('')}>
+ {error}
+
+ )}
-
-
-
-
-
- Two-Factor Authentication
-
-
- {mfaEnabled
- ? 'Your account is protected with 2FA'
- : 'Secure your account with an authenticator app'}
-
+
+
+
+
+
+ Two-Factor Authentication
+
+
+ {mfaEnabled
+ ? 'Your account is protected with 2FA'
+ : 'Secure your account with an authenticator app'}
+
+
+
+
+ {mfaEnabled ? (
+
+ ) : (
+
+ )}
-
- {mfaEnabled ? (
-
- ) : (
-
- )}
-
-
-
- {/*
+
+ {/*
{mfaEnabled && (
@@ -290,87 +289,194 @@ const MFASettings = () => {
)} */}
- {/* Setup MFA Modal */}
-
-
-
- Set up Multi-Factor Authentication
-
+ {/* Setup MFA Modal */}
+
+
+
+ Set up Multi-Factor Authentication
+
- {setupStep === 1 && setupData && (
-
-
- Step 1: Scan the QR code below with your
- authenticator app (Google Authenticator, Authy, etc.)
-
-
-
- {qrCodeDataUrl || setupData.qrCode ? (
- 
- ) : (
-
- QR code could not be generated. Please try again or use the
- manual entry key below.
-
- )}
-
-
-
-
- Manual entry key:
+ {setupStep === 1 && setupData && (
+
+
+ Step 1: Scan the QR code below with your
+ authenticator app (Google Authenticator, Authy, etc.)
-
+ {qrCodeDataUrl || setupData.qrCode ? (
+
+ ) : (
+
+ QR code could not be generated. Please try again or use
+ the manual entry key below.
+
+ )}
+
+
+
- {setupData.secret}
+
+ Manual entry key:
+
+
+ {setupData.secret}
+
+
+
+
+
+ )}
+
+ {setupStep === 2 && (
+
+
+ Step 2: Enter the 6-digit verification code
+ from your authenticator app
+
+
+ {
+ if (e.key === 'Enter' && verificationCode.length === 6) {
+ handleConfirmMFA()
+ }
+ }}
+ onChange={e => setVerificationCode(e.target.value)}
+ sx={{
+ textAlign: 'center',
+ fontSize: '1.2em',
+ letterSpacing: verificationCode.length === 0 ? '' : '0.4em',
+ }}
+ slotProps={{
+ input: {
+ maxLength: 6,
+ pattern: '[0-9]*',
+ },
+ }}
+ />
+
+ {error && {error} }
+
+
+
+
+
+
+ )}
+
+ {setupStep === 3 && (
+
+
+
+ MFA Successfully Enabled!
+
+
+
+
+
+ Save these backup codes in a safe place
+
+
+ You can use these codes to access your account if you lose
+ your authenticator device. Each code can only be used once.
+
+
+
+
+
+ {backupCodes?.map((code, index) => (
+
+ {code}
+
+ ))}
+
+
+
+
+
+ )}
+
+
+
+ {/* Disable MFA Modal */}
+
+
+
+ Disable Multi-Factor Authentication
+
+
+
+
+
+ Disabling MFA will make your account less secure. Are you sure
+ you want to continue?
-
-
- )}
-
- {setupStep === 2 && (
-
- Step 2: Enter the 6-digit verification code
- from your authenticator app
+ Enter a verification code from your authenticator app to
+ confirm:
{
- if (e.key === 'Enter' && verificationCode.length === 6) {
- handleConfirmMFA()
+ if (e.key === 'Enter' && disableCode.length === 6) {
+ handleDisableMFA()
}
}}
- onChange={e => setVerificationCode(e.target.value)}
+ onChange={e => setDisableCode(e.target.value)}
sx={{
textAlign: 'center',
fontSize: '1.2em',
@@ -389,39 +495,40 @@ const MFASettings = () => {
- )}
+
+
+
+ {/* Backup Codes Modal */}
+ setBackupCodesModalOpen(false)}
+ >
+
+
+ New Backup Codes
+
- {setupStep === 3 && (
-
-
- MFA Successfully Enabled!
-
-
-
-
- Save these backup codes in a safe place
-
- You can use these codes to access your account if you lose
- your authenticator device. Each code can only be used once.
+ Your previous backup codes are now invalid. Save these new
+ codes in a safe place. Each code can only be used once.
@@ -439,123 +546,17 @@ const MFASettings = () => {
-
- )}
-
-
-
- {/* Disable MFA Modal */}
-
-
-
- Disable Multi-Factor Authentication
-
-
-
-
-
- Disabling MFA will make your account less secure. Are you sure
- you want to continue?
-
-
-
-
- Enter a verification code from your authenticator app to confirm:
-
-
- {
- if (e.key === 'Enter' && disableCode.length === 6) {
- handleDisableMFA()
- }
- }}
- onChange={e => setDisableCode(e.target.value)}
- sx={{
- textAlign: 'center',
- fontSize: '1.2em',
- letterSpacing: verificationCode.length === 0 ? '' : '0.4em',
- }}
- slotProps={{
- input: {
- maxLength: 6,
- pattern: '[0-9]*',
- },
- }}
- />
-
- {error && {error} }
-
-
-
-
-
-
-
-
-
- {/* Backup Codes Modal */}
- setBackupCodesModalOpen(false)}
- >
-
-
- New Backup Codes
-
-
-
-
-
- Your previous backup codes are now invalid. Save these new codes
- in a safe place. Each code can only be used once.
-
-
-
-
-
- {backupCodes?.map((code, index) => (
-
- {code}
-
- ))}
-
-
-
-
-
-
-
-
+
+
+