refactor: update per review comments

Author: charIeszhao

packages/experience/src/App.tsx

@@ -62,7 +62,7 @@ const App = () => {
                     element={<SocialSignInWebCallback />}
                   />
                   <Route path="direct/:method/:target?" element={<DirectSignIn />} />
-                  <Route path="token/:token" element={<OneTimeToken />} />
+                  <Route path="one-time-token/:token" element={<OneTimeToken />} />
                   <Route element={<AppLayout />}>
                     <Route
                       path="unknown-session"
@@ -154,7 +154,7 @@ const App = () => {
                       path={experience.routes.resetPassword}
                       element={<ResetPasswordLanding />}
                     />
-                    <Route path="*" element={<ErrorPage title="description.not_found" />} />
+                    <Route path="*" element={<ErrorPage />} />
                   </Route>
                 </Route>
               </Routes>

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

@@ -5,7 +5,7 @@ import api from '../api';
 import { experienceApiRoutes, type VerificationResponse } from './const';
 import { initInteraction } from './interaction';
 
-export const verifyOneTimeToken = async (payload: OneTimeTokenVerificationVerifyPayload) => {
+export const registerWithOneTimeToken = async (payload: OneTimeTokenVerificationVerifyPayload) => {
   await initInteraction(InteractionEvent.Register);
 
   return api

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

@@ -1,40 +1,40 @@
-import { AgreeToTermsPolicy, SignInIdentifier } from '@logto/schemas';
+import { AgreeToTermsPolicy, SignInIdentifier, type RequestErrorBody } from '@logto/schemas';
+import { condString } from '@silverhand/essentials';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import {
   identifyAndSubmitInteraction,
   signInWithVerifiedIdentifier,
-  verifyOneTimeToken,
+  registerWithOneTimeToken,
 } from '@/apis/experience';
 import LoadingLayer from '@/components/LoadingLayer';
 import useApi from '@/hooks/use-api';
 import useErrorHandler from '@/hooks/use-error-handler';
-import useFallbackRoute from '@/hooks/use-fallback-route';
 import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
 import useLoginHint from '@/hooks/use-login-hint';
 import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler';
 import useTerms from '@/hooks/use-terms';
 
 import ErrorPage from '../ErrorPage';
-import SwitchAccount from '../SwitchAccount';
 
 const OneTimeToken = () => {
   const { token } = useParams();
-  const fallback = useFallbackRoute();
   const email = useLoginHint();
-  const [mismatchedAccount, setMismatchedAccount] = useState<string>();
-  const [oneTimeTokenError, setOneTimeTokenError] = useState<unknown>();
+  const [oneTimeTokenError, setOneTimeTokenError] = useState<RequestErrorBody | boolean>();
 
-  const asyncRegisterWithOneTimeToken = useApi(identifyAndSubmitInteraction);
+  const asyncIdentifyUserAndSubmit = useApi(identifyAndSubmitInteraction);
   const asyncSignInWithVerifiedIdentifier = useApi(signInWithVerifiedIdentifier);
-  const asyncVerifyOneTimeToken = useApi(verifyOneTimeToken);
+  const asyncRegisterWithOneTimeToken = useApi(registerWithOneTimeToken);
 
   const { termsValidation, agreeToTermsPolicy } = useTerms();
   const handleError = useErrorHandler();
   const redirectTo = useGlobalRedirectTo();
   const preSignInErrorHandler = usePreSignInErrorHandler();
 
+  /**
+   * Update interaction event to `SignIn`, and then identify user and submit.
+   */
   const signInWithOneTimeToken = useCallback(
     async (verificationId: string) => {
       const [error, result] = await asyncSignInWithVerifiedIdentifier(verificationId);
@@ -51,9 +51,13 @@ const OneTimeToken = () => {
     [preSignInErrorHandler, asyncSignInWithVerifiedIdentifier, handleError, redirectTo]
   );
 
-  const registerWithOneTimeToken = useCallback(
+  /**
+   * Always try to submit the one-time token interaction with `Register` event first.
+   * If the email already exists, call the `signInWithOneTimeToken` function instead.
+   */
+  const submit = useCallback(
     async (verificationId: string) => {
-      const [error, result] = await asyncRegisterWithOneTimeToken({ verificationId });
+      const [error, result] = await asyncIdentifyUserAndSubmit({ verificationId });
 
       if (error) {
         await handleError(error, {
@@ -68,70 +72,61 @@ const OneTimeToken = () => {
         await redirectTo(result.redirectTo);
       }
     },
-    [asyncRegisterWithOneTimeToken, handleError, redirectTo, signInWithOneTimeToken]
+    [asyncIdentifyUserAndSubmit, handleError, redirectTo, signInWithOneTimeToken]
   );
 
   useEffect(() => {
     (async () => {
-      if (token && email) {
-        /**
-         * 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())) {
-          return;
-        }
-        const [error, result] = await asyncVerifyOneTimeToken({
-          token,
-          identifier: { type: SignInIdentifier.Email, value: email },
-        });
+      if (!token || !email) {
+        setOneTimeTokenError(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())) {
+        return;
+      }
 
-        if (error) {
-          await handleError(error, {
-            'one_time_token.email_mismatch': () => {
-              setMismatchedAccount(email);
-            },
-            'one_time_token.token_expired': () => {
-              setOneTimeTokenError(error);
-            },
-            'one_time_token.token_consumed': () => {
-              setOneTimeTokenError(error);
-            },
-            'one_time_token.token_revoked': () => {
-              setOneTimeTokenError(error);
-            },
-            'one_time_token.token_not_found': () => {
-              setOneTimeTokenError(error);
-            },
-          });
-          return;
-        }
-
-        if (!result?.verificationId) {
-          return;
-        }
-        await registerWithOneTimeToken(result.verificationId);
+      const [error, result] = await asyncRegisterWithOneTimeToken({
+        token,
+        identifier: { type: SignInIdentifier.Email, value: email },
+      });
+
+      if (error) {
+        await handleError(error, {
+          global: (error: RequestErrorBody) => {
+            setOneTimeTokenError(error);
+          },
+        });
+        return;
       }
 
-      window.location.replace('/' + fallback);
+      if (!result?.verificationId) {
+        return;
+      }
+      await submit(result.verificationId);
     })();
   }, [
     agreeToTermsPolicy,
     email,
-    fallback,
     token,
-    asyncVerifyOneTimeToken,
+    asyncRegisterWithOneTimeToken,
     handleError,
-    registerWithOneTimeToken,
     termsValidation,
+    submit,
   ]);
 
-  if (mismatchedAccount) {
-    return <SwitchAccount account={mismatchedAccount} />;
-  }
-
   if (oneTimeTokenError) {
-    return <ErrorPage title="error.invalid_link" message="error.invalid_link_description" />;
+    return (
+      <ErrorPage
+        title="error.invalid_link"
+        message="error.invalid_link_description"
+        rawMessage={condString(typeof oneTimeTokenError !== 'boolean' && oneTimeTokenError.message)}
+      />
+    );
   }
 
   return <LoadingLayer />;

packages/experience/src/utils/search-parameters.ts

@@ -13,6 +13,12 @@ export const searchKeys = Object.freeze({
   appId: 'app_id',
 } satisfies Record<SearchKeysCamelCase, string>);
 
+/**
+ * The one-time token used as verification method.
+ * Example usage: Magic link
+ */
+export const oneTimeTokenSearchKey = 'one_time_token';
+
 export const handleSearchParametersData = () => {
   const { search } = window.location;
 
@@ -34,9 +40,14 @@ export const handleSearchParametersData = () => {
     }
   }
 
-  window.history.replaceState(
-    {},
-    '',
-    window.location.pathname + condString(parameters.size > 0 && `?${parameters.toString()}`)
-  );
+  const conditionalParamString = condString(parameters.size > 0 && `?${parameters.toString()}`);
+
+  // Check one-time token existence, and redirect to the `/one-time-token` route.
+  const oneTimeToken = parameters.get(oneTimeTokenSearchKey);
+  if (oneTimeToken) {
+    window.history.replaceState({}, '', '/one-time-token/' + oneTimeToken + conditionalParamString);
+    return;
+  }
+
+  window.history.replaceState({}, '', window.location.pathname + conditionalParamString);
 };

packages/phrases-experience/src/locales/ar/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: 'انتهت مهلة الطلب. يرجى المحاولة مرة أخرى لاحقًا.',
   password_rejected,
   sso_not_enabled: 'تسجيل الدخول الموحد غير ممكّن لحساب البريد الإلكتروني هذا.',
+  invalid_link: 'رابط غير صالح',
+  invalid_link_description: 'ربما يكون رمز الدخول المؤقت قد انتهى أو لم يعد صالحًا.',
+  something_went_wrong: 'حدث خطأ ما.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/de/error/index.ts

@@ -19,6 +19,10 @@ const error = {
   timeout: 'Zeitüberschreitung. Bitte melde dich erneut an.',
   password_rejected,
   sso_not_enabled: 'Single Sign-On ist für dieses E-Mail-Konto nicht aktiviert.',
+  invalid_link: 'Ungültiger Link',
+  invalid_link_description:
+    'Dein einmaliger Token ist möglicherweise abgelaufen oder nicht mehr gültig.',
+  something_went_wrong: 'Etwas ist schiefgegangen.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/en/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: 'Request timeout. Please try again later.',
   password_rejected,
   sso_not_enabled: 'Single Sign-On is not enabled for this email account.',
+  invalid_link: 'Invalid link',
+  invalid_link_description: 'Your one-time token may have expired or is no longer valid.',
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/es/error/index.ts

@@ -21,6 +21,9 @@ const error = {
   password_rejected,
   sso_not_enabled:
     'El inicio de sesión único no está habilitado para esta cuenta de correo electrónico.',
+  invalid_link: 'Enlace no válido',
+  invalid_link_description: 'Tu token de un solo uso puede haber expirado o ya no ser válido.',
+  something_went_wrong: 'Algo salió mal.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/fr/error/index.ts

@@ -21,6 +21,9 @@ const error = {
   timeout: "Délai d'attente de la requête dépassé. Veuillez réessayer plus tard.",
   password_rejected,
   sso_not_enabled: "La authentification unique n'est pas activée pour ce compte de messagerie.",
+  invalid_link: 'Lien invalide',
+  invalid_link_description: "Votre jeton à usage unique a peut-être expiré ou n'est plus valide.",
+  something_went_wrong: 'Quelque chose a mal tourné.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/it/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: 'Timeout della richiesta. Si prega di riprovare più tardi.',
   password_rejected,
   sso_not_enabled: 'Single sign-on non abilitato per questo account email.',
+  invalid_link: 'Link invalido',
+  invalid_link_description: 'Il tuo token monouso potrebbe essere scaduto o non è più valido.',
+  something_went_wrong: 'Qualcosa è andato storto.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ja/error/index.ts

@@ -20,6 +20,9 @@ const error = {
   timeout: 'リクエストタイムアウト。後でもう一度お試しください。',
   password_rejected,
   sso_not_enabled: 'このメールアカウントではシングルサインオンが有効になっていません。',
+  invalid_link: '無効なリンク',
+  invalid_link_description: 'ワンタイムトークンの有効期限が切れているか、無効になっています。',
+  something_went_wrong: '問題が発生しました。',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ko/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: '요청 시간이 초과되었어요. 잠시 후에 다시 시도해 주세요.',
   password_rejected,
   sso_not_enabled: '이 이메일 계정에 대해 단일 로그인이 활성화되지 않았어요.',
+  invalid_link: '유효하지 않은 링크',
+  invalid_link_description: '일회성 토큰이 만료되었거나 더 이상 유효하지 않을 수 있어요.',
+  something_went_wrong: '문제가 발생했어요.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pl-pl/error/index.ts

@@ -20,6 +20,9 @@ const error = {
   timeout: 'Czas żądania upłynął. Proszę spróbuj ponownie później.',
   password_rejected,
   sso_not_enabled: 'Pojedyncze logowanie nie jest włączony dla tego konta e-mail.',
+  invalid_link: 'Nieprawidłowy link',
+  invalid_link_description: 'Twój jednorazowy token mógł wygasnąć lub nie jest już ważny.',
+  something_went_wrong: 'Coś poszło nie tak.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pt-br/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: 'Tempo limite excedido. Por favor, tente novamente mais tarde.',
   password_rejected,
   sso_not_enabled: 'O Single Sign-On não está habilitado para esta conta de e-mail.',
+  invalid_link: 'Link inválido',
+  invalid_link_description: 'Seu token de uso único pode ter expirado ou não é mais válido.',
+  something_went_wrong: 'Algo deu errado.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pt-pt/error/index.ts

@@ -20,6 +20,9 @@ const error = {
   timeout: 'Tempo limite de sessão. Volte e faça login novamente.',
   password_rejected,
   sso_not_enabled: 'O Single Sign-On não está habilitado para esta conta de e-mail.',
+  invalid_link: 'Link inválido',
+  invalid_link_description: 'O teu token de uso único pode ter expirado ou já não ser válido.',
+  something_went_wrong: 'Algo correu mal.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ru/error/index.ts

@@ -20,6 +20,10 @@ const error = {
   timeout: 'Время ожидания истекло. Пожалуйста, повторите попытку позднее.',
   password_rejected,
   sso_not_enabled: 'Односторонняя авторизация не включена для этого аккаунта электронной почты.',
+  invalid_link: 'Неверная ссылка',
+  invalid_link_description:
+    'Ваш одноразовый токен мог истечь или больше не является действительным.',
+  something_went_wrong: 'Что-то пошло не так.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/tr-tr/error/index.ts

@@ -19,6 +19,10 @@ const error = {
   timeout: 'Oturum zaman aşımına uğradı. Lütfen geri dönüp tekrar giriş yapınız.',
   password_rejected,
   sso_not_enabled: 'Bu e-posta hesabı için tek oturum açma etkin değil.',
+  invalid_link: 'Geçersiz bağlantı',
+  invalid_link_description:
+    'Tek kullanımlık belirtecin süresi dolmuş olabilir veya artık geçerli değil.',
+  something_went_wrong: 'Bir şeyler yanlış gitti.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-cn/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: '请求超时，请稍后重试。',
   password_rejected,
   sso_not_enabled: '此邮箱账户未启用单点登录。',
+  invalid_link: '无效的链接',
+  invalid_link_description: '你的一次性令牌可能已过期或不再有效。',
+  something_went_wrong: '出现错误。',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-hk/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: '請求超時，請稍後重試。',
   password_rejected,
   sso_not_enabled: '此電子郵件帳戶未啟用單一登錄。',
+  invalid_link: '無效的鏈接',
+  invalid_link_description: '你的單次使用令牌可能已過期或不再有效。',
+  something_went_wrong: '出錯了。',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-tw/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: '請求超時，請稍後重試。',
   password_rejected,
   sso_not_enabled: '此郵箱帳戶未啟用單一登錄。',
+  invalid_link: '無效的鏈接',
+  invalid_link_description: '你的一次性令牌可能已過期或不再有效。',
+  something_went_wrong: '出了些問題。',
 };
 
 export default Object.freeze(error);