fix(experience,phrases): fix terms agreement modal behaviors on using magic link (#7839)

* fix(experience,phrases): fix terms agreement modal behaviors on using magic link

* chore: add changeset

Author: charIeszhao

.changeset/pink-trees-lay.md

@@ -0,0 +1,6 @@
+---
+"@logto/phrases-experience": patch
+"@logto/experience": patch
+---
+
+fix a bug that prevents terms agreement dialog from working properly when using magic link authentication

packages/experience/src/App.tsx

@@ -30,6 +30,7 @@ import PhoneVerificationCode from './pages/MfaVerification/PhoneVerificationCode
 import TotpVerification from './pages/MfaVerification/TotpVerification';
 import WebAuthnVerification from './pages/MfaVerification/WebAuthnVerification';
 import OneTimeToken from './pages/OneTimeToken';
+import OneTimeTokenErrorPage from './pages/OneTimeToken/Error';
 import Register from './pages/Register';
 import RegisterPassword from './pages/RegisterPassword';
 import ResetPassword from './pages/ResetPassword';
@@ -71,8 +72,12 @@ const App = () => {
                       element={<SocialSignInWebCallback />}
                     />
                     <Route path="direct/:method/:target?" element={<DirectSignIn />} />
+                    <Route path={experience.routes.oneTimeToken} element={<OneTimeToken />} />
                     <Route element={<AppLayout />}>
-                      <Route path={experience.routes.oneTimeToken} element={<OneTimeToken />} />
+                      <Route
+                        path={`${experience.routes.oneTimeToken}/error`}
+                        element={<OneTimeTokenErrorPage />}
+                      />
                       <Route path={experience.routes.switchAccount} element={<SwitchAccount />} />
                       <Route
                         path="unknown-session"

packages/experience/src/apis/experience/one-time-token.ts

@@ -5,8 +5,8 @@ import api from '../api';
 import { experienceApiRoutes, type VerificationResponse } from './const';
 import { initInteraction } from './interaction';
 
-export const registerWithOneTimeToken = async (payload: OneTimeTokenVerificationVerifyPayload) => {
-  await initInteraction(InteractionEvent.Register);
+export const signInWithOneTimeToken = async (payload: OneTimeTokenVerificationVerifyPayload) => {
+  await initInteraction(InteractionEvent.SignIn);
 
   return api
     .post(`${experienceApiRoutes.verification}/one-time-token/verify`, {

packages/experience/src/components/ConfirmModal/AcModal.tsx

@@ -23,6 +23,8 @@ const AcModal = ({
   confirmText = 'action.confirm',
   confirmTextI18nProps,
   cancelTextI18nProps,
+  shouldCloseOnOverlayClick = true,
+  shouldCloseOnEsc = true,
   onConfirm,
   onClose,
 }: ModalProps) => {
@@ -32,6 +34,9 @@ const AcModal = ({
 
   return (
     <ReactModal
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+      role="dialog"
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}

packages/experience/src/components/ConfirmModal/MobileModal.tsx

@@ -18,12 +18,15 @@ const MobileModal = ({
   confirmText = 'action.confirm',
   cancelTextI18nProps,
   confirmTextI18nProps,
+  shouldCloseOnEsc = true,
+  shouldCloseOnOverlayClick = true,
   onConfirm,
   onClose,
 }: ModalProps) => {
   return (
     <ReactModal
-      shouldCloseOnEsc
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       role="dialog"
       isOpen={isOpen}
       className={classNames(styles.modal, className)}

packages/experience/src/components/ConfirmModal/type.ts

@@ -11,6 +11,8 @@ export type ModalProps = {
   confirmText?: TFuncKey;
   cancelTextI18nProps?: Record<string, string>;
   confirmTextI18nProps?: Record<string, string>;
+  shouldCloseOnOverlayClick?: boolean;
+  shouldCloseOnEsc?: boolean;
   onConfirm?: () => void;
   onClose: () => void;
 };

packages/experience/src/hooks/use-terms.ts

@@ -25,6 +25,7 @@ const useTerms = () => {
 
   const termsAndPrivacyConfirmModalHandler = useCallback(async () => {
     const [result] = await show({
+      shouldCloseOnOverlayClick: false,
       ModalContent: TermsAndPrivacyConfirmModalContent,
       confirmText: 'action.agree',
     });

packages/experience/src/pages/OneTimeToken/Error.tsx

@@ -0,0 +1,29 @@
+import type { TFuncKey } from 'i18next';
+import { useLocation } from 'react-router-dom';
+import { define, object, optional, string, validate } from 'superstruct';
+
+import ErrorPage from '@/pages/ErrorPage';
+
+// Runtime guard for i18n key strings while preserving TFuncKey typing at compile-time
+const tFunctionKey = define<TFuncKey>('TFuncKey', (value) => typeof value === 'string');
+const stateGuard = object({
+  title: optional(tFunctionKey),
+  message: optional(tFunctionKey),
+  errorMessage: optional(string()),
+});
+
+const Error = () => {
+  const { state } = useLocation();
+  const [, parsed] = validate(state, stateGuard);
+
+  return (
+    <ErrorPage
+      isNavbarHidden
+      title={parsed?.title ?? 'error.invalid_link'}
+      message={parsed?.message ?? 'error.invalid_link_description'}
+      rawMessage={parsed?.errorMessage}
+    />
+  );
+};
+
+export default Error;

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

@@ -1,19 +1,19 @@
 import {
   AgreeToTermsPolicy,
+  experience,
   ExtraParamsKey,
   InteractionEvent,
   SignInIdentifier,
   type RequestErrorBody,
 } from '@logto/schemas';
-import { condString } from '@silverhand/essentials';
-import { useCallback, useContext, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import {
   identifyAndSubmitInteraction,
-  signInWithVerifiedIdentifier,
-  registerWithOneTimeToken,
+  registerWithVerifiedIdentifier,
+  signInWithOneTimeToken,
 } from '@/apis/experience';
 import LoadingLayer from '@/components/LoadingLayer';
 import useApi from '@/hooks/use-api';
@@ -22,15 +22,16 @@ import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
 import useSubmitInteractionErrorHandler from '@/hooks/use-submit-interaction-error-handler';
 import useTerms from '@/hooks/use-terms';
 
-import ErrorPage from '../ErrorPage';
-
 const OneTimeToken = () => {
   const [params] = useSearchParams();
-  const [oneTimeTokenError, setOneTimeTokenError] = useState<string | boolean>();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const hasTermsAgreed = useRef(false);
+  const isSubmitted = useRef(false);
 
   const asyncIdentifyUserAndSubmit = useApi(identifyAndSubmitInteraction);
-  const asyncSignInWithVerifiedIdentifier = useApi(signInWithVerifiedIdentifier);
-  const asyncRegisterWithOneTimeToken = useApi(registerWithOneTimeToken);
+  const asyncSignInWithOneTimeToken = useApi(signInWithOneTimeToken);
+  const asyncRegisterWithVerifiedIdentifier = useApi(registerWithVerifiedIdentifier);
 
   const { setIdentifierInputValue } = useContext(UserInteractionContext);
   const { termsValidation, agreeToTermsPolicy } = useTerms();
@@ -40,22 +41,43 @@ const OneTimeToken = () => {
   const preRegisterErrorHandler = useSubmitInteractionErrorHandler(InteractionEvent.Register);
 
   /**
-   * Update interaction event to `SignIn`, and then identify user and submit.
+   * Update interaction event to `Register`, and then identify user and submit.
    */
-  const signInWithOneTimeToken = useCallback(
+  const registerWithOneTimeToken = useCallback(
     async (verificationId: string) => {
-      const [error, result] = await asyncSignInWithVerifiedIdentifier(verificationId);
+      if (
+        !hasTermsAgreed.current &&
+        agreeToTermsPolicy !== AgreeToTermsPolicy.Automatic &&
+        !(await termsValidation())
+      ) {
+        navigate(
+          { pathname: `/${experience.routes.oneTimeToken}/error` },
+          { replace: true, state: { errorMessage: 'terms_acceptance_required_description' } }
+        );
+        return;
+      }
+
+      setIsLoading(true);
+      const [error, result] = await asyncRegisterWithVerifiedIdentifier(verificationId);
 
       if (error) {
-        await handleError(error, preSignInErrorHandler);
+        await handleError(error, preRegisterErrorHandler);
         return;
       }
 
       if (result?.redirectTo) {
         await redirectTo(result.redirectTo);
       }
     },
-    [preSignInErrorHandler, asyncSignInWithVerifiedIdentifier, handleError, redirectTo]
+    [
+      agreeToTermsPolicy,
+      preRegisterErrorHandler,
+      asyncRegisterWithVerifiedIdentifier,
+      navigate,
+      handleError,
+      redirectTo,
+      termsValidation,
+    ]
   );
 
   /**
@@ -67,11 +89,12 @@ const OneTimeToken = () => {
       const [error, result] = await asyncIdentifyUserAndSubmit({ verificationId });
 
       if (error) {
+        setIsLoading(false);
         await handleError(error, {
-          'user.email_already_in_use': async () => {
-            await signInWithOneTimeToken(verificationId);
+          'user.user_not_exist': async () => {
+            await registerWithOneTimeToken(verificationId);
           },
-          ...preRegisterErrorHandler,
+          ...preSignInErrorHandler,
         });
         return;
       }
@@ -81,53 +104,82 @@ const OneTimeToken = () => {
       }
     },
     [
-      preRegisterErrorHandler,
+      preSignInErrorHandler,
       asyncIdentifyUserAndSubmit,
       handleError,
       redirectTo,
-      signInWithOneTimeToken,
+      registerWithOneTimeToken,
     ]
   );
 
+  // Single effect: validate params, run terms gating once, then proceed to submission with idempotency
   useEffect(() => {
     (async () => {
       const token = params.get(ExtraParamsKey.OneTimeToken);
       const email = params.get(ExtraParamsKey.LoginHint);
       const errorMessage = params.get('errorMessage');
 
       if (errorMessage) {
-        setOneTimeTokenError(errorMessage);
+        navigate(
+          { pathname: `/${experience.routes.oneTimeToken}/error` },
+          { replace: true, state: { errorMessage } }
+        );
         return;
       }
 
       if (!token || !email) {
-        setOneTimeTokenError(true);
+        navigate(`/${experience.routes.oneTimeToken}/error`, { replace: true });
         return;
       }
 
-      /**
-       * Check if the user has agreed to the terms and privacy policy before navigating to the 3rd-party social sign-in page
-       * when the policy is set to `Manual`
-       */
-      if (agreeToTermsPolicy === AgreeToTermsPolicy.Manual && !(await termsValidation())) {
+      if (agreeToTermsPolicy === AgreeToTermsPolicy.Manual) {
+        const isAgreed = await termsValidation();
+
+        // eslint-disable-next-line @silverhand/fp/no-mutation
+        hasTermsAgreed.current = isAgreed;
+
+        if (!isAgreed) {
+          navigate(
+            { pathname: `/${experience.routes.oneTimeToken}/error` },
+            {
+              replace: true,
+              state: {
+                title: 'error.terms_acceptance_required',
+                message: 'error.terms_acceptance_required_description',
+              },
+            }
+          );
+          return;
+        }
+      }
+
+      if (isSubmitted.current) {
         return;
       }
+      // eslint-disable-next-line @silverhand/fp/no-mutation
+      isSubmitted.current ||= true;
 
-      const [error, result] = await asyncRegisterWithOneTimeToken({
+      setIsLoading(true);
+      const [error, result] = await asyncSignInWithOneTimeToken({
         token,
         identifier: { type: SignInIdentifier.Email, value: email },
       });
 
       if (error) {
+        setIsLoading(false);
         await handleError(error, {
           global: (error: RequestErrorBody) => {
-            setOneTimeTokenError(error.message);
+            navigate(
+              { pathname: `/${experience.routes.oneTimeToken}/error` },
+              { replace: true, state: { errorMessage: error.message } }
+            );
           },
         });
         return;
       }
 
       if (!result?.verificationId) {
+        setIsLoading(false);
         return;
       }
 
@@ -136,28 +188,19 @@ const OneTimeToken = () => {
       setIdentifierInputValue({ type: SignInIdentifier.Email, value: email });
 
       await submit(result.verificationId);
+      setIsLoading(false);
     })();
   }, [
     agreeToTermsPolicy,
     params,
-    asyncRegisterWithOneTimeToken,
+    asyncSignInWithOneTimeToken,
     handleError,
+    navigate,
     setIdentifierInputValue,
     submit,
     termsValidation,
   ]);
 
-  if (oneTimeTokenError) {
-    return (
-      <ErrorPage
-        isNavbarHidden
-        title="error.invalid_link"
-        message="error.invalid_link_description"
-        rawMessage={condString(typeof oneTimeTokenError !== 'boolean' && oneTimeTokenError)}
-      />
-    );
-  }
-
-  return <LoadingLayer />;
+  return isLoading ? <LoadingLayer /> : null;
 };
 export default OneTimeToken;