refactor(experience): improve identifier prefilling (#6508)

packages/experience/src/components/IdentifierRegisterForm/index.tsx

@@ -1,9 +1,8 @@
-import { AgreeToTermsPolicy, ExtraParamsKey, type SignInIdentifier } from '@logto/schemas';
+import { AgreeToTermsPolicy, type SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import LockIcon from '@/assets/icons/lock.svg?react';
@@ -12,6 +11,7 @@ import ErrorMessage from '@/components/ErrorMessage';
 import { SmartInputField } from '@/components/InputFields';
 import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField';
 import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
+import usePrefilledIdentifier from '@/hooks/use-prefilled-identifier';
 import useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch';
 import useTerms from '@/hooks/use-terms';
 import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
@@ -36,11 +36,8 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
 
   const { errorMessage, clearErrorMessage, onSubmit } = useOnSubmit();
 
-  const { getIdentifierInputValueByTypes, setIdentifierInputValue } =
-    useContext(UserInteractionContext);
-  const identifierInputValue = getIdentifierInputValueByTypes(signUpMethods);
-
-  const [searchParams] = useSearchParams();
+  const { setIdentifierInputValue } = useContext(UserInteractionContext);
+  const prefilledIdentifier = usePrefilledIdentifier({ enabledIdentifiers: signUpMethods });
 
   const {
     watch,
@@ -49,6 +46,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
     control,
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
+    defaultValues: { id: prefilledIdentifier },
   });
 
   // Watch identifier field and check single sign on method availability
@@ -127,10 +125,8 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
             autoFocus={autoFocus}
             className={styles.inputField}
             {...field}
-            defaultValue={
-              identifierInputValue?.value ?? searchParams.get(ExtraParamsKey.LoginHint) ?? undefined
-            }
-            defaultType={identifierInputValue?.type}
+            defaultValue={field.value.value}
+            defaultType={field.value.type}
             isDanger={!!errors.id || !!errorMessage}
             errorMessage={errors.id?.message}
             enabledTypes={signUpMethods}

packages/experience/src/components/IdentifierSignInForm/index.tsx

@@ -1,9 +1,8 @@
-import { AgreeToTermsPolicy, ExtraParamsKey, type SignIn } from '@logto/schemas';
+import { AgreeToTermsPolicy, type SignIn } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import LockIcon from '@/assets/icons/lock.svg?react';
@@ -12,6 +11,7 @@ import ErrorMessage from '@/components/ErrorMessage';
 import { SmartInputField } from '@/components/InputFields';
 import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField';
 import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
+import usePrefilledIdentifier from '@/hooks/use-prefilled-identifier';
 import useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch';
 import useTerms from '@/hooks/use-terms';
 import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
@@ -34,16 +34,16 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
   const { t } = useTranslation();
   const { errorMessage, clearErrorMessage, onSubmit } = useOnSubmit(signInMethods);
   const { termsValidation, agreeToTermsPolicy } = useTerms();
-  const { getIdentifierInputValueByTypes, setIdentifierInputValue } =
-    useContext(UserInteractionContext);
-  const [searchParams] = useSearchParams();
+  const { setIdentifierInputValue } = useContext(UserInteractionContext);
 
   const enabledSignInMethods = useMemo(
     () => signInMethods.map(({ identifier }) => identifier),
     [signInMethods]
   );
 
-  const identifierInputValue = getIdentifierInputValueByTypes(enabledSignInMethods);
+  const prefilledIdentifier = usePrefilledIdentifier({
+    enabledIdentifiers: enabledSignInMethods,
+  });
 
   const {
     watch,
@@ -52,6 +52,9 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
     formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
+    defaultValues: {
+      identifier: prefilledIdentifier,
+    },
   });
 
   // Watch identifier field and check single sign on method availability
@@ -127,10 +130,8 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
             isDanger={!!errors.identifier || !!errorMessage}
             errorMessage={errors.identifier?.message}
             enabledTypes={enabledSignInMethods}
-            defaultType={identifierInputValue?.type}
-            defaultValue={
-              identifierInputValue?.value ?? searchParams.get(ExtraParamsKey.LoginHint) ?? undefined
-            }
+            defaultType={field.value.type}
+            defaultValue={field.value.value}
           />
         )}
       />

packages/experience/src/components/InputFields/SmartInputField/use-smart-input-field.ts

@@ -3,7 +3,6 @@ import { assert } from '@silverhand/essentials';
 import { useState, useCallback, useMemo } from 'react';
 import type { ChangeEventHandler } from 'react';
 
-import useUpdateEffect from '@/hooks/use-update-effect';
 import { getDefaultCountryCallingCode } from '@/utils/country-code';
 import { parseIdentifierValue } from '@/utils/form';
 
@@ -102,12 +101,6 @@ const useSmartInputField = ({ _defaultType, defaultValue, enabledTypes }: Props)
     setCurrentType(enabledTypeSet.size === 1 ? defaultType : undefined);
   }, [defaultType, enabledTypeSet.size]);
 
