WebAuthn: Link to wp-admin until custom UI is built.

settings/src/components/account-status.js

@@ -19,6 +19,7 @@ export default function AccountStatus() {
 	const { record }        = userRecord;
 	const emailStatus       = record.pending_email ? 'pending' : 'ok';
 	const totpStatus        = record[ '2fa_available_providers' ].includes( 'Two_Factor_Totp' ) ? 'enabled' : 'disabled';
+	const webAuthnStatus    = record[ '2fa_available_providers' ].includes( 'Two_Factor_WebAuthn' ) ? 'enabled' : 'disabled';
 	const backupCodesStatus = record[ '2fa_available_providers' ].includes( 'Two_Factor_Backup_Codes' ) ? 'enabled' : 'disabled';
 
 	return (
@@ -41,6 +42,27 @@ export default function AccountStatus() {
 				}
 			/>
 
+			{/* TODO: Eventually we'll build a custom UI for WebAuthn like we have for the other providers. In
+			  * the meantime we're using the wp-admin UI.
+			  * The back-end provider isn't ready yet, though, so this shouldn't be enabled on production until it
+			  * is.
+			  *
+			  * See https://github.com/WordPress/wporg-two-factor/issues/114
+			  * See https://github.com/WordPress/wporg-two-factor/issues/87
+			  */}
+			{ 'development' === process.env.NODE_ENV &&
+				<SettingStatusCard
+					screen="webauthn"
+					status={ webAuthnStatus }
+					headerText="Two Factor Security Key"
+					bodyText={
+						'enabled' === webAuthnStatus
+						? 'You have two-factor authentication enabled using security keys.'
+						: 'You have not registered any security keys.'
+					}
+				/>
+			}
+
 			<SettingStatusCard
 				screen="totp"
 				status={ totpStatus }

settings/src/components/webauthn.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalContext } from '../script';
+
+/**
+ * Render the WebAuthn setting.
+ */
+export default function WebAuthn() {
+	const { userRecord } = useContext( GlobalContext );
+	const { record } = userRecord;
+
+	// Get the current domain automatically. This is a little hacky, but it's temporary.
+	const adminUrl = apiFetch.nonceEndpoint.replace( 'admin-ajax.php?action=rest-nonce', '' );
+	const enableUrl = adminUrl + 'profile.php#two-factor-options';
+
+	return (
+		<p>
+			The front-end interface for WebAuthn is currently under development. You can <a href={ enableUrl }>enable it in wp-admin</a> for now.
+		</p>
+	);
+}

settings/src/components/webauthn.scss

@@ -0,0 +1,3 @@
+.wporg-2fa__webauthn,
+.bbp-single-user .wporg-2fa__webauthn {
+}

settings/src/script.js

@@ -14,6 +14,7 @@ import AccountStatus from './components/account-status';
 import Password from './components/password';
 import EmailAddress from './components/email-address';
 import TOTP from './components/totp';
+import WebAuthn from './components/webauthn';
 import BackupCodes from './components/backup-codes';
 import GlobalNotice from './components/global-notice';
 
@@ -57,6 +58,11 @@ function Main( { userId } ) {
 		'backup-codes':   BackupCodes,
 	};
 
+	// TODO: Keep this in sync with `AccountStatus`. See the note there for details.
+	if ( 'development' === process.env.NODE_ENV ) {
+		components.webauthn = WebAuthn;
+	}
+
 	let initialScreen = currentUrl.searchParams.get( 'screen' );
 
 	if ( ! components[ initialScreen ] ) {