diff --git a/packages/ui/src/apis/api.test.ts b/packages/ui/src/apis/api.test.ts
index d26796d07..9a9430553 100644
--- a/packages/ui/src/apis/api.test.ts
+++ b/packages/ui/src/apis/api.test.ts
@@ -1,3 +1,5 @@
+import { SignInIdentifier } from '@logto/schemas';
+
 import { UserFlow } from '@/types';
 
 import {
@@ -10,14 +12,22 @@ import { getVerifyPasscodeApi } from './utils';
 
 describe('api', () => {
   it('getVerifyPasscodeApi', () => {
-    expect(getVerifyPasscodeApi(UserFlow.register, 'sms')).toBe(verifyRegisterSmsPasscode);
-    expect(getVerifyPasscodeApi(UserFlow.register, 'email')).toBe(verifyRegisterEmailPasscode);
-    expect(getVerifyPasscodeApi(UserFlow.signIn, 'sms')).toBe(verifySignInSmsPasscode);
-    expect(getVerifyPasscodeApi(UserFlow.signIn, 'email')).toBe(verifySignInEmailPasscode);
-    expect(getVerifyPasscodeApi(UserFlow.forgotPassword, 'email')).toBe(
+    expect(getVerifyPasscodeApi(UserFlow.register, SignInIdentifier.Sms)).toBe(
+      verifyRegisterSmsPasscode
+    );
+    expect(getVerifyPasscodeApi(UserFlow.register, SignInIdentifier.Email)).toBe(
+      verifyRegisterEmailPasscode
+    );
+    expect(getVerifyPasscodeApi(UserFlow.signIn, SignInIdentifier.Sms)).toBe(
+      verifySignInSmsPasscode
+    );
+    expect(getVerifyPasscodeApi(UserFlow.signIn, SignInIdentifier.Email)).toBe(
+      verifySignInEmailPasscode
+    );
+    expect(getVerifyPasscodeApi(UserFlow.forgotPassword, SignInIdentifier.Email)).toBe(
       verifyForgotPasswordEmailPasscode
     );
-    expect(getVerifyPasscodeApi(UserFlow.forgotPassword, 'sms')).toBe(
+    expect(getVerifyPasscodeApi(UserFlow.forgotPassword, SignInIdentifier.Sms)).toBe(
       verifyForgotPasswordSmsPasscode
     );
   });
diff --git a/packages/ui/src/apis/utils.ts b/packages/ui/src/apis/utils.ts
index 8325b3090..a2bbd0c5d 100644
--- a/packages/ui/src/apis/utils.ts
+++ b/packages/ui/src/apis/utils.ts
@@ -1,3 +1,5 @@
+import { SignInIdentifier } from '@logto/schemas';
+
 import { UserFlow } from '@/types';
 
 import {
@@ -19,29 +21,29 @@ import {
   sendSignInSmsPasscode,
 } from './sign-in';
 
-export type PasscodeChannel = 'sms' | 'email';
+export type PasscodeChannel = SignInIdentifier.Email | SignInIdentifier.Sms;
 
 export const getSendPasscodeApi = (
   type: UserFlow,
   method: PasscodeChannel
 ): ((_address: string) => Promise<{ success: boolean }>) => {
-  if (type === UserFlow.forgotPassword && method === 'email') {
+  if (type === UserFlow.forgotPassword && method === SignInIdentifier.Email) {
     return sendForgotPasswordEmailPasscode;
   }
 
-  if (type === UserFlow.forgotPassword && method === 'sms') {
+  if (type === UserFlow.forgotPassword && method === SignInIdentifier.Sms) {
     return sendForgotPasswordSmsPasscode;
   }
 
-  if (type === UserFlow.signIn && method === 'email') {
+  if (type === UserFlow.signIn && method === SignInIdentifier.Email) {
     return sendSignInEmailPasscode;
   }
 
-  if (type === UserFlow.signIn && method === 'sms') {
+  if (type === UserFlow.signIn && method === SignInIdentifier.Sms) {
     return sendSignInSmsPasscode;
   }
 
-  if (type === UserFlow.register && method === 'email') {
+  if (type === UserFlow.register && method === SignInIdentifier.Email) {
     return sendRegisterEmailPasscode;
   }
 
@@ -56,23 +58,23 @@ export const getVerifyPasscodeApi = (
   code: string,
   socialToBind?: string
 ) => Promise<{ redirectTo?: string; success?: boolean }>) => {
-  if (type === UserFlow.forgotPassword && method === 'email') {
+  if (type === UserFlow.forgotPassword && method === SignInIdentifier.Email) {
     return verifyForgotPasswordEmailPasscode;
   }
 
-  if (type === UserFlow.forgotPassword && method === 'sms') {
+  if (type === UserFlow.forgotPassword && method === SignInIdentifier.Sms) {
     return verifyForgotPasswordSmsPasscode;
   }
 
-  if (type === UserFlow.signIn && method === 'email') {
+  if (type === UserFlow.signIn && method === SignInIdentifier.Email) {
     return verifySignInEmailPasscode;
   }
 
-  if (type === UserFlow.signIn && method === 'sms') {
+  if (type === UserFlow.signIn && method === SignInIdentifier.Sms) {
     return verifySignInSmsPasscode;
   }
 
-  if (type === UserFlow.register && method === 'email') {
+  if (type === UserFlow.register && method === SignInIdentifier.Email) {
     return verifyRegisterEmailPasscode;
   }
 
diff --git a/packages/ui/src/containers/EmailForm/EmailForm.tsx b/packages/ui/src/containers/EmailForm/EmailForm.tsx
index 028965237..9c943045a 100644
--- a/packages/ui/src/containers/EmailForm/EmailForm.tsx
+++ b/packages/ui/src/containers/EmailForm/EmailForm.tsx
@@ -23,7 +23,7 @@ type Props = {
   errorMessage?: string;
   submitButtonText?: TFuncKey;
   clearErrorMessage?: () => void;
-  onSubmit: (email: string) => Promise<void>;
+  onSubmit: (email: string) => Promise<void> | void;
 };
 
 type FieldState = {
diff --git a/packages/ui/src/containers/EmailForm/EmailRegister.tsx b/packages/ui/src/containers/EmailForm/EmailRegister.tsx
index 8d7c4edc4..b97e67d44 100644
--- a/packages/ui/src/containers/EmailForm/EmailRegister.tsx
+++ b/packages/ui/src/containers/EmailForm/EmailRegister.tsx
@@ -1,5 +1,9 @@
+import { SignInIdentifier } from '@logto/schemas';
+
+import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
+import { UserFlow } from '@/types';
+
 import EmailForm from './EmailForm';
-import useEmailRegister from './use-email-register';
 
 type Props = {
   className?: string;
@@ -8,7 +12,10 @@ type Props = {
 };
 
 const EmailRegister = (props: Props) => {
-  const { onSubmit, errorMessage, clearErrorMessage } = useEmailRegister();
+  const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
+    UserFlow.register,
+    SignInIdentifier.Email
+  );
 
   return (
     <EmailForm
diff --git a/packages/ui/src/containers/EmailForm/EmailSignIn.tsx b/packages/ui/src/containers/EmailForm/EmailSignIn.tsx
index 0b8518fe1..60056539f 100644
--- a/packages/ui/src/containers/EmailForm/EmailSignIn.tsx
+++ b/packages/ui/src/containers/EmailForm/EmailSignIn.tsx
@@ -1,16 +1,28 @@
-import EmailForm from './EmailForm';
-import type { MethodProps } from './use-email-sign-in';
-import useEmailSignIn from './use-email-sign-in';
+import type { SignIn } from '@logto/schemas';
+import { SignInIdentifier } from '@logto/schemas';
 
-type Props = {
+import useContinueSignInWithPassword from '@/hooks/use-continue-sign-in-with-password';
+import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
+import type { ArrayElement } from '@/types';
+import { UserFlow } from '@/types';
+
+import EmailForm from './EmailForm';
+
+type FormProps = {
   className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   autoFocus?: boolean;
-  signInMethod: MethodProps;
 };
 
-const EmailSignIn = ({ signInMethod, ...props }: Props) => {
-  const { onSubmit, errorMessage, clearErrorMessage } = useEmailSignIn(signInMethod);
+type Props = FormProps & {
+  signInMethod: ArrayElement<SignIn['methods']>;
+};
+
+const EmailSignInWithPasscode = (props: FormProps) => {
+  const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
+    UserFlow.signIn,
+    SignInIdentifier.Email
+  );
 
   return (
     <EmailForm
@@ -23,4 +35,26 @@ const EmailSignIn = ({ signInMethod, ...props }: Props) => {
   );
 };
 
+const EmailSignInWithPassword = (props: FormProps) => {
+  const onSubmit = useContinueSignInWithPassword(SignInIdentifier.Email);
+
+  return <EmailForm onSubmit={onSubmit} {...props} submitButtonText="action.sign_in" />;
+};
+
+const EmailSignIn = ({ signInMethod, ...props }: Props) => {
+  const { password, isPasswordPrimary, verificationCode } = signInMethod;
+
+  // Continue with password
+  if (password && (isPasswordPrimary || !verificationCode)) {
+    return <EmailSignInWithPassword {...props} />;
+  }
+
+  // Send passcode
+  if (verificationCode) {
+    return <EmailSignInWithPasscode {...props} />;
+  }
+
+  return null;
+};
+
 export default EmailSignIn;
diff --git a/packages/ui/src/containers/EmailForm/use-email-sign-in.ts b/packages/ui/src/containers/EmailForm/use-email-sign-in.ts
deleted file mode 100644
index bb51d967a..000000000
--- a/packages/ui/src/containers/EmailForm/use-email-sign-in.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { SignIn } from '@logto/schemas';
-import { SignInIdentifier } from '@logto/schemas';
-import { useState, useMemo, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { sendSignInEmailPasscode } from '@/apis/sign-in';
-import type { ErrorHandlers } from '@/hooks/use-api';
-import useApi from '@/hooks/use-api';
-import type { ArrayElement } from '@/types';
-import { UserFlow } from '@/types';
-
-export type MethodProps = ArrayElement<SignIn['methods']>;
-
-const useEmailSignIn = ({ password, isPasswordPrimary, verificationCode }: MethodProps) => {
-  const [errorMessage, setErrorMessage] = useState<string>();
-  const navigate = useNavigate();
-
-  const errorHandlers: ErrorHandlers = useMemo(
-    () => ({
-      'guard.invalid_input': () => {
-        setErrorMessage('invalid_email');
-      },
-    }),
-    []
-  );
-
-  const clearErrorMessage = useCallback(() => {
-    setErrorMessage('');
-  }, []);
-
-  const { run: asyncSendSignInEmailPasscode } = useApi(sendSignInEmailPasscode, errorHandlers);
-
-  const navigateToPasswordPage = useCallback(
-    (email: string) => {
-      navigate(
-        {
-          pathname: `/${UserFlow.signIn}/${SignInIdentifier.Email}/password`,
-          search: location.search,
-        },
-        { state: { email } }
-      );
-    },
-    [navigate]
-  );
-
-  const sendPasscode = useCallback(
-    async (email: string) => {
-      const result = await asyncSendSignInEmailPasscode(email);
-
-      if (!result) {
-        return;
-      }
-
-      navigate(
-        {
-          pathname: `/${UserFlow.signIn}/${SignInIdentifier.Email}/passcode-validation`,
-          search: location.search,
-        },
-        { state: { email } }
-      );
-    },
-    [asyncSendSignInEmailPasscode, navigate]
-  );
-
-  const onSubmit = useCallback(
-    async (email: string) => {
-      // Email Password SignIn Flow
-      if (password && (isPasswordPrimary || !verificationCode)) {
-        navigateToPasswordPage(email);
-
-        return;
-      }
-
-      // Email Passwordless SignIn Flow
-      if (verificationCode) {
-        await sendPasscode(email);
-      }
-    },
-    [isPasswordPrimary, navigateToPasswordPage, password, sendPasscode, verificationCode]
-  );
-
-  return {
-    errorMessage,
-    clearErrorMessage,
-    onSubmit,
-  };
-};
-
-export default useEmailSignIn;
diff --git a/packages/ui/src/containers/PasscodeValidation/index.test.tsx b/packages/ui/src/containers/PasscodeValidation/index.test.tsx
index 76d64aa3c..219212d4a 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.test.tsx
+++ b/packages/ui/src/containers/PasscodeValidation/index.test.tsx
@@ -1,3 +1,4 @@
+import { SignInIdentifier } from '@logto/schemas';
 import { act, fireEvent, waitFor } from '@testing-library/react';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -46,7 +47,7 @@ describe('<PasscodeValidation />', () => {
 
   it('render counter', () => {
     const { queryByText } = renderWithPageContext(
-      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
     );
 
     expect(queryByText('description.resend_after_seconds')).not.toBeNull();
@@ -60,7 +61,7 @@ describe('<PasscodeValidation />', () => {
 
   it('fire resend event', async () => {
     const { getByText } = renderWithPageContext(
-      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
     );
     act(() => {
       jest.advanceTimersByTime(1e3 * 60);
@@ -76,7 +77,7 @@ describe('<PasscodeValidation />', () => {
 
   it('fire validate passcode event', async () => {
     const { container } = renderWithPageContext(
-      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
     );
     const inputs = container.querySelectorAll('input');
 
@@ -95,7 +96,7 @@ describe('<PasscodeValidation />', () => {
     verifyPasscodeApi.mockImplementationOnce(() => ({ redirectTo: 'foo.com' }));
 
     const { container } = renderWithPageContext(
-      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method={SignInIdentifier.Email} target={email} />
     );
 
     const inputs = container.querySelectorAll('input');
@@ -119,7 +120,11 @@ describe('<PasscodeValidation />', () => {
     verifyPasscodeApi.mockImplementationOnce(() => ({ success: true }));
 
     const { container } = renderWithPageContext(
-      <PasscodeValidation type={UserFlow.forgotPassword} method="email" target={email} />
+      <PasscodeValidation
+        type={UserFlow.forgotPassword}
+        method={SignInIdentifier.Email}
+        target={email}
+      />
     );
 
     const inputs = container.querySelectorAll('input');
diff --git a/packages/ui/src/containers/PasscodeValidation/index.tsx b/packages/ui/src/containers/PasscodeValidation/index.tsx
index 7ddcee53a..307f13647 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.tsx
+++ b/packages/ui/src/containers/PasscodeValidation/index.tsx
@@ -1,3 +1,4 @@
+import type { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useState, useEffect, useContext, useCallback, useMemo } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
@@ -19,7 +20,7 @@ import usePasscodeValidationErrorHandler from './use-passcode-validation-error-h
 
 type Props = {
   type: UserFlow;
-  method: 'email' | 'sms';
+  method: SignInIdentifier.Email | SignInIdentifier.Sms;
   target: string;
   className?: string;
 };
diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
index 02a5026e5..27fc0c8df 100644
--- a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
@@ -1,3 +1,4 @@
+import { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -55,7 +56,7 @@ const EmailPasswordless = ({
     [setFieldErrors]
   );
 
-  const sendPasscode = getSendPasscodeApi(type, 'email');
+  const sendPasscode = getSendPasscodeApi(type, SignInIdentifier.Email);
   const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
 
   const onSubmitHandler = useCallback(
diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
index 18df610fd..d6b76c591 100644
--- a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
@@ -1,3 +1,4 @@
+import { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,7 +57,7 @@ const PhonePasswordless = ({
     [setFieldErrors]
   );
 
-  const sendPasscode = getSendPasscodeApi(type, 'sms');
+  const sendPasscode = getSendPasscodeApi(type, SignInIdentifier.Sms);
   const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
 
   const phoneNumberValidation = useCallback(
diff --git a/packages/ui/src/containers/PhoneForm/PhoneForm.tsx b/packages/ui/src/containers/PhoneForm/PhoneForm.tsx
index d094490dd..c07d0e9bc 100644
--- a/packages/ui/src/containers/PhoneForm/PhoneForm.tsx
+++ b/packages/ui/src/containers/PhoneForm/PhoneForm.tsx
@@ -23,7 +23,7 @@ type Props = {
   errorMessage?: string;
   submitButtonText?: TFuncKey;
   clearErrorMessage?: () => void;
-  onSubmit: (phone: string) => Promise<void>;
+  onSubmit: (phone: string) => Promise<void> | void;
 };
 
 type FieldState = {
diff --git a/packages/ui/src/containers/PhoneForm/SmsRegister.tsx b/packages/ui/src/containers/PhoneForm/SmsRegister.tsx
index 0435eed76..f05a87617 100644
--- a/packages/ui/src/containers/PhoneForm/SmsRegister.tsx
+++ b/packages/ui/src/containers/PhoneForm/SmsRegister.tsx
@@ -1,5 +1,9 @@
+import { SignInIdentifier } from '@logto/schemas';
+
+import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
+import { UserFlow } from '@/types';
+
 import PhoneForm from './PhoneForm';
-import useSmsRegister from './use-sms-register';
 
 type Props = {
   className?: string;
@@ -8,7 +12,10 @@ type Props = {
 };
 
 const SmsRegister = (props: Props) => {
-  const { onSubmit, errorMessage, clearErrorMessage } = useSmsRegister();
+  const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
+    UserFlow.register,
+    SignInIdentifier.Sms
+  );
 
   return (
     <PhoneForm
diff --git a/packages/ui/src/containers/PhoneForm/SmsSignIn.tsx b/packages/ui/src/containers/PhoneForm/SmsSignIn.tsx
index d0f403dd3..031ec27b1 100644
--- a/packages/ui/src/containers/PhoneForm/SmsSignIn.tsx
+++ b/packages/ui/src/containers/PhoneForm/SmsSignIn.tsx
@@ -1,16 +1,28 @@
-import PhoneForm from './PhoneForm';
-import type { MethodProps } from './use-sms-sign-in';
-import useSmsSignIn from './use-sms-sign-in';
+import type { SignIn } from '@logto/schemas';
+import { SignInIdentifier } from '@logto/schemas';
 
-type Props = {
+import useContinueSignInWithPassword from '@/hooks/use-continue-sign-in-with-password';
+import usePasswordlessSendCode from '@/hooks/use-passwordless-send-code';
+import type { ArrayElement } from '@/types';
+import { UserFlow } from '@/types';
+
+import PhoneForm from './PhoneForm';
+
+type FormProps = {
   className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   autoFocus?: boolean;
-  signInMethod: MethodProps;
 };
 
-const SmsSignIn = ({ signInMethod, ...props }: Props) => {
-  const { onSubmit, errorMessage, clearErrorMessage } = useSmsSignIn(signInMethod);
+type Props = FormProps & {
+  signInMethod: ArrayElement<SignIn['methods']>;
+};
+
+const SmsSignInWithPasscode = (props: FormProps) => {
+  const { onSubmit, errorMessage, clearErrorMessage } = usePasswordlessSendCode(
+    UserFlow.signIn,
+    SignInIdentifier.Sms
+  );
 
   return (
     <PhoneForm
@@ -23,4 +35,26 @@ const SmsSignIn = ({ signInMethod, ...props }: Props) => {
   );
 };
 
+const SmsSignInWithPassword = (props: FormProps) => {
+  const onSubmit = useContinueSignInWithPassword(SignInIdentifier.Sms);
+
+  return <PhoneForm onSubmit={onSubmit} {...props} submitButtonText="action.sign_in" />;
+};
+
+const SmsSignIn = ({ signInMethod, ...props }: Props) => {
+  const { password, isPasswordPrimary, verificationCode } = signInMethod;
+
+  // Continue with password
+  if (password && (isPasswordPrimary || !verificationCode)) {
+    return <SmsSignInWithPassword {...props} />;
+  }
+
+  // Send passcode
+  if (verificationCode) {
+    return <SmsSignInWithPasscode {...props} />;
+  }
+
+  return null;
+};
+
 export default SmsSignIn;
diff --git a/packages/ui/src/containers/PhoneForm/use-sms-register.ts b/packages/ui/src/containers/PhoneForm/use-sms-register.ts
deleted file mode 100644
index debf0d8c2..000000000
--- a/packages/ui/src/containers/PhoneForm/use-sms-register.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { SignInIdentifier } from '@logto/schemas';
-import { useState, useMemo, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { sendRegisterSmsPasscode } from '@/apis/register';
-import type { ErrorHandlers } from '@/hooks/use-api';
-import useApi from '@/hooks/use-api';
-import { UserFlow } from '@/types';
-
-const useSmsRegister = () => {
-  const [errorMessage, setErrorMessage] = useState<string>();
-  const navigate = useNavigate();
-
-  const errorHandlers: ErrorHandlers = useMemo(
-    () => ({
-      'guard.invalid_input': () => {
-        setErrorMessage('invalid_phone');
-      },
-    }),
-    []
-  );
-
-  const clearErrorMessage = useCallback(() => {
-    setErrorMessage('');
-  }, []);
-
-  const { run: asyncSendRegisterSmsPasscode } = useApi(sendRegisterSmsPasscode, errorHandlers);
-
-  const onSubmit = useCallback(
-    async (phone: string) => {
-      const result = await asyncSendRegisterSmsPasscode(phone);
-
-      if (!result) {
-        return;
-      }
-
-      navigate(
-        {
-          pathname: `/${UserFlow.register}/${SignInIdentifier.Sms}/passcode-validation`,
-          search: location.search,
-        },
-        { state: { phone } }
-      );
-    },
-    [asyncSendRegisterSmsPasscode, navigate]
-  );
-
-  return {
-    errorMessage,
-    clearErrorMessage,
-    onSubmit,
-  };
-};
-
-export default useSmsRegister;
diff --git a/packages/ui/src/containers/PhoneForm/use-sms-sign-in.ts b/packages/ui/src/containers/PhoneForm/use-sms-sign-in.ts
deleted file mode 100644
index 89817c932..000000000
--- a/packages/ui/src/containers/PhoneForm/use-sms-sign-in.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { SignIn } from '@logto/schemas';
-import { SignInIdentifier } from '@logto/schemas';
-import { useState, useMemo, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { sendSignInSmsPasscode } from '@/apis/sign-in';
-import type { ErrorHandlers } from '@/hooks/use-api';
-import useApi from '@/hooks/use-api';
-import type { ArrayElement } from '@/types';
-import { UserFlow } from '@/types';
-
-export type MethodProps = ArrayElement<SignIn['methods']>;
-
-const useEmailSignIn = ({ password, isPasswordPrimary, verificationCode }: MethodProps) => {
-  const [errorMessage, setErrorMessage] = useState<string>();
-  const navigate = useNavigate();
-
-  const errorHandlers: ErrorHandlers = useMemo(
-    () => ({
-      'guard.invalid_input': () => {
-        setErrorMessage('invalid_phone');
-      },
-    }),
-    []
-  );
-
-  const clearErrorMessage = useCallback(() => {
-    setErrorMessage('');
-  }, []);
-
-  const { run: asyncSendSignInEmailPasscode } = useApi(sendSignInSmsPasscode, errorHandlers);
-
-  const navigateToPasswordPage = useCallback(
-    (phone: string) => {
-      navigate(
-        {
-          pathname: `/${UserFlow.signIn}/${SignInIdentifier.Sms}/password`,
-          search: location.search,
-        },
-        { state: { phone } }
-      );
-    },
-    [navigate]
-  );
-
-  const sendPasscode = useCallback(
-    async (phone: string) => {
-      const result = await asyncSendSignInEmailPasscode(phone);
-
-      if (!result) {
-        return;
-      }
-
-      navigate(
-        {
-          pathname: `/${UserFlow.signIn}/${SignInIdentifier.Sms}/passcode-validation`,
-          search: location.search,
-        },
-        { state: { phone } }
-      );
-    },
-    [asyncSendSignInEmailPasscode, navigate]
-  );
-
-  const onSubmit = useCallback(
-    async (phone: string) => {
-      // Sms Password SignIn Flow
-      if (password && (isPasswordPrimary || !verificationCode)) {
-        navigateToPasswordPage(phone);
-
-        return;
-      }
-
-      // Sms Passwordless SignIn Flow
-      if (verificationCode) {
-        await sendPasscode(phone);
-      }
-    },
-    [isPasswordPrimary, navigateToPasswordPage, password, sendPasscode, verificationCode]
-  );
-
-  return {
-    errorMessage,
-    clearErrorMessage,
-    onSubmit,
-  };
-};
-
-export default useEmailSignIn;
diff --git a/packages/ui/src/hooks/use-continue-sign-in-with-password.ts b/packages/ui/src/hooks/use-continue-sign-in-with-password.ts
new file mode 100644
index 000000000..87c869155
--- /dev/null
+++ b/packages/ui/src/hooks/use-continue-sign-in-with-password.ts
@@ -0,0 +1,20 @@
+import { SignInIdentifier } from '@logto/schemas';
+import { useNavigate } from 'react-router-dom';
+
+import { UserFlow } from '@/types';
+
+const useContinueSignInWithPassword = (method: SignInIdentifier.Email | SignInIdentifier.Sms) => {
+  const navigate = useNavigate();
+
+  return (value: string) => {
+    navigate(
+      {
+        pathname: `/${UserFlow.signIn}/${method}/password`,
+        search: location.search,
+      },
+      { state: method === SignInIdentifier.Email ? { email: value } : { phone: value } }
+    );
+  };
+};
+
+export default useContinueSignInWithPassword;
diff --git a/packages/ui/src/containers/EmailForm/use-email-register.ts b/packages/ui/src/hooks/use-passwordless-send-code.ts
similarity index 51%
rename from packages/ui/src/containers/EmailForm/use-email-register.ts
rename to packages/ui/src/hooks/use-passwordless-send-code.ts
index 4e9e61726..49f32d3fd 100644
--- a/packages/ui/src/containers/EmailForm/use-email-register.ts
+++ b/packages/ui/src/hooks/use-passwordless-send-code.ts
@@ -2,33 +2,38 @@ import { SignInIdentifier } from '@logto/schemas';
 import { useState, useMemo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { sendRegisterEmailPasscode } from '@/apis/register';
+import { getSendPasscodeApi } from '@/apis/utils';
 import type { ErrorHandlers } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
-import { UserFlow } from '@/types';
+import type { UserFlow } from '@/types';
 
-const useEmailRegister = () => {
+const usePasswordlessSendCode = (
+  flow: UserFlow,
+  method: SignInIdentifier.Email | SignInIdentifier.Sms
+) => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const navigate = useNavigate();
 
   const errorHandlers: ErrorHandlers = useMemo(
     () => ({
       'guard.invalid_input': () => {
-        setErrorMessage('invalid_email');
+        setErrorMessage(method === SignInIdentifier.Email ? 'invalid_email' : 'invalid_phone');
       },
     }),
-    []
+    [method]
   );
 
   const clearErrorMessage = useCallback(() => {
     setErrorMessage('');
   }, []);
 
-  const { run: asyncSendRegisterEmailPasscode } = useApi(sendRegisterEmailPasscode, errorHandlers);
+  const api = getSendPasscodeApi(flow, method);
+
+  const { run: asyncSendPasscode } = useApi(api, errorHandlers);
 
   const onSubmit = useCallback(
-    async (email: string) => {
-      const result = await asyncSendRegisterEmailPasscode(email);
+    async (value: string) => {
+      const result = await asyncSendPasscode(value);
 
       if (!result) {
         return;
@@ -36,13 +41,13 @@ const useEmailRegister = () => {
 
       navigate(
         {
-          pathname: `/${UserFlow.register}/${SignInIdentifier.Email}/passcode-validation`,
+          pathname: `/${flow}/${method}/passcode-validation`,
           search: location.search,
         },
-        { state: { email } }
+        { state: method === SignInIdentifier.Email ? { email: value } : { phone: value } }
       );
     },
-    [asyncSendRegisterEmailPasscode, navigate]
+    [asyncSendPasscode, flow, method, navigate]
   );
 
   return {
@@ -52,4 +57,4 @@ const useEmailRegister = () => {
   };
 };
 
-export default useEmailRegister;
+export default usePasswordlessSendCode;