refactor(experience): update username registration handler

update username registraction handler, directly submit the interaction is password is not enabled for sign-up

Author: simeng-li

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

@@ -1,20 +1,27 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { registerWithUsername } from '@/apis/experience';
+import { identifyAndSubmitInteraction, 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';
+import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
+import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler';
+import { useSieMethods } from '@/hooks/use-sie';
 
 const useRegisterWithUsername = () => {
   const navigate = useNavigate();
+  const redirectTo = useGlobalRedirectTo();
+
   const [errorMessage, setErrorMessage] = useState<string>();
 
+  const { passwordRequiredForSignUp } = useSieMethods();
+
   const clearErrorMessage = useCallback(() => {
     setErrorMessage('');
   }, []);
 
-  const errorHandlers: ErrorHandlers = useMemo(
+  const usernameErrorHandlers: ErrorHandlers = useMemo(
     () => ({
       'user.username_already_in_use': (error) => {
         setErrorMessage(error.message);
@@ -23,21 +30,52 @@ const useRegisterWithUsername = () => {
     []
   );
 
+  const preSignInErrorHandler = usePreSignInErrorHandler({ replace: true });
+
   const handleError = useErrorHandler();
   const asyncRegister = useApi(registerWithUsername);
 
+  const asyncSubmitInteraction = useApi(identifyAndSubmitInteraction);
+
+  const onSubmitInteraction = useCallback(async () => {
+    const [error, result] = await asyncSubmitInteraction();
+
+    if (error) {
+      await handleError(error, preSignInErrorHandler);
+      return;
+    }
+
+    if (result) {
+      await redirectTo(result.redirectTo);
+    }
+  }, [asyncSubmitInteraction, handleError, preSignInErrorHandler, redirectTo]);
+
   const onSubmit = useCallback(
     async (username: string) => {
       const [error] = await asyncRegister(username);
 
       if (error) {
-        await handleError(error, errorHandlers);
+        await handleError(error, usernameErrorHandlers);
+        return;
+      }
+
+      // If password is required for sign up, navigate to the password page
+      if (passwordRequiredForSignUp) {
+        navigate('password');
         return;
       }
 
-      navigate('password');
+      // Otherwise, identify and submit interaction
+      await onSubmitInteraction();
     },
-    [asyncRegister, errorHandlers, handleError, navigate]
+    [
+      asyncRegister,
+      passwordRequiredForSignUp,
+      onSubmitInteraction,
+      handleError,
+      usernameErrorHandlers,
+      navigate,
+    ]
   );
 
   return { errorMessage, clearErrorMessage, onSubmit };

packages/experience/src/hooks/use-sie.ts

@@ -25,6 +25,7 @@ type UseSieMethodsReturnType = {
    * @see {useRequiredProfileErrorHandler} for more information.
    */
   signUpMethods: SignInIdentifier[];
+  passwordRequiredForSignUp: boolean;
   signInMethods: SignInExperienceResponse['signIn']['methods'];
   socialSignInSettings: SignInExperienceResponse['socialSignIn'];
   socialConnectors: SignInExperienceResponse['socialConnectors'];
@@ -102,6 +103,11 @@ export const useSieMethods = (): UseSieMethodsReturnType => {
     [experienceSettings?.signInMode, signInMethods]
   );
 
+  const passwordRequiredForSignUp = useMemo(() => {
+    const { signUp } = experienceSettings ?? {};
+    return signUp?.password ?? false;
+  }, [experienceSettings]);
+
   return useMemo(
     () => ({
       signUpMethods,
@@ -113,13 +119,21 @@ export const useSieMethods = (): UseSieMethodsReturnType => {
       forgotPassword: experienceSettings?.forgotPassword,
       customContent: experienceSettings?.customContent,
       singleSignOnEnabled: experienceSettings?.singleSignOnEnabled,
+      passwordRequiredForSignUp,
       isVerificationCodeEnabledForSignUp,
       isVerificationCodeEnabledForSignIn,
     }),
     [
       signUpMethods,
       signInMethods,
-      experienceSettings,
+      experienceSettings?.socialSignIn,
+      experienceSettings?.socialConnectors,
+      experienceSettings?.ssoConnectors,
+      experienceSettings?.signInMode,
+      experienceSettings?.forgotPassword,
+      experienceSettings?.customContent,
+      experienceSettings?.singleSignOnEnabled,
+      passwordRequiredForSignUp,
       isVerificationCodeEnabledForSignUp,
       isVerificationCodeEnabledForSignIn,
     ]

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

@@ -9,9 +9,9 @@ import useApi from '@/hooks/use-api';
 import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 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 usePasswordPolicyChecker from '@/hooks/use-password-policy-checker';
 import usePasswordRejectionErrorHandler from '@/hooks/use-password-rejection-handler';
+import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler';
 import { usePasswordPolicy, useSieMethods } from '@/hooks/use-sie';
 
 import ErrorPage from '../ErrorPage';
@@ -31,7 +31,7 @@ const RegisterPassword = () => {
   const asyncRegisterPassword = useApi(continueRegisterWithPassword);
   const handleError = useErrorHandler();
 
-  const mfaErrorHandler = useMfaErrorHandler({ replace: true });
+  const preSignInErrorHandler = usePreSignInErrorHandler({ replace: true });
   const passwordRejectionErrorHandler = usePasswordRejectionErrorHandler({ setErrorMessage });
 
   const errorHandlers: ErrorHandlers = useMemo(
@@ -41,10 +41,10 @@ const RegisterPassword = () => {
         await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
         navigate(-1);
       },
-      ...mfaErrorHandler,
+      ...preSignInErrorHandler,
       ...passwordRejectionErrorHandler,
     }),
-    [mfaErrorHandler, passwordRejectionErrorHandler, show, navigate]
+    [preSignInErrorHandler, passwordRejectionErrorHandler, show, navigate]
   );
 
   const onSubmitHandler = useCallback(