feat(auth): implement cross-SPA redirect helpers for login and registration

hotlong · hotlong · commit f1bc87f63e41 · 2026-04-28T10:01:57.000+08:00
diff --git a/apps/account/src/routes/login.tsx b/apps/account/src/routes/login.tsx
@@ -24,6 +24,20 @@ function isSafeRedirect(target: string | undefined): target is string {
   return !!target && target.startsWith('/') && !target.startsWith('//');
 }
 
+/**
+ * Resolve a redirect target to an absolute path on the current origin.
+ *
+ * - Paths beginning with `/_` (e.g. `/_studio/...`, `/_account/...`) are
+ *   already absolute SPA mounts — return them verbatim.
+ * - Otherwise the target is an Account-internal SPA path (`/account`,
+ *   `/orgs/...`) and gets prefixed with the Account SPA base URL.
+ */
+function resolveRedirect(target: string): string {
+  if (target.startsWith('/_')) return target;
+  const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+  return base + target;
+}
+
 function LoginPage() {
   const navigate = useNavigate();
   const { redirect } = Route.useSearch();
@@ -36,8 +50,7 @@ function LoginPage() {
   useEffect(() => {
     if (!user) return;
     if (isSafeRedirect(redirect)) {
-      const base = import.meta.env.BASE_URL.replace(/\/$/, '');
-      window.location.assign(base + redirect);
+      window.location.assign(resolveRedirect(redirect));
       return;
     }
     if (!session?.activeOrganizationId) {
@@ -121,7 +134,11 @@ function LoginPage() {
                   </Button>
                   <p className="text-center text-sm text-muted-foreground">
                     Don&apos;t have an account?{' '}
-                    <Link to="/register" className="underline underline-offset-4 hover:text-primary">
+                    <Link
+                      to="/register"
+                      search={redirect ? { redirect } : undefined}
+                      className="underline underline-offset-4 hover:text-primary"
+                    >
                       Sign up
                     </Link>
                   </p>
diff --git a/apps/account/src/routes/register.tsx b/apps/account/src/routes/register.tsx
@@ -13,11 +13,26 @@ import { SocialSignInButtons } from '@/components/auth/social-sign-in-buttons';
 import { GalleryVerticalEnd } from 'lucide-react';
 
 export const Route = createFileRoute('/register')({
+  validateSearch: (search: Record<string, unknown>): { redirect?: string } => {
+    const r = search.redirect;
+    return typeof r === 'string' ? { redirect: r } : {};
+  },
   component: RegisterPage,
 });
 
+function isSafeRedirect(target: string | undefined): target is string {
+  return !!target && target.startsWith('/') && !target.startsWith('//');
+}
+
+function resolveRedirect(target: string): string {
+  if (target.startsWith('/_')) return target;
+  const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+  return base + target;
+}
+
 function RegisterPage() {
   const navigate = useNavigate();
+  const { redirect } = Route.useSearch();
   const client = useClient() as any;
   const { user, refresh } = useSession();
   const [name, setName] = useState('');
@@ -26,10 +41,13 @@ function RegisterPage() {
   const [submitting, setSubmitting] = useState(false);
 
   useEffect(() => {
-    if (user) {
-      navigate({ to: '/' });
+    if (!user) return;
+    if (isSafeRedirect(redirect)) {
+      window.location.assign(resolveRedirect(redirect));
+      return;
     }
-  }, [user, navigate]);
+    navigate({ to: '/' });
+  }, [user, navigate, redirect]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -109,7 +127,11 @@ function RegisterPage() {
                   </Button>
                   <p className="text-center text-sm text-muted-foreground">
                     Already have an account?{' '}
-                    <Link to="/login" className="underline underline-offset-4 hover:text-primary">
+                    <Link
+                      to="/login"
+                      search={redirect ? { redirect } : undefined}
+                      className="underline underline-offset-4 hover:text-primary"
+                    >
                       Sign in
                     </Link>
                   </p>
diff --git a/apps/studio/src/components/user-menu.tsx b/apps/studio/src/components/user-menu.tsx
@@ -19,6 +19,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { useSession } from '@/hooks/useSession';
 import { config } from '@/lib/config';
+import { gotoAccount, gotoAccountLogin } from '@/lib/auth-redirect';
 
 function initials(name?: string, email?: string): string {
   const src = (name || email || '?').trim();
@@ -43,7 +44,7 @@ export function UserMenu() {
         variant="outline"
         size="sm"
         className="h-8"
-        onClick={() => navigate({ to: '/login' })}
+        onClick={() => gotoAccountLogin()}
       >
         Sign in
       </Button>
@@ -54,7 +55,7 @@ export function UserMenu() {
     try {
       await logout();
     } finally {
-      navigate({ to: '/login' });
+      gotoAccountLogin('/');
     }
   };
 
@@ -86,7 +87,7 @@ export function UserMenu() {
         <DropdownMenuSeparator />
         {!config.singleProject && (
           <>
-            <DropdownMenuItem onSelect={() => navigate({ to: '/orgs' })}>
+            <DropdownMenuItem onSelect={() => gotoAccount('/orgs')}>
               <Building2 className="mr-2 h-3.5 w-3.5" />
               Organizations
             </DropdownMenuItem>
@@ -96,7 +97,7 @@ export function UserMenu() {
             </DropdownMenuItem>
           </>
         )}
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onSelect={() => gotoAccount('/account')}>
           <UserIcon className="mr-2 h-3.5 w-3.5" />
           Account settings
         </DropdownMenuItem>
diff --git a/apps/studio/src/lib/auth-redirect.ts b/apps/studio/src/lib/auth-redirect.ts
@@ -0,0 +1,33 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * Cross-SPA auth redirect helpers.
+ *
+ * Studio defers all sign-in / sign-up UI to the Account SPA mounted at
+ * `/_account/`. These helpers build absolute URLs preserving the original
+ * Studio location so the user lands back where they started after auth.
+ */
+
+const ACCOUNT_BASE = '/_account';
+
+/** Compose a Studio absolute path from `pathname + search`. */
+function currentStudioHref(): string {
+  if (typeof window === 'undefined') return '/';
+  return window.location.pathname + window.location.search;
+}
+
+/**
+ * Hard-navigate the browser to the Account login page, preserving the
+ * current Studio path as `?redirect=...`.
+ */
+export function gotoAccountLogin(redirect?: string): void {
+  const target = redirect ?? currentStudioHref();
+  const url = `${ACCOUNT_BASE}/login?redirect=${encodeURIComponent(target)}`;
+  window.location.assign(url);
+}
+
+/** Hard-navigate to a path under the Account SPA (e.g. `/account`, `/orgs`). */
+export function gotoAccount(path: string): void {
+  const clean = path.startsWith('/') ? path : `/${path}`;
+  window.location.assign(`${ACCOUNT_BASE}${clean}`);
+}
diff --git a/apps/studio/src/routes/__root.tsx b/apps/studio/src/routes/__root.tsx
@@ -14,6 +14,7 @@ import { builtInPlugins } from '../plugins/built-in';
 import { useObjectStackClient } from '../hooks/useObjectStackClient';
 import { SessionProvider, useSession } from '../hooks/useSession';
 import { config } from '@/lib/config';
+import { gotoAccountLogin } from '@/lib/auth-redirect';
 
 /** Routes that don't require authentication. */
 const PUBLIC_ROUTES = new Set(['/login', '/register', '/forgot-password', '/auth/device']);
@@ -88,9 +89,11 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
     if (config.skipAuth) return;
     if (loading) return;
     if (!user && !isPublic) {
-      navigate({ to: '/login' });
+      // Use the raw browser path (includes the `/_studio` base) so
+      // Account can bounce the user back to the exact same Studio URL.
+      gotoAccountLogin(window.location.pathname + window.location.search);
     }
-  }, [user, loading, isPublic, navigate]);
+  }, [user, loading, isPublic, location.pathname, location.searchStr]);
 
   if (loading && !user) {
     return (
diff --git a/apps/studio/src/routes/login.tsx b/apps/studio/src/routes/login.tsx
@@ -1,157 +1,29 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
-import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
-import { useClient } from '@objectstack/client-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { toast } from '@/hooks/use-toast';
-import { useSession } from '@/hooks/useSession';
-import { useProjects } from '@/hooks/useProjects';
-import { SocialSignInButtons } from '@/components/auth/social-sign-in-buttons';
-import { GalleryVerticalEnd } from 'lucide-react';
+/**
+ * Studio's `/login` route — kept only for backwards-compatible URLs.
+ *
+ * Studio delegates all auth UI to the Account SPA at `/_account/login`.
+ * Visitors landing here are redirected immediately, preserving any
+ * `?redirect=...` they brought along.
+ */
+
+import { createFileRoute, useSearch } from '@tanstack/react-router';
+import { useEffect } from 'react';
+import { gotoAccountLogin } from '@/lib/auth-redirect';
 
 export const Route = createFileRoute('/login')({
   validateSearch: (search: Record<string, unknown>): { redirect?: string } => {
     const r = search.redirect;
     return typeof r === 'string' ? { redirect: r } : {};
   },
-  component: LoginPage,
+  component: LoginRedirect,
 });
 
-function isSafeRedirect(target: string | undefined): target is string {
-  return !!target && target.startsWith('/') && !target.startsWith('//');
-}
-
-function LoginPage() {
-  const navigate = useNavigate();
-  const { redirect } = Route.useSearch();
-  const client = useClient() as any;
-  const { session, user, refresh } = useSession();
-  const { projects, loading: projectsLoading } = useProjects();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
+function LoginRedirect() {
+  const { redirect } = useSearch({ from: '/login' });
   useEffect(() => {
-    if (!user) return;
-    if (isSafeRedirect(redirect)) {
-      const base = import.meta.env.BASE_URL.replace(/\/$/, '');
-      window.location.assign(base + redirect);
-      return;
-    }
-    if (!session?.activeOrganizationId) {
-      navigate({ to: '/orgs' });
-      return;
-    }
-    if (projectsLoading) return;
-
-    const lastProjectId = localStorage.getItem('objectstack.lastProjectId');
-    const targetProject =
-      (lastProjectId && projects.find((p) => p.id === lastProjectId)) ||
-      projects.find((p) => p.is_default) ||
-      projects[0];
-
-    if (targetProject) {
-      navigate({
-        to: '/projects/$projectId',
-        params: { projectId: targetProject.id },
-      });
-    } else {
-      navigate({ to: '/projects' });
-    }
-  }, [user, session, projects, projectsLoading, navigate, redirect]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!client?.auth) return;
-    setSubmitting(true);
-    try {
-      await client.auth.login({ type: 'email', email, password });
-      await refresh();
-      toast({ title: 'Welcome back' });
-    } catch (err) {
-      toast({
-        title: 'Sign in failed',
-        description: (err as Error).message,
-        variant: 'destructive',
-      });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="flex min-h-svh w-full flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-            <GalleryVerticalEnd className="size-4" />
-          </div>
-          ObjectStack
-        </a>
-        <div className="flex flex-col gap-6">
-          <Card>
-            <CardHeader className="text-center">
-              <CardTitle className="text-xl">Welcome back</CardTitle>
-              <CardDescription>Access your ObjectStack Studio workspace.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form onSubmit={handleSubmit}>
-                <div className="flex flex-col gap-4">
-                  <SocialSignInButtons mode="sign-in" />
-                  <div className="flex flex-col gap-2">
-                    <Label htmlFor="email">Email</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      placeholder="m@example.com"
-                      autoComplete="email"
-                      required
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    <div className="flex items-center">
-                      <Label htmlFor="password">Password</Label>
-                      <Link
-                        to="/forgot-password"
-                        className="ml-auto text-sm underline-offset-4 hover:underline"
-                      >
-                        Forgot your password?
-                      </Link>
-                    </div>
-                    <Input
-                      id="password"
-                      type="password"
-                      autoComplete="current-password"
-                      required
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                    />
-                  </div>
-                  <Button type="submit" className="w-full" disabled={submitting}>
-                    {submitting ? 'Signing in…' : 'Login'}
-                  </Button>
-                  <p className="text-center text-sm text-muted-foreground">
-                    Don&apos;t have an account?{' '}
-                    <Link to="/register" className="underline underline-offset-4 hover:text-primary">
-                      Sign up
-                    </Link>
-                  </p>
-                </div>
-              </form>
-            </CardContent>
-          </Card>
-          <p className="px-6 text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
-            By clicking continue, you agree to our{' '}
-            <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
+    gotoAccountLogin(redirect);
+  }, [redirect]);
+  return null;
 }
diff --git a/apps/studio/src/routes/register.tsx b/apps/studio/src/routes/register.tsx
