fix(ui): fix register page other methods link bug (#2288)

packages/ui/src/apis/api.test.ts

@@ -1,3 +1,5 @@
+import { UserFlow } from '@/types';
+
 import {
   verifyForgotPasswordEmailPasscode,
   verifyForgotPasswordSmsPasscode,
@@ -8,13 +10,15 @@ import { getVerifyPasscodeApi } from './utils';
 
 describe('api', () => {
   it('getVerifyPasscodeApi', () => {
-    expect(getVerifyPasscodeApi('register', 'sms')).toBe(verifyRegisterSmsPasscode);
-    expect(getVerifyPasscodeApi('register', 'email')).toBe(verifyRegisterEmailPasscode);
-    expect(getVerifyPasscodeApi('sign-in', 'sms')).toBe(verifySignInSmsPasscode);
-    expect(getVerifyPasscodeApi('sign-in', 'email')).toBe(verifySignInEmailPasscode);
-    expect(getVerifyPasscodeApi('forgot-password', 'email')).toBe(
+    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(
       verifyForgotPasswordEmailPasscode
     );
-    expect(getVerifyPasscodeApi('forgot-password', 'sms')).toBe(verifyForgotPasswordSmsPasscode);
+    expect(getVerifyPasscodeApi(UserFlow.forgotPassword, 'sms')).toBe(
+      verifyForgotPasswordSmsPasscode
+    );
   });
 });

packages/ui/src/apis/utils.ts

@@ -1,4 +1,4 @@
-import type { UserFlow } from '@/types';
+import { UserFlow } from '@/types';
 
 import {
   sendForgotPasswordEmailPasscode,
@@ -25,23 +25,23 @@ export const getSendPasscodeApi = (
   type: UserFlow,
   method: PasscodeChannel
 ): ((_address: string) => Promise<{ success: boolean }>) => {
-  if (type === 'forgot-password' && method === 'email') {
+  if (type === UserFlow.forgotPassword && method === 'email') {
     return sendForgotPasswordEmailPasscode;
   }
 
-  if (type === 'forgot-password' && method === 'sms') {
+  if (type === UserFlow.forgotPassword && method === 'sms') {
     return sendForgotPasswordSmsPasscode;
   }
 
-  if (type === 'sign-in' && method === 'email') {
+  if (type === UserFlow.signIn && method === 'email') {
     return sendSignInEmailPasscode;
   }
 
-  if (type === 'sign-in' && method === 'sms') {
+  if (type === UserFlow.signIn && method === 'sms') {
     return sendSignInSmsPasscode;
   }
 
-  if (type === 'register' && method === 'email') {
+  if (type === UserFlow.register && method === 'email') {
     return sendRegisterEmailPasscode;
   }
 
@@ -56,23 +56,23 @@ export const getVerifyPasscodeApi = (
   code: string,
   socialToBind?: string
 ) => Promise<{ redirectTo?: string; success?: boolean }>) => {
-  if (type === 'forgot-password' && method === 'email') {
+  if (type === UserFlow.forgotPassword && method === 'email') {
     return verifyForgotPasswordEmailPasscode;
   }
 
-  if (type === 'forgot-password' && method === 'sms') {
+  if (type === UserFlow.forgotPassword && method === 'sms') {
     return verifyForgotPasswordSmsPasscode;
   }
 
-  if (type === 'sign-in' && method === 'email') {
+  if (type === UserFlow.signIn && method === 'email') {
     return verifySignInEmailPasscode;
   }
 
-  if (type === 'sign-in' && method === 'sms') {
+  if (type === UserFlow.signIn && method === 'sms') {
     return verifySignInSmsPasscode;
   }
 
-  if (type === 'register' && method === 'email') {
+  if (type === UserFlow.register && method === 'email') {
     return verifyRegisterEmailPasscode;
   }
 

packages/ui/src/containers/OtherMethodsLink/index.tsx

@@ -7,11 +7,13 @@ import { useTranslation } from 'react-i18next';
 import reactStringReplace from 'react-string-replace';
 
 import TextLink from '@/components/TextLink';
+import type { UserFlow } from '@/types';
 
 import * as styles from './index.module.scss';
 
 type Props = {
   methods: SignInIdentifier[];
+  flow: Exclude<UserFlow, 'forgot-password'>;
   // Allows social page to pass additional query params to the sign-in pages
   search?: string;
   className?: string;
@@ -26,7 +28,7 @@ const SignInMethodsKeyMap: {
   [SignInIdentifier.Sms]: 'phone_number',
 };
 
-const SignInMethodsLink = ({ methods, template, search, className }: Props) => {
+const OtherMethodsLink = ({ methods, template, search, flow, className }: Props) => {
   const { t } = useTranslation();
 
   const methodsLink = useMemo(
@@ -36,10 +38,10 @@ const SignInMethodsLink = ({ methods, template, search, className }: Props) => {
           key={identifier}
           className={styles.signInMethodLink}
           text={`input.${SignInMethodsKeyMap[identifier]}`}
-          to={{ pathname: `/sign-in/${identifier}`, search }}
+          to={{ pathname: `/${flow}/${identifier}`, search }}
         />
       )),
-    [methods, search]
+    [flow, methods, search]
   );
 
   if (methodsLink.length === 0) {
@@ -60,4 +62,4 @@ const SignInMethodsLink = ({ methods, template, search, className }: Props) => {
   return <div className={classNames(styles.textLink, className)}>{textWithLink}</div>;
 };
 
-export default SignInMethodsLink;
+export default OtherMethodsLink;

packages/ui/src/containers/PasscodeValidation/index.test.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, waitFor } from '@testing-library/react';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
+import { UserFlow } from '@/types';
 
 import PasscodeValidation from '.';
 
@@ -45,7 +46,7 @@ describe('<PasscodeValidation />', () => {
 
   it('render counter', () => {
     const { queryByText } = renderWithPageContext(
-      <PasscodeValidation type="sign-in" method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
     );
 
     expect(queryByText('description.resend_after_seconds')).not.toBeNull();
@@ -59,7 +60,7 @@ describe('<PasscodeValidation />', () => {
 
   it('fire resend event', async () => {
     const { getByText } = renderWithPageContext(
-      <PasscodeValidation type="sign-in" method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
     );
     act(() => {
       jest.advanceTimersByTime(1e3 * 60);
@@ -75,7 +76,7 @@ describe('<PasscodeValidation />', () => {
 
   it('fire validate passcode event', async () => {
     const { container } = renderWithPageContext(
-      <PasscodeValidation type="sign-in" method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
     );
     const inputs = container.querySelectorAll('input');
 
@@ -94,7 +95,7 @@ describe('<PasscodeValidation />', () => {
     verifyPasscodeApi.mockImplementationOnce(() => ({ redirectTo: 'foo.com' }));
 
     const { container } = renderWithPageContext(
-      <PasscodeValidation type="sign-in" method="email" target={email} />
+      <PasscodeValidation type={UserFlow.signIn} method="email" target={email} />
     );
 
     const inputs = container.querySelectorAll('input');
@@ -118,7 +119,7 @@ describe('<PasscodeValidation />', () => {
     verifyPasscodeApi.mockImplementationOnce(() => ({ success: true }));
 
     const { container } = renderWithPageContext(
-      <PasscodeValidation type="forgot-password" method="email" target={email} />
+      <PasscodeValidation type={UserFlow.forgotPassword} method="email" target={email} />
     );
 
     const inputs = container.querySelectorAll('input');

packages/ui/src/containers/PasscodeValidation/use-passcode-validation-error-handler.ts

@@ -1,4 +1,4 @@
-import type { UserFlow } from '@/types';
+import { UserFlow } from '@/types';
 
 import useForgotPasswordWithEmailErrorHandler from './use-forgot-password-with-email-error-handler';
 import useForgotPasswordWithSmsErrorHandler from './use-forgot-password-with-sms-error-handler';
@@ -10,23 +10,23 @@ import useRegisterWithEmailErrorHandler from './user-register-with-email-error-h
 type Method = 'email' | 'sms';
 
 const getPasscodeValidationErrorHandlersByFlowAndMethod = (flow: UserFlow, method: Method) => {
-  if (flow === 'sign-in' && method === 'email') {
+  if (flow === UserFlow.signIn && method === 'email') {
     return useSignInWithEmailErrorHandler;
   }
 
-  if (flow === 'sign-in' && method === 'sms') {
+  if (flow === UserFlow.signIn && method === 'sms') {
     return useSignInWithSmsErrorHandler;
   }
 
-  if (flow === 'register' && method === 'email') {
+  if (flow === UserFlow.register && method === 'email') {
     return useRegisterWithEmailErrorHandler;
   }
 
-  if (flow === 'register' && method === 'sms') {
+  if (flow === UserFlow.register && method === 'sms') {
     return useRegisterWithSmsErrorHandler;
   }
 
-  if (flow === 'forgot-password' && method === 'email') {
+  if (flow === UserFlow.forgotPassword && method === 'email') {
     return useForgotPasswordWithEmailErrorHandler;
   }
 

packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx

@@ -5,6 +5,7 @@ import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
 import { sendRegisterEmailPasscode } from '@/apis/register';
 import { sendSignInEmailPasscode } from '@/apis/sign-in';
+import { UserFlow } from '@/types';
 
 import EmailPasswordless from './EmailPasswordless';
 
@@ -19,7 +20,7 @@ describe('<EmailPasswordless/>', () => {
   test('render', () => {
     const { queryByText, container } = renderWithPageContext(
       <MemoryRouter>
-        <EmailPasswordless type="sign-in" />
+        <EmailPasswordless type={UserFlow.signIn} />
       </MemoryRouter>
     );
     expect(container.querySelector('input[name="email"]')).not.toBeNull();
@@ -30,7 +31,7 @@ describe('<EmailPasswordless/>', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" />
+          <EmailPasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -41,7 +42,7 @@ describe('<EmailPasswordless/>', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" hasTerms={false} />
+          <EmailPasswordless type={UserFlow.signIn} hasTerms={false} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -51,7 +52,7 @@ describe('<EmailPasswordless/>', () => {
   test('required email with error message', () => {
     const { queryByText, container, getByText } = renderWithPageContext(
       <MemoryRouter>
-        <EmailPasswordless type="sign-in" />
+        <EmailPasswordless type={UserFlow.signIn} />
       </MemoryRouter>
     );
     const submitButton = getByText('action.continue');
@@ -75,7 +76,7 @@ describe('<EmailPasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" />
+          <EmailPasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -101,7 +102,7 @@ describe('<EmailPasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" hasTerms={false} />
+          <EmailPasswordless type={UserFlow.signIn} hasTerms={false} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -127,7 +128,7 @@ describe('<EmailPasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="sign-in" />
+          <EmailPasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -155,7 +156,7 @@ describe('<EmailPasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <EmailPasswordless type="register" />
+          <EmailPasswordless type={UserFlow.register} />
         </SettingsProvider>
       </MemoryRouter>
     );

packages/ui/src/containers/Passwordless/PasswordlessSwitch.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import TextLink from '@/components/TextLink';
 
@@ -11,7 +11,6 @@ type Props = {
 const PasswordlessSwitch = ({ target, className }: Props) => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const navigate = useNavigate();
 
   const targetPathname = pathname.replace(target === 'email' ? 'sms' : 'email', target);
 

packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx

@@ -5,6 +5,7 @@ import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
 import { sendRegisterSmsPasscode } from '@/apis/register';
 import { sendSignInSmsPasscode } from '@/apis/sign-in';
+import { UserFlow } from '@/types';
 import { getDefaultCountryCallingCode } from '@/utils/country-code';
 
 import PhonePasswordless from './PhonePasswordless';
@@ -26,7 +27,7 @@ describe('<PhonePasswordless/>', () => {
   test('render', () => {
     const { queryByText, container } = renderWithPageContext(
       <MemoryRouter>
-        <PhonePasswordless type="sign-in" />
+        <PhonePasswordless type={UserFlow.signIn} />
       </MemoryRouter>
     );
     expect(container.querySelector('input[name="phone"]')).not.toBeNull();
@@ -37,7 +38,7 @@ describe('<PhonePasswordless/>', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" />
+          <PhonePasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -48,7 +49,7 @@ describe('<PhonePasswordless/>', () => {
     const { queryByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" hasTerms={false} />
+          <PhonePasswordless type={UserFlow.signIn} hasTerms={false} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -58,7 +59,7 @@ describe('<PhonePasswordless/>', () => {
   test('required phone with error message', () => {
     const { queryByText, container, getByText } = renderWithPageContext(
       <MemoryRouter>
-        <PhonePasswordless type="sign-in" />
+        <PhonePasswordless type={UserFlow.signIn} />
       </MemoryRouter>
     );
     const submitButton = getByText('action.continue');
@@ -82,7 +83,7 @@ describe('<PhonePasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" />
+          <PhonePasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -107,7 +108,7 @@ describe('<PhonePasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" hasTerms={false} />
+          <PhonePasswordless type={UserFlow.signIn} hasTerms={false} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -132,7 +133,7 @@ describe('<PhonePasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="sign-in" />
+          <PhonePasswordless type={UserFlow.signIn} />
         </SettingsProvider>
       </MemoryRouter>
     );
@@ -160,7 +161,7 @@ describe('<PhonePasswordless/>', () => {
     const { container, getByText } = renderWithPageContext(
       <MemoryRouter>
         <SettingsProvider>
-          <PhonePasswordless type="register" />
+          <PhonePasswordless type={UserFlow.register} />
         </SettingsProvider>
       </MemoryRouter>
     );

packages/ui/src/containers/SocialCreateAccount/index.test.tsx

@@ -20,7 +20,7 @@ jest.mock('@/apis/social', () => ({
 }));
 
 describe('SocialCreateAccount', () => {
-  it('should render secondary sigin-in methods', () => {
+  it('should render secondary sign-in methods', () => {
     const { queryByText } = renderWithPageContext(
       <SettingsProvider>
         <SocialCreateAccount connectorId="github" />

packages/ui/src/containers/SocialCreateAccount/index.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import Button from '@/components/Button';
 import useBindSocial from '@/hooks/use-bind-social';
 import { useSieMethods } from '@/hooks/use-sie';
-import { SearchParameters } from '@/types';
+import { SearchParameters, UserFlow } from '@/types';
 import { queryStringify } from '@/utils';
 
-import SignInMethodsLink from '../SignInMethodsLink';
+import OtherMethodsLink from '../OtherMethodsLink';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -42,9 +42,10 @@ const SocialCreateAccount = ({ connectorId, className }: Props) => {
           registerWithSocial(connectorId);
         }}
       />
-      <SignInMethodsLink
+      <OtherMethodsLink
         methods={signInMethods.map(({ identifier }) => identifier)}
         template="social_bind_with"
+        flow={UserFlow.signIn}
         className={styles.desc}
         search={queryStringify({ [SearchParameters.bindWithSocial]: connectorId })}
       />

packages/ui/src/pages/ForgotPassword/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
 import { EmailPasswordless, PhonePasswordless } from '@/containers/Passwordless';
 import ErrorPage from '@/pages/ErrorPage';
+import { UserFlow } from '@/types';
 
 type Props = {
   method?: string;
@@ -24,7 +25,7 @@ const ForgotPassword = () => {
       description={`description.reset_password_description_${method === 'email' ? 'email' : 'sms'}`}
     >
       {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-      <PasswordlessForm autoFocus hasSwitch type="forgot-password" hasTerms={false} />
+      <PasswordlessForm autoFocus hasSwitch type={UserFlow.forgotPassword} hasTerms={false} />
     </SecondaryPageWrapper>
   );
 };

packages/ui/src/pages/Register/Main.tsx

@@ -3,6 +3,7 @@ import type { SignInIdentifier, ConnectorMetadata } from '@logto/schemas';
 import { EmailPasswordless, PhonePasswordless } from '@/containers/Passwordless';
 import SocialSignIn from '@/containers/SocialSignIn';
 import UsernameRegister from '@/containers/UsernameRegister';
+import { UserFlow } from '@/types';
 
 import * as styles from './index.module.scss';
 
@@ -14,10 +15,10 @@ type Props = {
 const Main = ({ signUpMethod, socialConnectors }: Props) => {
   switch (signUpMethod) {
     case 'email':
-      return <EmailPasswordless type="register" className={styles.main} />;
+      return <EmailPasswordless type={UserFlow.register} className={styles.main} />;
 
     case 'sms':
-      return <PhonePasswordless type="register" className={styles.main} />;
+      return <PhonePasswordless type={UserFlow.register} className={styles.main} />;
 
     case 'username':
       return <UsernameRegister className={styles.main} />;

packages/ui/src/pages/Register/index.test.tsx

@@ -13,7 +13,7 @@ jest.mock('i18next', () => ({
 
 describe('<Register />', () => {
   test('renders with username as primary', async () => {
-    const { queryByText, queryAllByText, container } = renderWithPageContext(
+    const { queryAllByText, container } = renderWithPageContext(
       <SettingsProvider>
         <MemoryRouter>
           <Register />
@@ -61,6 +61,26 @@ describe('<Register />', () => {
     expect(queryByText('action.continue')).not.toBeNull();
   });
 
+  test('render with email and sms passwordless', async () => {
+    const { queryByText, container } = renderWithPageContext(
+      <SettingsProvider
+        settings={{
+          ...mockSignInExperienceSettings,
+          signUp: {
+            ...mockSignInExperienceSettings.signUp,
+            methods: [SignInIdentifier.Email, SignInIdentifier.Sms],
+          },
+        }}
+      >
+        <MemoryRouter>
+          <Register />
+        </MemoryRouter>
+      </SettingsProvider>
+    );
+    expect(queryByText('secondary.register_with')).not.toBeNull();
+    expect(container.querySelector('input[name="email"]')).not.toBeNull();
+  });
+
   test('renders with social as primary', async () => {
     const { queryAllByText } = renderWithPageContext(
       <SettingsProvider

packages/ui/src/pages/Register/index.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from 'react-i18next';
 import Divider from '@/components/Divider';
 import TextLink from '@/components/TextLink';
 import LandingPageContainer from '@/containers/LandingPageContainer';
-import SignInMethodsLink from '@/containers/SignInMethodsLink';
+import OtherMethodsLink from '@/containers/OtherMethodsLink';
 import { SocialSignInList } from '@/containers/SocialSignIn';
 import { useSieMethods } from '@/hooks/use-sie';
+import { UserFlow } from '@/types';
 
 import Main from './Main';
 import * as styles from './index.module.scss';
@@ -21,7 +22,11 @@ const Register = () => {
       {
         // Other create account methods
         otherMethods.length > 0 && (
-          <SignInMethodsLink methods={otherMethods} template="register_with" />
+          <OtherMethodsLink
+            methods={otherMethods}
+            template="register_with"
+            flow={UserFlow.register}
+          />
         )
       }
       {

packages/ui/src/pages/SecondaryRegister/index.tsx

@@ -5,6 +5,7 @@ import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
 import CreateAccount from '@/containers/CreateAccount';
 import { PhonePasswordless, EmailPasswordless } from '@/containers/Passwordless';
 import ErrorPage from '@/pages/ErrorPage';
+import { UserFlow } from '@/types';
 
 type Parameters = {
   method?: string;
@@ -16,12 +17,12 @@ const SecondaryRegister = () => {
   const registerForm = useMemo(() => {
     if (method === 'sms') {
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      return <PhonePasswordless autoFocus type="register" />;
+      return <PhonePasswordless autoFocus type={UserFlow.register} />;
     }
 
     if (method === 'email') {
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      return <EmailPasswordless autoFocus type="register" />;
+      return <EmailPasswordless autoFocus type={UserFlow.register} />;
     }
 
     // eslint-disable-next-line jsx-a11y/no-autofocus

packages/ui/src/pages/SecondarySignIn/index.tsx

@@ -5,6 +5,7 @@ import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
 import { PhonePasswordless, EmailPasswordless } from '@/containers/Passwordless';
 import UsernameSignIn from '@/containers/UsernameSignIn';
 import ErrorPage from '@/pages/ErrorPage';
+import { UserFlow } from '@/types';
 
 type Props = {
   method?: string;
@@ -16,12 +17,12 @@ const SecondarySignIn = () => {
   const signInForm = useMemo(() => {
     if (method === 'sms') {
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      return <PhonePasswordless autoFocus type="sign-in" />;
+      return <PhonePasswordless autoFocus type={UserFlow.signIn} />;
     }
 
     if (method === 'email') {
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      return <EmailPasswordless autoFocus type="sign-in" />;
+      return <EmailPasswordless autoFocus type={UserFlow.signIn} />;
     }
 
     // eslint-disable-next-line jsx-a11y/no-autofocus

packages/ui/src/pages/SignIn/Main.tsx

@@ -6,6 +6,7 @@ import PhonePassword from '@/containers/PhonePassword';
 import SocialSignIn from '@/containers/SocialSignIn';
 import UsernameSignIn from '@/containers/UsernameSignIn';
 import type { ArrayElement } from '@/types';
+import { UserFlow } from '@/types';
 
 import * as styles from './index.module.scss';
 
@@ -21,7 +22,7 @@ const Main = ({ signInMethod, socialConnectors }: Props) => {
         return <EmailPassword className={styles.main} />;
       }
 
-      return <EmailPasswordless type="sign-in" className={styles.main} />;
+      return <EmailPasswordless type={UserFlow.signIn} className={styles.main} />;
     }
 
     case 'sms': {
@@ -29,7 +30,7 @@ const Main = ({ signInMethod, socialConnectors }: Props) => {
         return <PhonePassword className={styles.main} />;
       }
 
-      return <PhonePasswordless type="sign-in" className={styles.main} />;
+      return <PhonePasswordless type={UserFlow.signIn} className={styles.main} />;
     }
 
     case 'username': {

packages/ui/src/pages/SignIn/index.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from 'react-i18next';
 import Divider from '@/components/Divider';
 import TextLink from '@/components/TextLink';
 import LandingPageContainer from '@/containers/LandingPageContainer';
-import SignInMethodsLink from '@/containers/SignInMethodsLink';
+import OtherMethodsLink from '@/containers/OtherMethodsLink';
 import { SocialSignInList } from '@/containers/SocialSignIn';
 import { useSieMethods } from '@/hooks/use-sie';
+import { UserFlow } from '@/types';
 
 import Main from './Main';
 import * as styles from './index.module.scss';
@@ -21,7 +22,7 @@ const SignIn = () => {
       {
         // Other sign-in methods
         otherMethods.length > 0 && (
-          <SignInMethodsLink methods={otherMethods} template="sign_in_with" />
+          <OtherMethodsLink methods={otherMethods} template="sign_in_with" flow={UserFlow.signIn} />
         )
       }
       {

packages/ui/src/types/index.ts

@@ -5,9 +5,11 @@ import type {
   SignInIdentifier,
 } from '@logto/schemas';
 
-export type UserFlow = 'sign-in' | 'register' | 'forgot-password';
-export type SignInMethod = 'username' | 'email' | 'sms' | 'social';
-export type LocalSignInMethod = Exclude<SignInMethod, 'social'>;
+export enum UserFlow {
+  signIn = 'sign-in',
+  register = 'register',
+  forgotPassword = 'forgot-password',
+}
 
 export enum SearchParameters {
   bindWithSocial = 'bind_with',