-  // CAUTION: For preview use only, enabledTypes and defaultType should not be changed after component mounted
-  useUpdateEffect(() => {
-    setInputValue('');
-    setCurrentType(defaultType);
-  }, [defaultType]);
-
   return {
     countryCode,
     onCountryCodeChange,

packages/experience/src/components/PasswordSignInForm/index.tsx

@@ -1,9 +1,8 @@
-import { AgreeToTermsPolicy, ExtraParamsKey, type SignInIdentifier } from '@logto/schemas';
+import { AgreeToTermsPolicy, type SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import LockIcon from '@/assets/icons/lock.svg?react';
@@ -14,6 +13,7 @@ import type { IdentifierInputValue } from '@/components/InputFields/SmartInputFi
 import ForgotPasswordLink from '@/containers/ForgotPasswordLink';
 import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
 import usePasswordSignIn from '@/hooks/use-password-sign-in';
+import usePrefilledIdentifier from '@/hooks/use-prefilled-identifier';
 import { useForgotPasswordSettings } from '@/hooks/use-sie';
 import useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch';
 import useTerms from '@/hooks/use-terms';
@@ -40,7 +40,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
   const { isForgotPasswordEnabled } = useForgotPasswordSettings();
   const { termsValidation, agreeToTermsPolicy } = useTerms();
   const { setIdentifierInputValue } = useContext(UserInteractionContext);
-  const [searchParams] = useSearchParams();
+  const prefilledIdentifier = usePrefilledIdentifier({ enabledIdentifiers: signInMethods });
 
   const {
     watch,
@@ -51,7 +51,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
-      identifier: {},
+      identifier: prefilledIdentifier,
       password: '',
     },
   });
@@ -129,7 +129,8 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
             isDanger={!!errors.identifier}
             errorMessage={errors.identifier?.message}
             enabledTypes={signInMethods}
-            defaultValue={searchParams.get(ExtraParamsKey.LoginHint) ?? undefined}
+            defaultValue={field.value.value}
+            defaultType={field.value.type}
           />
         )}
       />

packages/experience/src/hooks/use-login-hint.ts

@@ -0,0 +1,10 @@
+import { ExtraParamsKey } from '@logto/schemas';
+import { useSearchParams } from 'react-router-dom';
+
+const useLoginHint = () => {
+  const [searchParams] = useSearchParams();
+
+  return searchParams.get(ExtraParamsKey.LoginHint) ?? undefined;
+};
+
+export default useLoginHint;

packages/experience/src/hooks/use-prefilled-identifier.ts

@@ -0,0 +1,35 @@
+import { type SignInIdentifier } from '@logto/schemas';
+import { useContext, useMemo } from 'react';
+
+import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
+import { type IdentifierInputValue } from '@/components/InputFields/SmartInputField';
+
+import useLoginHint from './use-login-hint';
+
+type Options = {
+  enabledIdentifiers?: SignInIdentifier[];
+};
+
+const usePrefilledIdentifier = ({ enabledIdentifiers }: Options = {}) => {
+  const { identifierInputValue, getIdentifierInputValueByTypes } =
+    useContext(UserInteractionContext);
+
+  const loginHint = useLoginHint();
+
+  const cachedInputIdentifier = useMemo(() => {
+    return enabledIdentifiers
+      ? getIdentifierInputValueByTypes(enabledIdentifiers)
+      : identifierInputValue;
+  }, [enabledIdentifiers, getIdentifierInputValueByTypes, identifierInputValue]);
+
+  return useMemo<IdentifierInputValue>(() => {
+    /**
+     * First, check if there's a cached input identifier
+     * If there's no cached input identifier, check if there's a valid login hint
+     * If there's neither, return empty
+     */
+    return cachedInputIdentifier ?? { value: loginHint ?? '' };
+  }, [cachedInputIdentifier, loginHint]);
+};
+
+export default usePrefilledIdentifier;

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

@@ -1,8 +1,9 @@
-import { experience, ExtraParamsKey } from '@logto/schemas';
+import { experience } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
-import { Navigate, useSearchParams } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
 import FocusedAuthPageLayout from '@/Layout/FocusedAuthPageLayout';
+import useLoginHint from '@/hooks/use-login-hint';
 import { identifierInputDescriptionMap } from '@/utils/form';
 
 import ForgotPasswordForm from '../ForgotPassword/ForgotPasswordForm';
@@ -32,8 +33,7 @@ import { useResetPasswordMethods } from './use-reset-password-methods';
 const ResetPasswordLanding = () => {
   const { t } = useTranslation();
   const enabledMethods = useResetPasswordMethods();
-  const [searchParams] = useSearchParams();
-  const loginHint = searchParams.get(ExtraParamsKey.LoginHint) ?? undefined;
+  const loginHint = useLoginHint();
 
   // Fallback to sign-in page
   if (enabledMethods.length === 0) {