feat(experience): always include app_id in search params on router navigation (#7950)

* feat(experience): always include app_id in search params on router navigation

* fix: tests

Author: charIeszhao

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

@@ -442,7 +442,10 @@ describe('<IdentifierRegisterForm />', () => {
       });
 
       await waitFor(() => {
-        expect(mockedNavigate).toBeCalledWith(`/${experience.routes.sso}/connectors`);
+        expect(mockedNavigate).toBeCalledWith(
+          { pathname: `/${experience.routes.sso}/connectors` },
+          undefined
+        );
       });
     });
   });

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

@@ -1,18 +1,18 @@
 import { InteractionEvent } from '@logto/schemas';
 import { useState, useCallback, useMemo, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import CaptchaContext from '@/Providers/CaptchaContextProvider/CaptchaContext';
 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 useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSubmitInteractionErrorHandler from '@/hooks/use-submit-interaction-error-handler';
 
 const useRegisterWithUsername = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const redirectTo = useGlobalRedirectTo();
   const { executeCaptcha } = useContext(CaptchaContext);
 

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

@@ -128,7 +128,7 @@ describe('IdentifierSignInForm', () => {
         if (identifier === SignInIdentifier.Username) {
           await waitFor(() => {
             expect(sendVerificationCodeApi).not.toBeCalled();
-            expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' });
+            expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' }, undefined);
           });
 
           return;
@@ -143,7 +143,7 @@ describe('IdentifierSignInForm', () => {
         if (password && (isPasswordPrimary || !verificationCode)) {
           await waitFor(() => {
             expect(sendVerificationCodeApi).not.toBeCalled();
-            expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' });
+            expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' }, undefined);
           });
 
           return;
@@ -195,7 +195,7 @@ describe('IdentifierSignInForm', () => {
 
       await waitFor(() => {
         expect(getSingleSignOnConnectorsMock).not.toBeCalled();
-        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' });
+        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' }, undefined);
       });
     });
 
@@ -222,7 +222,7 @@ describe('IdentifierSignInForm', () => {
 
       await waitFor(() => {
         expect(getSingleSignOnConnectorsMock).not.toBeCalled();
-        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' });
+        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' }, undefined);
       });
     });
 
@@ -256,7 +256,7 @@ describe('IdentifierSignInForm', () => {
       });
 
       await waitFor(() => {
-        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' });
+        expect(mockedNavigate).toBeCalledWith({ pathname: '/sign-in/password' }, undefined);
       });
     });
 
@@ -294,7 +294,10 @@ describe('IdentifierSignInForm', () => {
       });
 
       await waitFor(() => {
-        expect(mockedNavigate).toBeCalledWith(`/${experience.routes.sso}/connectors`);
+        expect(mockedNavigate).toBeCalledWith(
+          { pathname: `/${experience.routes.sso}/connectors` },
+          undefined
+        );
       });
     });
   });

packages/experience/src/components/IdentifierSignInForm/use-on-submit.ts

@@ -1,16 +1,16 @@
 import type { SignIn } from '@logto/schemas';
 import { SignInIdentifier } from '@logto/schemas';
 import { useCallback, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import useCheckSingleSignOn from '@/hooks/use-check-single-sign-on';
+import useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import useSendVerificationCode from '@/hooks/use-send-verification-code';
 import { useSieMethods } from '@/hooks/use-sie';
 import { UserFlow } from '@/types';
 
 const useOnSubmit = (signInMethods: SignIn['methods']) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const { ssoConnectors } = useSieMethods();
   const { onSubmit: checkSingleSignOn } = useCheckSingleSignOn();
   const { setIdentifierInputValue } = useContext(UserInteractionContext);

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

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 import ArrowPrev from '@/assets/icons/arrow-prev.svg?react';
 import NavClose from '@/assets/icons/nav-close.svg?react';
+import useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import FlipOnRtl from '../FlipOnRtl';
@@ -20,7 +20,7 @@ type Props = {
 };
 
 const NavBar = ({ title, type = 'back', isHidden, onClose, onSkip }: Props) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const { t } = useTranslation();
 
   const isClosable = type === 'close';

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

@@ -267,7 +267,10 @@ describe('UsernamePasswordSignInForm', () => {
     });
 
     await waitFor(() => {
-      expect(mockedNavigate).toBeCalledWith(`/${experience.routes.sso}/connectors`);
+      expect(mockedNavigate).toBeCalledWith(
+        { pathname: `/${experience.routes.sso}/connectors` },
+        undefined
+      );
     });
   });
 

packages/experience/src/containers/ForgotPasswordLink/index.tsx

@@ -1,9 +1,9 @@
 import type { SignInIdentifier } from '@logto/schemas';
 import { useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import TextLink from '@/components/TextLink';
+import useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import { UserFlow } from '@/types';
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
 };
 
 const ForgotPasswordLink = ({ className, ...identifierData }: Props) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const { setForgotPasswordIdentifierInputValue } = useContext(UserInteractionContext);
 
   return (

packages/experience/src/containers/MfaFactorList/index.tsx

@@ -1,8 +1,8 @@
 import { MfaFactor, SignInIdentifier } from '@logto/schemas';
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import MfaFactorButton from '@/components/Button/MfaFactorButton';
+import useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import useSendMfaVerificationCode from '@/hooks/use-send-mfa-verification-code';
 import useStartTotpBinding from '@/hooks/use-start-totp-binding';
 import useStartWebAuthnProcessing from '@/hooks/use-start-webauthn-processing';
@@ -19,7 +19,7 @@ type Props = {
 const MfaFactorList = ({ flow, flowState }: Props) => {
   const startTotpBinding = useStartTotpBinding();
   const startWebAuthnProcessing = useStartWebAuthnProcessing();
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const { availableFactors } = flowState;
   const { onSubmit: sendMfaVerificationCode } = useSendMfaVerificationCode();
 

packages/experience/src/containers/VerificationCode/use-continue-flow-code-verification.ts

@@ -1,7 +1,7 @@
 import type { VerificationCodeIdentifier } from '@logto/schemas';
 import { InteractionEvent, MfaFactor, VerificationType } from '@logto/schemas';
 import { useCallback, useContext, useMemo } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import { validate } from 'superstruct';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
@@ -12,6 +12,7 @@ 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 useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSubmitInteractionErrorHandler from '@/hooks/use-submit-interaction-error-handler';
 import useToast from '@/hooks/use-toast';
@@ -30,7 +31,7 @@ const useContinueFlowCodeVerification = (
 ) => {
   const [searchParameters] = useSearchParams();
   const redirectTo = useGlobalRedirectTo();
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
 
   const { state } = useLocation();
   const { verificationIdsMap } = useContext(UserInteractionContext);

packages/experience/src/containers/VerificationCode/use-forgot-password-flow-code-verification.ts

@@ -1,11 +1,11 @@
 import type { VerificationCodeIdentifier } from '@logto/schemas';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { identifyWithVerificationCode } 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 useNavigateWithPreservedSearchParams from '@/hooks/use-navigate-with-preserved-search-params';
 import { UserFlow } from '@/types';
 
 import useGeneralVerificationCodeErrorHandler from './use-general-verification-code-error-handler';
@@ -16,7 +16,7 @@ const useForgotPasswordFlowCodeVerification = (
   verificationId: string,
   errorCallback?: () => void
 ) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateWithPreservedSearchParams();
   const handleError = useErrorHandler();
   const verifyVerificationCode = useApi(identifyWithVerificationCode);