refactor(experience): refactor the verification code flow (migration-…

…2) (#6408)

* refactor(experience): refactor the verificaiton code flow

refactor the verification code flow

* refactor(experience): migrate the social and sso flow (migration-3) (#6406)

* refactor(experience): migrate the social and sso flow

migrate the social and sso flow

* refactor(experience): migrate profile fulfillment flow  (migration-4) (#6414)

* refactor(experience): migrate profile fulfillment flow

migrate the profile fulfillment flow

* refactor(experience): remove unused hook

remove unused hook

* fix(experience): fix password policy checker

fix password policy checker error display

* fix(experience): fix the api name

fix the api name

* refactor(experience): migrate mfa flow (migration-5) (#6417)

* refactor(experience): migrate mfa binding flow

migrate mfa binding flow

* test(experience): update unit tests (migration-6) (#6420)

* test(experience): update unit tests

update unit tests

* chore(experience): remove legacy APIs

remove legacy APIs

* refactor(experience): revert api prefix

revert api prefix

* fix(experience): update the sso connectors endpoint

update the sso connectors endpoint

packages/experience/src/Providers/UserInteractionContextProvider/UserInteractionContext.tsx

@@ -1,8 +1,9 @@
-import { type SsoConnectorMetadata } from '@logto/schemas';
+import { type SsoConnectorMetadata, type VerificationType } from '@logto/schemas';
 import { noop } from '@silverhand/essentials';
 import { createContext } from 'react';
 
 import { type IdentifierInputValue } from '@/components/InputFields/SmartInputField';
+import { type VerificationIdsMap } from '@/types/guard';
 
 export type UserInteractionContextType = {
  // All the enabled sso connectors
@@ -31,6 +32,8 @@ export type UserInteractionContextType = {
  setForgotPasswordIdentifierInputValue: React.Dispatch<
  React.SetStateAction<IdentifierInputValue | undefined>
  >;
+ verificationIdsMap: VerificationIdsMap;
+ setVerificationId: (type: VerificationType, id: string) => void;
  /**
  * This method only clear the identifier input values from the session storage.
  *
@@ -54,5 +57,7 @@ export default createContext<UserInteractionContextType>({
  setIdentifierInputValue: noop,
  forgotPasswordIdentifierInputValue: undefined,
  setForgotPasswordIdentifierInputValue: noop,
+ verificationIdsMap: {},
+ setVerificationId: noop,
  clearInteractionContextSessionStorage: noop,
 });

packages/experience/src/Providers/UserInteractionContextProvider/index.tsx

@@ -1,5 +1,5 @@
-import { type SsoConnectorMetadata } from '@logto/schemas';
-import { type ReactNode, useEffect, useMemo, useState, useCallback } from 'react';
+import { type SsoConnectorMetadata, type VerificationType } from '@logto/schemas';
+import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type IdentifierInputValue } from '@/components/InputFields/SmartInputField';
 import useSessionStorage, { StorageKeys } from '@/hooks/use-session-storages';
@@ -35,6 +35,10 @@ const UserInteractionContextProvider = ({ children }: Props) => {
  IdentifierInputValue | undefined
  >(get(StorageKeys.ForgotPasswordIdentifierInputValue));
 
+ const [verificationIdsMap, setVerificationIdsMap] = useState(
+ get(StorageKeys.verificationIds) ?? {}
+ );
+
  useEffect(() => {
  if (!ssoEmail) {
  remove(StorageKeys.SsoEmail);
@@ -71,6 +75,15 @@ const UserInteractionContextProvider = ({ children }: Props) => {
  set(StorageKeys.ForgotPasswordIdentifierInputValue, forgotPasswordIdentifierInputValue);
  }, [forgotPasswordIdentifierInputValue, remove, set]);
 
+ useEffect(() => {
+ if (Object.keys(verificationIdsMap).length === 0) {
+ remove(StorageKeys.verificationIds);
+ return;
+ }
+
+ set(StorageKeys.verificationIds, verificationIdsMap);
+ }, [verificationIdsMap, remove, set]);
+
  const ssoConnectorsMap = useMemo(
  () => new Map(ssoConnectors.map((connector) => [connector.id, connector])),
  [ssoConnectors]
@@ -79,8 +92,13 @@ const UserInteractionContextProvider = ({ children }: Props) => {
  const clearInteractionContextSessionStorage = useCallback(() => {
  remove(StorageKeys.IdentifierInputValue);
  remove(StorageKeys.ForgotPasswordIdentifierInputValue);
+ remove(StorageKeys.verificationIds);
  }, [remove]);
 
+ const setVerificationId = useCallback((type: VerificationType, id: string) => {
+ setVerificationIdsMap((previous) => ({ ...previous, [type]: id }));
+ }, []);
+
  const userInteractionContext = useMemo<UserInteractionContextType>(
  () => ({
  ssoEmail,
@@ -92,6 +110,8 @@ const UserInteractionContextProvider = ({ children }: Props) => {
  setIdentifierInputValue,
  forgotPasswordIdentifierInputValue,
  setForgotPasswordIdentifierInputValue,
+ verificationIdsMap,
+ setVerificationId,
  clearInteractionContextSessionStorage,
  }),
  [
@@ -100,6 +120,8 @@ const UserInteractionContextProvider = ({ children }: Props) => {
  domainFilteredConnectors,
  identifierInputValue,
  forgotPasswordIdentifierInputValue,
+ verificationIdsMap,
+ setVerificationId,
  clearInteractionContextSessionStorage,
  ]
  );

packages/experience/src/apis/const.ts

@@ -0,0 +1 @@
+export const kyPrefixUrl = '/';

packages/experience/src/apis/experience/const.ts

@@ -0,0 +1,14 @@
+export const prefix = '/api/experience';
+
+export const experienceApiRoutes = Object.freeze({
+ prefix,
+ identification: `${prefix}/identification`,
+ submit: `${prefix}/submit`,
+ verification: `${prefix}/verification`,
+ profile: `${prefix}/profile`,
+ mfa: `${prefix}/profile/mfa`,
+});
+
+export type VerificationResponse = {
+ verificationId: string;
+};

packages/experience/src/apis/experience/index.ts

@@ -0,0 +1,149 @@
+import {
+ InteractionEvent,
+ type PasswordVerificationPayload,
+ SignInIdentifier,
+ type VerificationCodeIdentifier,
+} from '@logto/schemas';
+
+import { type ContinueFlowInteractionEvent } from '@/types';
+
+import api from '../api';
+
+import { experienceApiRoutes, type VerificationResponse } from './const';
+import {
+ initInteraction,
+ identifyUser,
+ submitInteraction,
+ updateInteractionEvent,
+ _updateProfile,
+ identifyAndSubmitInteraction,
+} from './interaction';
+
+export {
+ initInteraction,
+ submitInteraction,
+ identifyUser,
+ identifyAndSubmitInteraction,
+} from './interaction';
+
+export * from './mfa';
+export * from './social';
+
+export const registerWithVerifiedIdentifier = async (verificationId: string) => {
+ await updateInteractionEvent(InteractionEvent.Register);
+ return identifyAndSubmitInteraction({ verificationId });
+};
+
+export const signInWithVerifiedIdentifier = async (verificationId: string) => {
+ await updateInteractionEvent(InteractionEvent.SignIn);
+ return identifyAndSubmitInteraction({ verificationId });
+};
+
+// Password APIs
+export const signInWithPasswordIdentifier = async (payload: PasswordVerificationPayload) => {
+ await initInteraction(InteractionEvent.SignIn);
+
+ const { verificationId } = await api
+ .post(`${experienceApiRoutes.verification}/password`, {
+ json: payload,
+ })
+ .json<VerificationResponse>();
+
+ return identifyAndSubmitInteraction({ verificationId });
+};
+
+export const registerWithUsername = async (username: string) => {
+ await initInteraction(InteractionEvent.Register);
+
+ return _updateProfile({ type: SignInIdentifier.Username, value: username });
+};
+
+export const continueRegisterWithPassword = async (password: string) => {
+ await _updateProfile({ type: 'password', value: password });
+
+ return identifyAndSubmitInteraction();
+};
+
+// Verification code APIs
+type VerificationCodePayload = {
+ identifier: VerificationCodeIdentifier;
+ code: string;
+ verificationId: string;
+};
+
+export const sendVerificationCode = async (
+ interactionEvent: InteractionEvent,
+ identifier: VerificationCodeIdentifier
+) =>
+ api
+ .post(`${experienceApiRoutes.verification}/verification-code`, {
+ json: {
+ interactionEvent,
+ identifier,
+ },
+ })
+ .json<VerificationResponse>();
+
+const verifyVerificationCode = async (json: VerificationCodePayload) =>
+ api
+ .post(`${experienceApiRoutes.verification}/verification-code/verify`, {
+ json,
+ })
+ .json<VerificationResponse>();
+
+export const identifyWithVerificationCode = async (json: VerificationCodePayload) => {
+ const { verificationId } = await verifyVerificationCode(json);
+ return identifyAndSubmitInteraction({ verificationId });
+};
+
+// Profile APIs
+
+export const updateProfileWithVerificationCode = async (
+ json: VerificationCodePayload,
+ interactionEvent?: ContinueFlowInteractionEvent
+) => {
+ const { verificationId } = await verifyVerificationCode(json);
+
+ const {
+ identifier: { type },
+ } = json;
+
+ await _updateProfile({
+ type,
+ verificationId,
+ });
+
+ if (interactionEvent === InteractionEvent.Register) {
+ await identifyUser();
+ }
+
+ return submitInteraction();
+};
+
+type UpdateProfilePayload = {
+ type: SignInIdentifier.Username | 'password';
+ value: string;
+};
+
+export const updateProfile = async (
+ payload: UpdateProfilePayload,
+ interactionEvent: ContinueFlowInteractionEvent
+) => {
+ await _updateProfile(payload);
+
+ if (interactionEvent === InteractionEvent.Register) {
+ await identifyUser();
+ }
+
+ return submitInteraction();
+};
+
+export const resetPassword = async (password: string) => {
+ await api.put(`${experienceApiRoutes.profile}/password`, {
+ json: {
+ password,
+ },
+ });
+
+ return submitInteraction();
+};

packages/experience/src/apis/experience/interaction.ts

@@ -0,0 +1,41 @@
+import {
+ type InteractionEvent,
+ type IdentificationApiPayload,
+ type UpdateProfileApiPayload,
+} from '@logto/schemas';
+
+import api from '../api';
+
+import { experienceApiRoutes } from './const';
+
+type SubmitInteractionResponse = {
+ redirectTo: string;
+};
+
+export const initInteraction = async (interactionEvent: InteractionEvent) =>
+ api.put(`${experienceApiRoutes.prefix}`, {
+ json: {
+ interactionEvent,
+ },
+ });
+
+export const identifyUser = async (payload: IdentificationApiPayload = {}) =>
+ api.post(experienceApiRoutes.identification, { json: payload });
+
+export const submitInteraction = async () =>
+ api.post(`${experienceApiRoutes.submit}`).json<SubmitInteractionResponse>();
+
+export const _updateProfile = async (payload: UpdateProfileApiPayload) =>
+ api.post(experienceApiRoutes.profile, { json: payload });
+
+export const updateInteractionEvent = async (interactionEvent: InteractionEvent) =>
+ api.put(`${experienceApiRoutes.prefix}/interaction-event`, {
+ json: {
+ interactionEvent,
+ },
+ });
+
+export const identifyAndSubmitInteraction = async (payload?: IdentificationApiPayload) => {
+ await identifyUser(payload);
+ return submitInteraction();
+};