refactor(experience): migrate the password register and sign-in

migrate the password register and sign-in flow

packages/experience/src/apis/experience.ts

@@ -0,0 +1,72 @@
+import {
+  type IdentificationApiPayload,
+  InteractionEvent,
+  type PasswordVerificationPayload,
+  SignInIdentifier,
+  type UpdateProfileApiPayload,
+} from '@logto/schemas';
+
+import api from './api';
+
+const prefix = '/api/experience';
+
+const experienceRoutes = Object.freeze({
+  prefix,
+  identification: `${prefix}/identification`,
+  verification: `${prefix}/verification`,
+  profile: `${prefix}/profile`,
+  mfa: `${prefix}/profile/mfa`,
+});
+
+type VerificationResponse = {
+  verificationId: string;
+};
+
+type SubmitInteractionResponse = {
+  redirectTo: string;
+};
+
+const initInteraction = async (interactionEvent: InteractionEvent) =>
+  api.put(`${experienceRoutes.prefix}`, {
+    json: {
+      interactionEvent,
+    },
+  });
+
+const identifyUser = async (payload: IdentificationApiPayload = {}) =>
+  api.post(experienceRoutes.identification, { json: payload });
+
+const submitInteraction = async () =>
+  api.post(`${experienceRoutes.prefix}/submit`).json<SubmitInteractionResponse>();
+
+const updateProfile = async (payload: UpdateProfileApiPayload) => {
+  await api.post(experienceRoutes.profile, { json: payload });
+};
+
+export const signInWithPasswordIdentifier = async (payload: PasswordVerificationPayload) => {
+  await initInteraction(InteractionEvent.SignIn);
+
+  const { verificationId } = await api
+    .post(`${experienceRoutes.verification}/password`, {
+      json: payload,
+    })
+    .json<VerificationResponse>();
+
+  await identifyUser({ verificationId });
+
+  return submitInteraction();
+};
+
+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 });
+
+  await identifyUser();
+
+  return submitInteraction();
+};

packages/experience/src/hooks/use-error-handler.ts

@@ -34,7 +34,7 @@ const useErrorHandler = () => {
           }
 
           return;
