chore: mfa feature release (#4861)

* chore: mfa feature release

* chore(console,experience): enable mfa feature

* chore: update changeset

---------

Co-authored-by: Xiao Yijun <xiaoyijun@silverhand.io>
Co-authored-by: Gao Sun <gao@silverhand.io>

.changeset/cuddly-ghosts-mix.md

@@ -0,0 +1,20 @@
+---
+"@logto/core": minor
+"@logto/console": minor
+"@logto/experience": minor
+"@logto/phrases": minor
+"@logto/phrases-experience": minor
+"@logto/schemas": minor
+---
+
+feature: introduce multi-factor authentication
+
+We're excited to announce that Logto now supports multi-factor authentication (MFA) for your sign-in experience. Navigate to the "Multi-factor auth" tab to configure how you want to secure your users' accounts.
+
+In this release, we introduce the following MFA methods:
+
+- Authenticator app OTP: users can add any authenticator app that supports the TOTP standard, such as Google Authenticator, Duo, etc.
+- WebAuthn (Passkey): users can use the standard WebAuthn protocol to register a hardware security key, such as biometric keys, Yubikey, etc.
+- Backup codes：users can generate a set of backup codes to use when they don't have access to other MFA methods.
+
+For a smooth transition, we also support to configure the MFA policy to require MFA for sign-in experience, or to allow users to opt-in to MFA.

packages/console/src/consts/plan-quotas.ts

@@ -1,5 +1,3 @@
-import { conditionalArray } from '@silverhand/essentials';
-
 import {
   type SubscriptionPlanTable,
   type SubscriptionPlanTableData,
@@ -9,7 +7,6 @@ import {
   type SubscriptionPlanQuota,
 } from '@/types/subscriptions';
 
-import { isDevFeaturesEnabled as isDevelopmentFeaturesEnabled } from './env';
 import { ReservedPlanId } from './subscriptions';
 
 type EnabledFeatureMap = Record<string, boolean | undefined>;
@@ -144,7 +141,7 @@ export const planTableGroupKeyMap: SubscriptionPlanTableGroupKeyMap = Object.fre
     'i18nEnabled',
   ],
   [SubscriptionPlanTableGroupKey.userAuthentication]: [
-    ...conditionalArray(isDevelopmentFeaturesEnabled && 'mfaEnabled'),
+    'mfaEnabled',
     'omniSignInEnabled',
     'passwordSignInEnabled',
     'passwordlessSignInEnabled',

packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx

@@ -84,7 +84,6 @@ export const useSidebarMenuItems = (): {
         {
           Icon: SecurityLock,
           title: 'mfa',
-          isHidden: !isDevFeaturesEnabled,
         },
         {
           Icon: Connection,

packages/console/src/containers/ConsoleContent/index.tsx

@@ -107,7 +107,7 @@ function ConsoleContent() {
               <Route index element={<Navigate replace to={SignInExperienceTab.Branding} />} />
               <Route path=":tab" element={<SignInExperience />} />
             </Route>
-            {isDevFeaturesEnabled && <Route path="mfa" element={<Mfa />} />}
+            <Route path="mfa" element={<Mfa />} />
             <Route path="connectors">
               <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
               <Route path=":tab" element={<Connectors />} />

packages/console/src/pages/SignInExperience/utils/constants.ts

@@ -2,22 +2,7 @@ import {
   type LocalePhraseGroupKey,
   type LocalePhraseKey,
 } from '@logto/phrases-experience/lib/types';
-import { conditionalArray } from '@silverhand/essentials';
 
-import { isDevFeaturesEnabled } from '@/consts/env';
+export const hiddenLocalePhraseGroups: readonly LocalePhraseGroupKey[] = [];
 
-export const hiddenLocalePhraseGroups: readonly LocalePhraseGroupKey[] = conditionalArray(
-  !isDevFeaturesEnabled && 'mfa'
-);
-
-export const hiddenLocalePhrases: readonly LocalePhraseKey[] = [
-  ...conditionalArray(
-    !isDevFeaturesEnabled &&
-      ([
-        'action.copy',
-        'action.verify_via_passkey',
-        'action.download',
-        'input.backup_code',
-      ] satisfies LocalePhraseKey[])
-  ),
-];
+export const hiddenLocalePhrases: readonly LocalePhraseKey[] = [];

packages/console/src/pages/UserDetails/UserSettings/index.tsx

@@ -10,7 +10,6 @@ import { useOutletContext } from 'react-router-dom';
 import DetailsForm from '@/components/DetailsForm';
 import FormCard from '@/components/FormCard';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import CodeEditor from '@/ds-components/CodeEditor';
 import FormField from '@/ds-components/FormField';
 import TextInput from '@/ds-components/TextInput';
@@ -162,11 +161,9 @@ function UserSettings() {
               }}
             />
           </FormField>
-          {isDevFeaturesEnabled && (
-            <FormField title="user_details.mfa.field_name">
-              <UserMfaVerifications userId={user.id} />
-            </FormField>
-          )}
+          <FormField title="user_details.mfa.field_name">
+            <UserMfaVerifications userId={user.id} />
+          </FormField>
           <FormField
             isRequired
             title="user_details.field_custom_data"

packages/core/src/libraries/sign-in-experience/mfa.ts

@@ -1,14 +1,8 @@
 import { MfaFactor, type Mfa } from '@logto/schemas';
 
-import { EnvSet } from '#src/env-set/index.js';
 import assertThat from '#src/utils/assert-that.js';
 
 export const validateMfa = (mfa: Mfa) => {
-  // TODO @sijie: remove this check when MFA is ready for production.
-  if (!EnvSet.values.isDevFeaturesEnabled) {
-    throw new Error('MFA is not ready for production yet.');
-  }
-
   assertThat(
     new Set(mfa.factors).size === mfa.factors.length,
     'sign_in_experiences.duplicated_mfa_factors'

packages/experience/src/App.tsx

@@ -82,25 +82,21 @@ const App = () => {
                     {/* Passwordless verification code */}
                     <Route path=":flow/verification-code" element={<VerificationCode />} />
 
-                    {isDevelopmentFeaturesEnabled && (
-                      <>
-                        {/* Mfa binding */}
-                        <Route path={UserMfaFlow.MfaBinding}>
-                          <Route index element={<MfaBinding />} />
-                          <Route path={MfaFactor.TOTP} element={<TotpBinding />} />
-                          <Route path={MfaFactor.WebAuthn} element={<WebAuthnBinding />} />
-                          <Route path={MfaFactor.BackupCode} element={<BackupCodeBinding />} />
-                        </Route>
+                    {/* Mfa binding */}
+                    <Route path={UserMfaFlow.MfaBinding}>
+                      <Route index element={<MfaBinding />} />
+                      <Route path={MfaFactor.TOTP} element={<TotpBinding />} />
+                      <Route path={MfaFactor.WebAuthn} element={<WebAuthnBinding />} />
+                      <Route path={MfaFactor.BackupCode} element={<BackupCodeBinding />} />
+                    </Route>
 
-                        {/* Mfa verification */}
-                        <Route path={UserMfaFlow.MfaVerification}>
-                          <Route index element={<MfaVerification />} />
-                          <Route path={MfaFactor.TOTP} element={<TotpVerification />} />
-                          <Route path={MfaFactor.WebAuthn} element={<WebAuthnVerification />} />
-                          <Route path={MfaFactor.BackupCode} element={<BackupCodeVerification />} />
-                        </Route>
-                      </>
-                    )}
+                    {/* Mfa verification */}
+                    <Route path={UserMfaFlow.MfaVerification}>
+                      <Route index element={<MfaVerification />} />
+                      <Route path={MfaFactor.TOTP} element={<TotpVerification />} />
+                      <Route path={MfaFactor.WebAuthn} element={<WebAuthnVerification />} />
+                      <Route path={MfaFactor.BackupCode} element={<BackupCodeVerification />} />
+                    </Route>
 
                     {/* Continue set up missing profile */}
                     <Route path="continue">

packages/experience/src/hooks/use-pre-sign-in-error-handler.ts

@@ -1,8 +1,5 @@
-import { conditional } from '@silverhand/essentials';
 import { useMemo } from 'react';
 
-import { isDevFeaturesEnabled } from '@/constants/env';
-
 import { type ErrorHandlers } from './use-error-handler';
 import useMfaErrorHandler, {
   type Options as UseMfaVerificationErrorHandlerOptions,
@@ -20,7 +17,7 @@ const usePreSignInErrorHandler = ({ replace, linkSocial }: Options = {}): ErrorH
   return useMemo(
     () => ({
       ...requiredProfileErrorHandler,
-      ...conditional(isDevFeaturesEnabled && mfaErrorHandler),
+      ...mfaErrorHandler,
     }),
     [mfaErrorHandler, requiredProfileErrorHandler]
   );