feat(webapp): app auto session logout

apps/webapp/app/root.tsx

@@ -15,6 +15,8 @@ import { env } from "./env.server";
 import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
 import { getUser } from "./services/session.server";
+import { commitAuthenticatedSessionLazy } from "./services/sessionDuration.server";
+import { getUserSession } from "./services/sessionStorage.server";
 import { getTimezonePreference } from "./services/preferences/uiPreferences.server";
 import { appEnvTitleTag } from "./utils";
 
@@ -58,9 +60,22 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     websiteId: env.KAPA_AI_WEBSITE_ID,
   };
 
+  const user = await getUser(request);
+
+  const headers = new Headers();
+  headers.append("Set-Cookie", await commitSession(session));
+
+  // Lazy-backfill the auth session's `issuedAt` for cookies issued before this
+  // feature shipped, and refresh the cookie's Max-Age to track the user's
+  // current effective session duration.
+  if (user) {
+    const authSession = await getUserSession(request);
+    headers.append("Set-Cookie", await commitAuthenticatedSessionLazy(authSession));
+  }
+
   return typedjson(
     {
-      user: await getUser(request),
+      user,
       toastMessage,
       posthogProjectKey,
       features,
@@ -70,7 +85,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       kapa,
       timezone,
     },
-    { headers: { "Set-Cookie": await commitSession(session) } }
+    { headers }
   );
 };
 

apps/webapp/app/routes/account.security/route.tsx

