Centralize auth redirect path and polish auth shell (workstream A).

Author: jlouisugbo

app/(auth)/layout.tsx

@@ -10,12 +10,11 @@ import { OrganizationConfigKey } from "@/lib/schema";
 const AUTH_CONFIG_KEYS = [
   OrganizationConfigKey.PrimaryColor,
   OrganizationConfigKey.SecondaryColor,
-  OrganizationConfigKey.Tagline,
   OrganizationConfigKey.LogoUrl,
 ] as const;
 
 const AUTH_FOCUS =
-  "[&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-brand-text [&_button:focus-visible]:outline-2 [&_button:focus-visible]:outline-offset-2 [&_button:focus-visible]:outline-brand-text";
+  "[&_:is(a,button,input):focus-visible]:outline-2 [&_:is(a,button,input):focus-visible]:outline-offset-2 [&_:is(a,button,input):focus-visible]:outline-brand-text";
 
 /**
  * Shared shell for signed-out pages: brand panel, card, and org-not-found gate.

app/(auth)/login/page.tsx

@@ -18,21 +18,16 @@ import { AuthMessage } from "@/components/auth/authConstants";
 import authClient from "@/lib/authClient";
 import {
   hasErrors,
-  safeRedirectPath,
   validateLogin,
   type FieldErrors,
 } from "@/lib/authValidation";
-import { useRedirectIfSignedIn } from "@/lib/hooks/useRedirectIfSignedIn";
+import {
+  getRedirectPath,
+  useRedirectIfSignedIn,
+} from "@/lib/hooks/useRedirectIfSignedIn";
 
 const WRONG_CREDENTIALS_CODE = "INVALID_EMAIL_OR_PASSWORD";
 
-function getRedirectPath() {
-  return safeRedirectPath(
-    new URLSearchParams(window.location.search).get("redirect"),
-    window.location.origin,
-  );
-}
-
 export default function LoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState("");
@@ -76,14 +71,13 @@ export default function LoginPage() {
     router.push(getRedirectPath());
   };
 
-  useRedirectIfSignedIn(getRedirectPath);
+  useRedirectIfSignedIn();
 
   return (
     <>
-      <div className="flex flex-col gap-3 bg-page-bg">
-        <AuthPageIntro title="Login" />
+      <AuthPageIntro title="Login">
         <AuthOrgTagline />
-      </div>
+      </AuthPageIntro>
       <form className="flex flex-col gap-6" onSubmit={handleSubmit} noValidate>
         <AuthTextField
           label="Email"

app/(auth)/signup/page.tsx

@@ -6,14 +6,13 @@ import SignupForm from "@/components/auth/SignupForm";
 import { useRedirectIfSignedIn } from "@/lib/hooks/useRedirectIfSignedIn";
 
 export default function SignupPage() {
-  useRedirectIfSignedIn(() => "/");
+  useRedirectIfSignedIn();
 
   return (
     <>
-      <div className="flex flex-col gap-3 bg-page-bg">
-        <AuthPageIntro title="Sign Up" />
+      <AuthPageIntro title="Sign Up">
         <AuthOrgTagline />
-      </div>
+      </AuthPageIntro>
       <SignupForm />
     </>
   );

components/auth/AuthPageIntro.tsx

@@ -4,14 +4,17 @@ import type { ReactNode } from "react";
 export default function AuthPageIntro({
   title,
   description,
+  children,
 }: {
   title: ReactNode;
   description?: ReactNode;
+  children?: ReactNode;
 }) {
   return (
     <div className="flex flex-col gap-3 bg-page-bg">
       <h1 className="font-display">{title}</h1>
       {description && <p className="text-grey-text-weak">{description}</p>}
+      {children}
     </div>
   );
 }

lib/hooks/useRedirectIfSignedIn.ts

@@ -3,29 +3,35 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import authClient from "@/lib/authClient";
+import { safeRedirectPath } from "@/lib/authValidation";
 import { getSlugFromHost } from "@/lib/clientAuthUtils";
 import { useActiveOrganization } from "@/lib/hooks/useActiveOrganization";
 
+export function getRedirectPath() {
+  return safeRedirectPath(
+    new URLSearchParams(window.location.search).get("redirect"),
+    window.location.origin,
+  );
+}
+
 /**
  * Sends someone already signed in to this host's org away from a signed-out
- * page (login, signup). `getPath` runs in the browser when redirecting.
+ * page (login, signup).
  */
-export function useRedirectIfSignedIn(getPath: () => string) {
+export function useRedirectIfSignedIn() {
   const router = useRouter();
   const org = useActiveOrganization();
 
   useEffect(() => {
     const checkLoggedIn = async () => {
       const session = await authClient.getSession();
-      if (!session?.data?.user) {
-        return;
-      }
+      if (!session?.data?.user) return;
 
       if (org?.slug === getSlugFromHost(window.location.host)) {
-        router.replace(getPath());
+        router.replace(getRedirectPath());
       }
     };
 
     void checkLoggedIn();
-  }, [org?.slug, router, getPath]);
+  }, [org?.slug, router]);
 }