feat(account-center): support redirect URL parameter after successful update (#8122)

Add support for `redirect` URL parameter that allows users to be redirected
to a custom URL after successfully updating their account settings.

- Parse and store redirect URL from query parameter on app load
- Validate URL is a valid http/https URL to prevent open redirects
- On success page, redirect to stored URL if present, otherwise show success page

Author: wangsijie

packages/account-center/src/pages/UpdateSuccess/index.tsx

@@ -1,9 +1,10 @@
 import { SignInIdentifier } from '@logto/schemas';
 import type { TFuncKey } from 'i18next';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import successIllustration from '@ac/assets/icons/success.svg';
 import ErrorPage from '@ac/components/ErrorPage';
+import { clearRedirectUrl, getRedirectUrl } from '@ac/utils/account-center-route';
 
 type IdentifierType =
   | SignInIdentifier
@@ -68,6 +69,8 @@ type Props = {
 };
 
 const UpdateSuccess = ({ identifierType }: Props) => {
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
   const translationKeys = useMemo(() => {
     if (!identifierType) {
       return translationMap.default;
@@ -76,6 +79,21 @@ const UpdateSuccess = ({ identifierType }: Props) => {
     return translationMap[identifierType] ?? translationMap.default;
   }, [identifierType]);
 
+  useEffect(() => {
+    const redirectUrl = getRedirectUrl();
+
+    if (redirectUrl) {
+      setIsRedirecting(true);
+      clearRedirectUrl();
+      window.location.assign(redirectUrl);
+    }
+  }, []);
+
+  // Show nothing while redirecting to avoid flash of success page
+  if (isRedirecting) {
+    return null;
+  }
+
   return (
     <ErrorPage
       illustration={successIllustration}

packages/account-center/src/utils/account-center-route.ts

@@ -10,7 +10,9 @@ import {
 } from '@ac/constants/routes';
 
 export const accountCenterBasePath = '/account';
-const storageKey = 'account-center-route-cache';
+const routeStorageKey = 'account-center-route-cache';
+const redirectStorageKey = 'logto:account-center:redirect-url';
+const redirectUrlParameter = 'redirect';
 
 const knownRoutePrefixes: readonly string[] = [
   emailRoute,
@@ -41,25 +43,86 @@ const shouldSkipHandling = (search: string) => {
   return parameters.has('code') || parameters.has('error');
 };
 
+/**
+ * Get the stored redirect URL from sessionStorage.
+ */
+export const getRedirectUrl = (): string | undefined => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  return sessionStorage.getItem(redirectStorageKey) ?? undefined;
+};
+
+/**
+ * Store the redirect URL to sessionStorage.
+ * The URL is validated to be a valid absolute URL with http/https protocol.
+ */
+export const setRedirectUrl = (url: string): boolean => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(url);
+    // Only allow http and https protocols
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return false;
+    }
+    sessionStorage.setItem(redirectStorageKey, url);
+    return true;
+  } catch {
+    // Invalid URL
+    return false;
+  }
+};
+
+/**
+ * Clear the stored redirect URL from sessionStorage.
+ */
+export const clearRedirectUrl = (): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  sessionStorage.removeItem(redirectStorageKey);
+};
+
+/**
+ * Parse and store the redirect URL from the query parameter.
+ * This needs to be done before OAuth flow starts so it persists through the sign-in.
+ */
+const handleRedirectParameter = () => {
+  const parameters = new URLSearchParams(window.location.search);
+  const redirectUrl = parameters.get(redirectUrlParameter);
+
+  if (redirectUrl) {
+    setRedirectUrl(redirectUrl);
+  }
+};
+
 /**
  * Handle Account Center route restoration for sign in redirect.
  */
 export const handleAccountCenterRoute = () => {
+  // Parse and store redirect URL first (before any OAuth redirects)
+  handleRedirectParameter();
+
   if (shouldSkipHandling(window.location.search)) {
     return;
   }
 
   // Restore the stored route if the current path is the base path.
   if (window.location.pathname === accountCenterBasePath) {
-    const storedRoute = parseStoredRoute(sessionStorage.getItem(storageKey) ?? undefined);
+    const storedRoute = parseStoredRoute(sessionStorage.getItem(routeStorageKey) ?? undefined);
     if (!storedRoute) {
-      sessionStorage.removeItem(storageKey);
+      sessionStorage.removeItem(routeStorageKey);
       return;
     }
 
     const { search, hash } = window.location;
     window.history.replaceState({}, '', `${storedRoute}${search}${hash}`);
   } else if (isKnownRoute(window.location.pathname)) {
-    sessionStorage.setItem(storageKey, window.location.pathname);
+    sessionStorage.setItem(routeStorageKey, window.location.pathname);
   }
 };