@@ -1,15 +1,20 @@
 import { type MetaFunction } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import {
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
 import { Header2 } from "~/components/primitives/Headers";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
-import { MfaSetup } from "../resources.account.mfa.setup/route";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { requireUser } from "~/services/session.server";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import {
+  getAllowedSessionOptions,
+  getEffectiveSessionDuration,
+} from "~/services/sessionDuration.server";
+import { MfaSetup } from "../resources.account.mfa.setup/route";
+import { SessionDurationSetting } from "../resources.account.session-duration/SessionDurationSetting";
 
 export const meta: MetaFunction = () => {
   return [
@@ -22,13 +27,20 @@ export const meta: MetaFunction = () => {
 export async function loader({ request }: LoaderFunctionArgs) {
   const user = await requireUser(request);
 
+  const { durationSeconds, orgCapSeconds } = await getEffectiveSessionDuration(user.id);
+  const sessionDurationOptions = getAllowedSessionOptions(orgCapSeconds, durationSeconds);
+
   return typedjson({
     user,
+    sessionDuration: durationSeconds,
+    sessionDurationOptions,
+    orgCapSeconds,
   });
 }
 
 export default function Page() {
-  const { user } = useTypedLoaderData<typeof loader>();
+  const { user, sessionDuration, sessionDurationOptions, orgCapSeconds } =
+    useTypedLoaderData<typeof loader>();
 
   return (
     <PageContainer>
@@ -37,11 +49,20 @@ export default function Page() {
       </NavBar>
 
       <PageBody>
-        <MainHorizontallyCenteredContainer className="grid place-items-center overflow-visible">
-          <div className="mb-3 w-full border-b border-grid-dimmed pb-3">
+        <MainHorizontallyCenteredContainer className="max-w-[37.5rem] overflow-visible">
+          <div className="w-full border-b border-grid-dimmed pb-3">
             <Header2>Security</Header2>
           </div>
-          <MfaSetup isEnabled={!!user.mfaEnabledAt} />
+          <div className="w-full border-b border-grid-dimmed py-4">
+            <MfaSetup isEnabled={!!user.mfaEnabledAt} />
+          </div>
+          <div className="w-full border-b border-grid-dimmed py-4">
+            <SessionDurationSetting
+              currentValue={sessionDuration}
+              options={sessionDurationOptions}
+              orgCapSeconds={orgCapSeconds}
+            />
+          </div>
         </MainHorizontallyCenteredContainer>
       </PageBody>
     </PageContainer>

apps/webapp/app/routes/admin.api.v1.orgs.$organizationId.session-duration.ts

@@ -0,0 +1,32 @@
+import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { requireAdminApiRequest } from "~/services/personalAccessToken.server";
+
+const ParamsSchema = z.object({
+  organizationId: z.string(),
+});
+
+const RequestBodySchema = z.object({
+  /**
+   * Maximum session lifetime (seconds) for members of this organization, or
+   * null to remove the cap. When set, this caps each member's
+   * `User.sessionDuration` and is enforced on the user's next request.
+   */
+  maxSessionDuration: z.number().int().positive().nullable(),
+});
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  await requireAdminApiRequest(request);
+
+  const { organizationId } = ParamsSchema.parse(params);
+  const body = RequestBodySchema.parse(await request.json());
+
+  const organization = await prisma.organization.update({
+    where: { id: organizationId },
+    data: { maxSessionDuration: body.maxSessionDuration },
+    select: { id: true, slug: true, maxSessionDuration: true },
+  });
+
+  return json({ success: true, organization });
+}

apps/webapp/app/routes/auth.github.callback.tsx

@@ -5,6 +5,7 @@ import { getSession, redirectWithErrorMessage } from "~/models/message.server";
 import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { commitSession } from "~/services/sessionStorage.server";
+import { commitAuthenticatedSession } from "~/services/sessionDuration.server";
 import { trackAndClearReferralSource } from "~/services/referralSource.server";
 import { redirectCookie } from "./auth.github";
 import { sanitizeRedirectPath } from "~/utils";
@@ -52,7 +53,7 @@ export let loader: LoaderFunction = async ({ request }) => {
   session.set(authenticator.sessionKey, auth);
 
   const headers = new Headers();
-  headers.append("Set-Cookie", await commitSession(session));
+  headers.append("Set-Cookie", await commitAuthenticatedSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("github"));
 
   await trackAndClearReferralSource(request, auth.userId, headers);

apps/webapp/app/routes/auth.google.callback.tsx

@@ -5,6 +5,7 @@ import { getSession, redirectWithErrorMessage } from "~/models/message.server";
 import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { commitSession } from "~/services/sessionStorage.server";
+import { commitAuthenticatedSession } from "~/services/sessionDuration.server";
 import { trackAndClearReferralSource } from "~/services/referralSource.server";
 import { redirectCookie } from "./auth.google";
 import { sanitizeRedirectPath } from "~/utils";
@@ -52,7 +53,7 @@ export let loader: LoaderFunction = async ({ request }) => {
   session.set(authenticator.sessionKey, auth);
 
   const headers = new Headers();
-  headers.append("Set-Cookie", await commitSession(session));
+  headers.append("Set-Cookie", await commitAuthenticatedSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("google"));
 
   await trackAndClearReferralSource(request, auth.userId, headers);

apps/webapp/app/routes/login.magic/route.tsx

@@ -23,6 +23,7 @@ import { TextLink } from "~/components/primitives/TextLink";
 import { authenticator } from "~/services/auth.server";
 import { commitSession, getUserSession } from "~/services/sessionStorage.server";
 import { setRedirectTo, commitSession as commitRedirectSession } from "~/services/redirectTo.server";
+import { sanitizeRedirectPath } from "~/utils";
 import {
   checkMagicLinkEmailRateLimit,
   checkMagicLinkEmailDailyRateLimit,
@@ -60,11 +61,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const session = await getUserSession(request);
   const error = session.get("auth:error");
 
-  // Get redirectTo from URL params and store in session if present
+  // Get redirectTo from URL params and store in session if present.
+  // Sanitize to drop non-page paths (fetcher routes, callbacks) which would
+  // render blank if the user was sent there post-login.
   const url = new URL(request.url);
-  const redirectTo = url.searchParams.get("redirectTo");
+  const sanitized = sanitizeRedirectPath(url.searchParams.get("redirectTo"));
+  const redirectTo = sanitized === "/" ? null : sanitized;
   const headers = new Headers();
-  
+
   if (redirectTo) {
     const redirectSession = await setRedirectTo(request, redirectTo);
     headers.append("Set-Cookie", await commitRedirectSession(redirectSession));

apps/webapp/app/routes/login.mfa/route.tsx

@@ -21,6 +21,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { Spinner } from "~/components/primitives/Spinner";
 import { authenticator } from "~/services/auth.server";
 import { commitSession, getUserSession } from "~/services/sessionStorage.server";
+import { commitAuthenticatedSession } from "~/services/sessionDuration.server";
 import { getSession as getMessageSession } from "~/models/message.server";
 import { MultiFactorAuthenticationService } from "~/services/mfa/multiFactorAuthentication.server";
 import { redirectWithErrorMessage, redirectBackWithErrorMessage } from "~/models/message.server";
@@ -162,7 +163,7 @@ async function completeLogin(request: Request, session: Session, userId: string)
   session.unset("pending-mfa-redirect-to");
 
   const headers = new Headers();
-  headers.append("Set-Cookie", await commitSession(session));
+  headers.append("Set-Cookie", await commitAuthenticatedSession(session));
 
   await trackAndClearReferralSource(request, userId, headers);
 

apps/webapp/app/routes/magic.tsx

@@ -6,10 +6,15 @@ import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { getRedirectTo } from "~/services/redirectTo.server";
 import { commitSession, getSession } from "~/services/sessionStorage.server";
+import { commitAuthenticatedSession } from "~/services/sessionDuration.server";
 import { trackAndClearReferralSource } from "~/services/referralSource.server";
+import { sanitizeRedirectPath } from "~/utils";
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  const redirectTo = await getRedirectTo(request);
+  // Defense-in-depth: sanitize the cookie value to drop non-page paths in case
+  // a stale cookie from before sanitization shipped is still in the browser.
+  const sanitized = sanitizeRedirectPath(await getRedirectTo(request));
+  const redirectTo = sanitized === "/" ? undefined : sanitized;
 
   const auth = await authenticator.authenticate("email-link", request, {
     failureRedirect: "/login/magic", // If auth fails, the failureRedirect will be thrown as a Response
@@ -51,7 +56,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   session.set(authenticator.sessionKey, auth);
 
   const headers = new Headers();
-  headers.append("Set-Cookie", await commitSession(session));
+  headers.append("Set-Cookie", await commitAuthenticatedSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("email"));
 
   await trackAndClearReferralSource(request, auth.userId, headers);

apps/webapp/app/routes/resources.account.mfa.setup/MfaToggle.tsx

@@ -12,24 +12,24 @@ interface MfaToggleProps {
 export function MfaToggle({ isEnabled, onToggle }: MfaToggleProps) {
   return (
     <Form method="post" className="w-full">
-      <InputGroup className="mb-4">
-        <Label>Multi-factor authentication</Label>
-        <Paragraph variant="small">
-          Enable an extra layer of security by requiring a one-time code from your authenticator
-          app (TOTP) each time you log in.
-        </Paragraph>
-      </InputGroup>
-      <div className="flex items-center justify-between">
-        <Switch
-          id="mfa"
-          variant="medium"
-          label={isEnabled ? "Enabled" : "Enable"}
-          labelPosition="right"
-          className="-ml-2 w-fit pr-3"
-          checked={isEnabled}
-          onCheckedChange={onToggle}
-        />
+      <div className="flex w-full items-center justify-between gap-4">
+        <InputGroup className="flex-1">
+          <Label>Multi-factor authentication</Label>
+          <Paragraph variant="small">
+            Require a one-time code from your authenticator app (TOTP).
+          </Paragraph>
+        </InputGroup>
+        <div className="flex flex-none items-center">
+          <Switch
+            id="mfa"
+            variant="medium"
+            labelPosition="right"
+            className="w-fit pr-3"
+            checked={isEnabled}
+            onCheckedChange={onToggle}
+          />
+        </div>
       </div>
     </Form>
   );
-}
+}

apps/webapp/app/routes/resources.account.mfa.setup/route.tsx

@@ -1,7 +1,11 @@
-import { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { z } from "zod";
-import { redirectWithSuccessMessage, redirectWithErrorMessage, typedJsonWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectWithSuccessMessage,
+  redirectWithErrorMessage,
+  typedJsonWithSuccessMessage,
+} from "~/models/message.server";
 import { MultiFactorAuthenticationService } from "~/services/mfa/multiFactorAuthentication.server";
 import { requireUserId } from "~/services/session.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
@@ -132,14 +136,15 @@ export async function action({ request }: ActionFunctionArgs) {
     if (error instanceof ServiceValidationError) {
       return redirectWithErrorMessage("/account/security", request, error.message);
     }
-    
+
     // Re-throw unexpected errors
     throw error;
   }
 }
 
 export function MfaSetup({ isEnabled }: { isEnabled: boolean }) {
-  const { state, actions, isQrDialogOpen, isRecoveryDialogOpen, isDisableDialogOpen } = useMfaSetup(isEnabled);
+  const { state, actions, isQrDialogOpen, isRecoveryDialogOpen, isDisableDialogOpen } =
+    useMfaSetup(isEnabled);
 
   const handleToggle = (enabled: boolean) => {
     if (enabled && !state.isEnabled) {
@@ -151,10 +156,7 @@ export function MfaSetup({ isEnabled }: { isEnabled: boolean }) {
 
   return (
     <>
-      <MfaToggle
-        isEnabled={state.isEnabled}
-        onToggle={handleToggle}
-      />
+      <MfaToggle isEnabled={state.isEnabled} onToggle={handleToggle} />
 
       <MfaSetupDialog
         isOpen={isQrDialogOpen}