Only show the reauth modal if a primary 2FA provider is enabled

settings/src/components/account-status.js

@@ -16,25 +16,27 @@ import ScreenLink from './screen-link';
  */
 export default function AccountStatus() {
 	const { userRecord } = useContext( GlobalContext );
-	const { record } = userRecord;
-	const emailStatus = record.pending_email ? 'pending' : 'ok';
-	const totpEnabled = record[ '2fa_available_providers' ].includes( 'Two_Factor_Totp' );
-	const webAuthnEnabled = record[ '2fa_available_providers' ].includes(
-		'TwoFactor_Provider_WebAuthn'
-	);
-	const primaryProviderEnabled = totpEnabled || webAuthnEnabled;
-	const backupCodesEnabled =
-		record[ '2fa_available_providers' ].includes( 'Two_Factor_Backup_Codes' );
+	const {
+		record: {
+			'2fa_available_providers': availableProviders,
+			email,
+			pending_email: pendingEmail,
+		},
+		hasPrimaryProvider,
+	} = userRecord;
+	const emailStatus = pendingEmail ? 'pending' : 'ok';
+	const totpEnabled = availableProviders.includes( 'Two_Factor_Totp' );
+	const backupCodesEnabled = availableProviders.includes( 'Two_Factor_Backup_Codes' );
 
 	const backupBodyText =
-		! backupCodesEnabled && ! primaryProviderEnabled
+		! backupCodesEnabled && ! hasPrimaryProvider
 			? 'Please enable Two-Factor Authentication before enabling backup codes.'
 			: `You have
 				${ backupCodesEnabled ? '' : 'not' }
 				verified your backup codes for two-factor authentication.`;
 
 	return (
-		<>
+		<div className={ 'wporg-2fa__account-status' }>
 			<SettingStatusCard
 				screen="password"
 				status="enabled"
@@ -47,9 +49,9 @@ export default function AccountStatus() {
 				status={ emailStatus }
 				headerText="Account Email"
 				bodyText={
-					record.pending_email
-						? `Your account email is pending a change to ${ record.pending_email }.`
-						: `Your account email address is ${ record.email }.`
+					pendingEmail
+						? `Your account email is pending a change to ${ pendingEmail }.`
+						: `Your account email address is ${ email }.`
 				}
 			/>
 
@@ -72,7 +74,7 @@ export default function AccountStatus() {
 				bodyText={ backupBodyText }
 				disabled={ ! backupCodesEnabled }
 			/>
-		</>
+		</div>
 	);
 }
 

settings/src/components/tests/utlitites.test.js

@@ -55,6 +55,65 @@ describe( 'useGetUserRecord', () => {
 
 		expect( result.record.password ).toBe( 'test-password' );
 	} );
+
+	it( 'should set hasPrimaryProvider to false if userRecord.record is undefined', () => {
+		useEntityRecord.mockReturnValue( {} );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers is undefined', () => {
+		useEntityRecord.mockReturnValue( { record: {} } );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers is empty', () => {
+		useEntityRecord.mockReturnValue( { record: { '2fa_available_providers': [] } } );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers only has Two_Factor_Backup_Codes', () => {
+		useEntityRecord.mockReturnValue( {
+			record: { '2fa_available_providers': [ 'Two_Factor_Backup_Codes' ] },
+		} );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to true if 2fa_available_providers has Two_Factor_Totp', () => {
+		useEntityRecord.mockReturnValue( {
+			record: { '2fa_available_providers': [ 'Two_Factor_Totp', 'Two_Factor_Backup_Codes' ] },
+		} );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( true );
+	} );
+
+	it( 'should set hasPrimaryProvider to true if 2fa_available_providers has TwoFactor_Provider_WebAuthn', () => {
+		useEntityRecord.mockReturnValue( {
+			record: {
+				'2fa_available_providers': [
+					'TwoFactor_Provider_WebAuthn',
+					'Two_Factor_Backup_Codes',
+				],
+			},
+		} );
+
+		const result = useGetUserRecord( 1 );
+
+		expect( result.hasPrimaryProvider ).toBe( true );
+	} );
 } );
 
 describe( 'refreshRecord', () => {

settings/src/script.js

@@ -55,7 +55,7 @@ function renderSettings() {
  */
 function Main( { userId } ) {
 	const userRecord = useGetUserRecord( userId );
-	const { record, edit, hasEdits, hasResolved } = userRecord;
+	const { record, edit, hasEdits, hasPrimaryProvider, hasResolved } = userRecord;
 	const [ globalNotice, setGlobalNotice ] = useState( '' );
 	let currentUrl = new URL( document.location.href );
 
@@ -156,22 +156,15 @@ function Main( { userId } ) {
 	);
 
 	if ( 'account-status' === screen ) {
-		screenContent = (
-			<div className={ 'wporg-2fa__account-status' }>
-				<AccountStatus />
-			</div>
-		);
+		screenContent = <AccountStatus />;
 	} else if (
 		twoFactorRequiredScreens.includes( screen ) &&
-		userRecord.record[ '2fa_available_providers' ] &&
-		userRecord.record[ '2fa_revalidation' ] &&
-		userRecord.record[ '2fa_revalidation' ].expires_at <= new Date().getTime() / 1000
+		hasPrimaryProvider &&
+		record[ '2fa_revalidation' ]?.expires_at <= new Date().getTime() / 1000
 	) {
 		screenContent = (
 			<>
-				<div className={ 'wporg-2fa__account-status' }>
-					<AccountStatus />
-				</div>
+				<AccountStatus />
 				<RevalidateModal />
 			</>
 		);

settings/src/utilities.js

@@ -18,6 +18,12 @@ export function useGetUserRecord( userId ) {
 		userRecord.record.password = '';
 	}
 
+	const availableProviders = userRecord.record?.[ '2fa_available_providers' ] ?? [];
+	const primaryProviders = [ 'Two_Factor_Totp', 'TwoFactor_Provider_WebAuthn' ];
+	userRecord.hasPrimaryProvider = !! availableProviders.filter( ( provider ) =>
+		primaryProviders.includes( provider )
+	).length;
+
 	return userRecord;
 }