fix(console): should not render when watch return undefined in sign up and sign in form (#2289)

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx

@@ -1,5 +1,4 @@
-import { SignUpIdentifier } from '@logto/schemas';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import FormField from '@/components/FormField';
@@ -12,22 +11,19 @@ import * as styles from './index.module.scss';
 const SignInForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
-  const { control } = useFormContext<SignInExperienceForm>();
-  /**
-   * Note: `watch` may not return the default value, use `useWatch` instead.
-   * Reference: https://github.com/react-hook-form/react-hook-form/issues/1332
-   */
-  const signUpIdentifier = useWatch({
-    control,
-    name: 'signUp.identifier',
-    defaultValue: SignUpIdentifier.Username,
-  });
-  const setupPasswordAtSignUp = useWatch({ control, name: 'signUp.password', defaultValue: false });
-  const setupVerificationAtSignUp = useWatch({
-    control,
-    name: 'signUp.verify',
-    defaultValue: false,
-  });
+  const { control, watch } = useFormContext<SignInExperienceForm>();
+
+  const signUpIdentifier = watch('signUp.identifier');
+  const setupPasswordAtSignUp = watch('signUp.password');
+  const setupVerificationAtSignUp = watch('signUp.verify');
+
+  if (
+    !signUpIdentifier ||
+    setupPasswordAtSignUp === undefined ||
+    setupVerificationAtSignUp === undefined
+  ) {
+    return null;
+  }
 
   return (
     <>

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx

@@ -18,9 +18,13 @@ import * as styles from './index.module.scss';
 
 const SignUpForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { control, setValue, getValues } = useFormContext<SignInExperienceForm>();
+  const { control, setValue, watch } = useFormContext<SignInExperienceForm>();
 
-  const signUpIdentifier = getValues('signUp.identifier');
+  const signUpIdentifier = watch('signUp.identifier');
+
+  if (!signUpIdentifier) {
+    return null;
+  }
 
   const postSignUpIdentifierChange = (signUpIdentifier: SignUpIdentifier) => {
     if (signUpIdentifier === SignUpIdentifier.Username) {
@@ -95,7 +99,7 @@ const SignUpForm = () => {
               <Checkbox
                 label={t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
                 disabled={signUpIdentifier === SignUpIdentifier.Username}
-                value={value}
+                value={value ?? false}
                 onChange={onChange}
               />
             )}
@@ -107,7 +111,7 @@ const SignUpForm = () => {
               render={({ field: { value, onChange } }) => (
                 <Checkbox
                   label={t('sign_in_exp.sign_up_and_sign_in.sign_up.verify_at_sign_up_option')}
-                  value={value}
+                  value={value ?? false}
                   disabled={requiredVerifySignUpIdentifiers.includes(signUpIdentifier)}
                   onChange={onChange}
                 />

packages/console/src/pages/SignInExperience/types.ts

@@ -1,6 +1,6 @@
-import type { SignInExperience, SignInMethodKey } from '@logto/schemas';
+import type { SignInExperience, SignInMethodKey, SignUp } from '@logto/schemas';
 
-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
+export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'signUp'> & {
   signInMethods: {
     primary?: SignInMethodKey;
     enableSecondary: boolean;
@@ -9,5 +9,6 @@ export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
     email: boolean;
     social: boolean;
   };
+  signUp: Partial<SignUp>;
   createAccountEnabled: boolean;
 };

packages/console/src/pages/SignInExperience/utilities.ts

@@ -1,6 +1,6 @@
 import en from '@logto/phrases-ui/lib/locales/en';
 import type { SignInExperience, SignInMethods, Translation } from '@logto/schemas';
-import { SignInMethodKey, SignInMethodState, SignInMode } from '@logto/schemas';
+import { SignUpIdentifier, SignInMethodKey, SignInMethodState, SignInMode } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 
 import type { SignInExperienceForm } from './types';
@@ -52,7 +52,7 @@ export const signInExperienceParser = {
     };
   },
   toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {
-    const { branding, createAccountEnabled } = setup;
+    const { branding, createAccountEnabled, signUp } = setup;
 
     return {
       ...setup,
@@ -68,6 +68,11 @@ export const signInExperienceParser = {
         email: findMethodState(setup, 'email'),
         social: findMethodState(setup, 'social'),
       },
+      signUp: {
+        identifier: signUp.identifier ?? SignUpIdentifier.Username,
+        password: Boolean(signUp.password),
+        verify: Boolean(signUp.verify),
+      },
       signInMode: createAccountEnabled ? SignInMode.SignInAndRegister : SignInMode.SignIn,
     };
   },