From 6727f629de1528ad4e975b37a928d2426f8c28f2 Mon Sep 17 00:00:00 2001 From: wangsijie Date: Tue, 14 Nov 2023 12:02:49 +0800 Subject: [PATCH] chore: mfa feature release (#4861) * chore: mfa feature release * chore(console,experience): enable mfa feature * chore: update changeset --------- Co-authored-by: Xiao Yijun Co-authored-by: Gao Sun --- .changeset/cuddly-ghosts-mix.md | 20 ++++++++++++ packages/console/src/consts/plan-quotas.ts | 5 +-- .../ConsoleContent/Sidebar/hook.tsx | 1 - .../src/containers/ConsoleContent/index.tsx | 2 +- .../pages/SignInExperience/utils/constants.ts | 19 ++--------- .../pages/UserDetails/UserSettings/index.tsx | 9 ++---- .../src/libraries/sign-in-experience/mfa.ts | 6 ---- packages/experience/src/App.tsx | 32 ++++++++----------- .../hooks/use-pre-sign-in-error-handler.ts | 5 +-- 9 files changed, 42 insertions(+), 57 deletions(-) create mode 100644 .changeset/cuddly-ghosts-mix.md diff --git a/.changeset/cuddly-ghosts-mix.md b/.changeset/cuddly-ghosts-mix.md new file mode 100644 index 000000000..8a807736c --- /dev/null +++ b/.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. diff --git a/packages/console/src/consts/plan-quotas.ts b/packages/console/src/consts/plan-quotas.ts index c6c9cac93..24fca7498 100644 --- a/packages/console/src/consts/plan-quotas.ts +++ b/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; @@ -144,7 +141,7 @@ export const planTableGroupKeyMap: SubscriptionPlanTableGroupKeyMap = Object.fre 'i18nEnabled', ], [SubscriptionPlanTableGroupKey.userAuthentication]: [ - ...conditionalArray(isDevelopmentFeaturesEnabled && 'mfaEnabled'), + 'mfaEnabled', 'omniSignInEnabled', 'passwordSignInEnabled', 'passwordlessSignInEnabled', diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx index cb85e1b9b..d0185701e 100644 --- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx +++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx @@ -84,7 +84,6 @@ export const useSidebarMenuItems = (): { { Icon: SecurityLock, title: 'mfa', - isHidden: !isDevFeaturesEnabled, }, { Icon: Connection, diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index a51755c6c..a94cedc8c 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -107,7 +107,7 @@ function ConsoleContent() { } /> } /> - {isDevFeaturesEnabled && } />} + } /> } /> } /> diff --git a/packages/console/src/pages/SignInExperience/utils/constants.ts b/packages/console/src/pages/SignInExperience/utils/constants.ts index a86a3017e..1dc496904 100644 --- a/packages/console/src/pages/SignInExperience/utils/constants.ts +++ b/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[] = []; diff --git a/packages/console/src/pages/UserDetails/UserSettings/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/index.tsx index 8077db5d6..a1f88c00f 100644 --- a/packages/console/src/pages/UserDetails/UserSettings/index.tsx +++ b/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() { }} /> - {isDevFeaturesEnabled && ( - - - - )} + + + { - // 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' diff --git a/packages/experience/src/App.tsx b/packages/experience/src/App.tsx index d1f06201f..caab10a84 100644 --- a/packages/experience/src/App.tsx +++ b/packages/experience/src/App.tsx @@ -82,25 +82,21 @@ const App = () => { {/* Passwordless verification code */} } /> - {isDevelopmentFeaturesEnabled && ( - <> - {/* Mfa binding */} - - } /> - } /> - } /> - } /> - + {/* Mfa binding */} + + } /> + } /> + } /> + } /> + - {/* Mfa verification */} - - } /> - } /> - } /> - } /> - - - )} + {/* Mfa verification */} + + } /> + } /> + } /> + } /> + {/* Continue set up missing profile */} diff --git a/packages/experience/src/hooks/use-pre-sign-in-error-handler.ts b/packages/experience/src/hooks/use-pre-sign-in-error-handler.ts index 94193654e..6795170b7 100644 --- a/packages/experience/src/hooks/use-pre-sign-in-error-handler.ts +++ b/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] );