fix(core): redirect to old page after login via 404 page (#8588)

fix AF-1487

When visit a cloud worskapce page without login, we should allow the user to redirect back to that page after login.

The logic is only added for this case, including login with email magin link + google login. Login with password is already working without changes.

packages/frontend/core/src/desktop/pages/404.tsx

@@ -44,6 +44,10 @@ export const PageNotFound = ({
     apis?.ui.pingAppLayoutReady().catch(console.error);
   }, []);
 
+  // not using workbench location or router location deliberately
+  // strip the origin
+  const currentUrl = window.location.href.replace(window.location.origin, '');
+
   return (
     <>
       {noPermission ? (
@@ -51,7 +55,7 @@ export const PageNotFound = ({
           user={account}
           onBack={handleBackButtonClick}
           onSignOut={handleOpenSignOutModal}
-          signInComponent={<SignIn />}
+          signInComponent={<SignIn redirectUrl={currentUrl} />}
         />
       ) : (
         <NotFoundPage

packages/frontend/core/src/desktop/pages/auth/magic-link.tsx

@@ -1,5 +1,5 @@
 import { useService } from '@toeverything/infra';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   type LoaderFunction,
   redirect,
@@ -59,17 +59,29 @@ export const Component = () => {
   const data = useLoaderData() as LoaderData;
 
   const nav = useNavigate();
+  // loader data from useLoaderData is not reactive, so that we can safely
+  // assume the effect below is only triggered once
+  const triggeredRef = useRef(false);
 
   useEffect(() => {
+    if (triggeredRef.current) {
+      return;
+    }
+    triggeredRef.current = true;
     auth
       .signInMagicLink(data.email, data.token)
       .then(() => {
-        nav(data.redirectUri ?? '/');
+        const subscription = auth.session.status$.subscribe(status => {
+          if (status === 'authenticated') {
+            nav(data.redirectUri ?? '/');
+            subscription?.unsubscribe();
+          }
+        });
       })
       .catch(e => {
         nav(`/sign-in?error=${encodeURIComponent(e.message)}`);
       });
-  }, [data, auth, nav]);
+  }, [auth, data, data.email, data.redirectUri, data.token, nav]);
 
   return null;
 };

packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx

@@ -1,5 +1,5 @@
 import { useService } from '@toeverything/infra';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   type LoaderFunction,
   redirect,
@@ -62,9 +62,17 @@ export const Component = () => {
   const auth = useService(AuthService);
   const data = useLoaderData() as LoaderData;
 
+  // loader data from useLoaderData is not reactive, so that we can safely
+  // assume the effect below is only triggered once
+  const triggeredRef = useRef(false);
+
   const nav = useNavigate();
 
   useEffect(() => {
+    if (triggeredRef.current) {
+      return;
+    }
+    triggeredRef.current = true;
     auth
       .signInOauth(data.code, data.state, data.provider)
       .then(({ redirectUri }) => {

packages/frontend/core/src/desktop/pages/auth/sign-in.tsx

@@ -12,7 +12,11 @@ import {
   useNavigateHelper,
 } from '../../../components/hooks/use-navigate-helper';
 
-export const SignIn = () => {
+export const SignIn = ({
+  redirectUrl: redirectUrlFromProps,
+}: {
+  redirectUrl?: string;
+}) => {
   const session = useService(AuthService).session;
   const status = useLiveData(session.status$);
   const isRevalidating = useLiveData(session.isRevalidating$);
@@ -20,12 +24,12 @@ export const SignIn = () => {
   const { jumpToIndex } = useNavigateHelper();
   const [searchParams] = useSearchParams();
   const isLoggedIn = status === 'authenticated' && !isRevalidating;
+  const redirectUrl = redirectUrlFromProps ?? searchParams.get('redirect_uri');
 
   useEffect(() => {
     if (isLoggedIn) {
-      const redirectUri = searchParams.get('redirect_uri');
-      if (redirectUri) {
-        navigate(redirectUri, {
+      if (redirectUrl) {
+        navigate(redirectUrl, {
           replace: true,
         });
       } else {
@@ -34,12 +38,12 @@ export const SignIn = () => {
         });
       }
     }
-  }, [jumpToIndex, navigate, isLoggedIn, searchParams]);
+  }, [jumpToIndex, navigate, isLoggedIn, redirectUrl, searchParams]);
 
   return (
     <SignInPageContainer>
       <div style={{ maxWidth: '400px', width: '100%' }}>
-        <AuthPanel onSkip={jumpToIndex} />
+        <AuthPanel onSkip={jumpToIndex} redirectUrl={redirectUrl} />
       </div>
     </SignInPageContainer>
   );