-        } catch {
+        } catch (error) {
           setToast(t('error.unknown'));
           console.error(error);
 

packages/experience/src/hooks/use-password-policy-checker.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import usePasswordErrorMessage from './use-password-error-message';
+import { usePasswordPolicy } from './use-sie';
+
+type PasswordPolicyCheckProps = {
+  setErrorMessage: (message?: string) => void;
+};
+
+const usePasswordPolicyChecker = ({ setErrorMessage }: PasswordPolicyCheckProps) => {
+  const { getErrorMessage } = usePasswordErrorMessage();
+  const { policyChecker } = usePasswordPolicy();
+
+  const checkPassword = useCallback(
+    async (password: string) => {
+      // Perform fast check before sending request
+      const fastCheckErrorMessage = getErrorMessage(policyChecker.fastCheck(password));
+
+      if (fastCheckErrorMessage) {
+        setErrorMessage(fastCheckErrorMessage);
+        return false;
+      }
+
+      return true;
+    },
+    [getErrorMessage, policyChecker, setErrorMessage]
+  );
+
+  return checkPassword;
+};
+
+export default usePasswordPolicyChecker;

packages/experience/src/hooks/use-password-rejection-handler.ts

@@ -0,0 +1,31 @@
+import { type RequestErrorBody } from '@logto/schemas';
+import { useCallback, useMemo } from 'react';
+
+import type { ErrorHandlers } from './use-error-handler';
+import usePasswordErrorMessage from './use-password-error-message';
+
+type ErrorHandlerProps = {
+  setErrorMessage: (message?: string) => void;
+};
+
+const usePasswordRejectionErrorHandler = ({ setErrorMessage }: ErrorHandlerProps) => {
+  const { getErrorMessageFromBody } = usePasswordErrorMessage();
+
+  const passwordRejectionHandler = useCallback(
+    (error: RequestErrorBody) => {
+      setErrorMessage(getErrorMessageFromBody(error));
+    },
+    [getErrorMessageFromBody, setErrorMessage]
+  );
+
+  const passwordRejectionErrorHandler = useMemo<ErrorHandlers>(
+    () => ({
+      'password.rejected': passwordRejectionHandler,
+    }),
+    [passwordRejectionHandler]
+  );
+
+  return passwordRejectionErrorHandler;
+};
+
+export default usePasswordRejectionErrorHandler;

packages/experience/src/hooks/use-password-sign-in.ts

@@ -1,7 +1,7 @@
+import { SignInIdentifier, type PasswordVerificationPayload } from '@logto/schemas';
 import { useCallback, useMemo, useState } from 'react';
 
-import type { PasswordSignInPayload } from '@/apis/interaction';
-import { signInWithPasswordIdentifier } from '@/apis/interaction';
+import { signInWithPasswordIdentifier } from '@/apis/experience';
 import useApi from '@/hooks/use-api';
 import useCheckSingleSignOn from '@/hooks/use-check-single-sign-on';
 import type { ErrorHandlers } from '@/hooks/use-error-handler';
@@ -34,10 +34,12 @@ const usePasswordSignIn = () => {
   );
 
   const onSubmit = useCallback(
-    async (payload: PasswordSignInPayload) => {
+    async (payload: PasswordVerificationPayload) => {
+      const { identifier } = payload;
+
       // Check if the email is registered with any SSO connectors. If the email is registered with any SSO connectors, we should not proceed to the next step
-      if (payload.email) {
-        const result = await checkSingleSignOn(payload.email);
+      if (identifier.type === SignInIdentifier.Email) {
+        const result = await checkSingleSignOn(identifier.value);
 
         if (result) {
           return;

packages/experience/src/pages/Register/IdentifierRegisterForm/use-register-with-username.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { registerWithUsernamePassword } from '@/apis/interaction';
+import { registerWithUsername } from '@/apis/experience';
 import useApi from '@/hooks/use-api';
 import type { ErrorHandlers } from '@/hooks/use-error-handler';
 import useErrorHandler from '@/hooks/use-error-handler';
@@ -19,25 +19,25 @@ const useRegisterWithUsername = () => {
       'user.username_already_in_use': (error) => {
         setErrorMessage(error.message);
       },
-      'user.missing_profile': () => {
-        navigate('password');
-      },
     }),
-    [navigate]
+    []
   );
 
   const handleError = useErrorHandler();
-  const asyncRegister = useApi(registerWithUsernamePassword);
+  const asyncRegister = useApi(registerWithUsername);
 
   const onSubmit = useCallback(
     async (username: string) => {
       const [error] = await asyncRegister(username);
 
       if (error) {
         await handleError(error, errorHandlers);
+        return;
       }
+
+      navigate('password');
     },
-    [asyncRegister, errorHandlers, handleError]
+    [asyncRegister, errorHandlers, handleError, navigate]
   );
 
   return { errorMessage, clearErrorMessage, onSubmit };

packages/experience/src/pages/RegisterPassword/index.tsx

@@ -3,13 +3,15 @@ import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
-import { setUserPassword } from '@/apis/interaction';
+import { continueRegisterWithPassword } from '@/apis/experience';
 import SetPassword from '@/containers/SetPassword';
+import useApi from '@/hooks/use-api';
 import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
-import { type ErrorHandlers } from '@/hooks/use-error-handler';
+import useErrorHandler, { type ErrorHandlers } from '@/hooks/use-error-handler';
 import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
 import useMfaErrorHandler from '@/hooks/use-mfa-error-handler';
-import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
+import usePasswordPolicyChecker from '@/hooks/use-password-policy-checker';
+import usePasswordRejectionErrorHandler from '@/hooks/use-password-rejection-handler';
 import { usePasswordPolicy, useSieMethods } from '@/hooks/use-sie';
 
 import ErrorPage from '../ErrorPage';
@@ -25,7 +27,12 @@ const RegisterPassword = () => {
     setErrorMessage(undefined);
   }, []);
 
+  const checkPassword = usePasswordPolicyChecker({ setErrorMessage });
+  const asyncRegisterPassword = useApi(continueRegisterWithPassword);
+  const handleError = useErrorHandler();
+
   const mfaErrorHandler = useMfaErrorHandler({ replace: true });
+  const passwordRejectionErrorHandler = usePasswordRejectionErrorHandler({ setErrorMessage });
 
   const errorHandlers: ErrorHandlers = useMemo(
     () => ({
@@ -35,26 +42,33 @@ const RegisterPassword = () => {
         navigate(-1);
       },
       ...mfaErrorHandler,
+      ...passwordRejectionErrorHandler,
     }),
-    [navigate, mfaErrorHandler, show]
+    [mfaErrorHandler, passwordRejectionErrorHandler, show, navigate]
   );
 
-  const successHandler: SuccessHandler<typeof setUserPassword> = useCallback(
-    async (result) => {
-      if (result && 'redirectTo' in result) {
+  const onSubmitHandler = useCallback(
+    async (password: string) => {
+      const success = await checkPassword(password);
+
+      if (!success) {
+        return;
+      }
+
+      const [error, result] = await asyncRegisterPassword(password);
+
+      if (error) {
+        await handleError(error, errorHandlers);
+        return;
+      }
+
+      if (result) {
         await redirectTo(result.redirectTo);
       }
     },
-    [redirectTo]
+    [asyncRegisterPassword, checkPassword, errorHandlers, handleError, redirectTo]
   );
 
-  const [action] = usePasswordAction({
-    api: setUserPassword,
-    setErrorMessage,
-    errorHandlers,
-    successHandler,
-  });
-
   const {
     policy: {
       length: { min, max },
@@ -78,7 +92,7 @@ const RegisterPassword = () => {
         errorMessage={errorMessage}
         maxLength={max}
         clearErrorMessage={clearErrorMessage}
-        onSubmit={action}
+        onSubmit={onSubmitHandler}
       />
     </SecondaryPageLayout>
   );

packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx

@@ -80,7 +80,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
         }
 
         await onSubmit({
-          [type]: value,
+          identifier: { type, value },
           password,
         });
       })(event);

packages/experience/src/pages/SignInPassword/PasswordForm/index.test.tsx

@@ -71,7 +71,13 @@ describe('PasswordSignInForm', () => {
       });
 
       await waitFor(() => {
-        expect(signInWithPasswordIdentifier).toBeCalledWith({ [identifier]: value, password });
+        expect(signInWithPasswordIdentifier).toBeCalledWith({
+          identifier: {
+            type: identifier,
+            value,
+          },
+          password,
+        });
       });
 
       if (isVerificationCodeEnabled) {

packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx

@@ -1,7 +1,7 @@
 import { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
@@ -77,7 +77,7 @@ const PasswordForm = ({
         setIdentifierInputValue({ type, value });
 
         await onSubmit({
-          [type]: value,
+          identifier: { type, value },
           password,
         });
       })(event);