#301: Restyle auth pages and add invitation acceptance page

Shared components/auth (AuthLayout, text/password fields with show/hide,
inline errors, form message area) on theme tokens, replacing the layout
duplicated across login, signup, forgot and reset password and every alert().
Validation follows the server's real password policy, which lib/auth.ts now
reads from the same constants.

Invitation emails linked to /accept-invitation/<id>, which 404'd. The new
server page loads the invitation through an org-scoped InvitationService and
covers not found, expired/used, create account (email locked), log in and
come back, wrong account (sign out), accept, and joined.

The old afterUserCreated invite path called BetterAuth's acceptInvitation,
which needs a session cookie that doesn't exist while the session is being
created, so invitees always became join requests. Sign-up from the invitation
page now sends x-invitation-id and the hook accepts that invitation only if
it's open, on the host's org and addressed to the new user. A plain sign-up
with the invited email no longer can claim it. Signed-in invitees accept
through POST /api/invitations/:id/accept.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: jlouisugbo

api/invitations.ts

@@ -0,0 +1,68 @@
+import { Hono } from "hono";
+import { HTTPException } from "hono/http-exception";
+import { zValidator } from "@hono/zod-validator";
+import z from "zod";
+import { requireAuth } from "@/lib/authUtils";
+import { getSlugFromHost } from "@/lib/clientAuthUtils";
+import {
+  AcceptInvitationResult,
+  InvitationService,
+} from "@/lib/services/InvitationService";
+import { OrganizationsService } from "@/lib/services/OrganizationService";
+
+const paramsSchema = z.object({ id: z.string().min(1) });
+
+/** Status and message for each way accepting can fail. */
+const ACCEPT_FAILURE = {
+  [AcceptInvitationResult.NotFound]: {
+    status: 404,
+    message: "Invitation not found",
+  },
+  [AcceptInvitationResult.Closed]: {
+    status: 410,
+    message: "This invitation has expired or was already used",
+  },
+  [AcceptInvitationResult.WrongRecipient]: {
+    status: 403,
+    message: "This invitation is for a different email",
+  },
+  [AcceptInvitationResult.AlreadyMember]: {
+    status: 409,
+    message: "You're already a member of this organization",
+  },
+} as const satisfies Record<
+  Exclude<AcceptInvitationResult, typeof AcceptInvitationResult.Accepted>,
+  { status: 403 | 404 | 409 | 410; message: string }
+>;
+
+const app = new Hono().post(
+  "/:id/accept",
+  zValidator("param", paramsSchema),
+  async (c) => {
+    const session = await requireAuth(c);
+    const { id } = c.req.valid("param");
+
+    // The invitation must belong to the org on this host, not whichever org
+    // happens to be active on the session.
+    const organization = await OrganizationsService.findBySlug(
+      getSlugFromHost(c.req.header("host")),
+    );
+    if (!organization) {
+      throw new HTTPException(404, { message: "Organization not found" });
+    }
+
+    const result = await InvitationService.acceptForUser(
+      id,
+      organization.id,
+      session.user,
+    );
+    if (result !== AcceptInvitationResult.Accepted) {
+      const { status, message } = ACCEPT_FAILURE[result];
+      throw new HTTPException(status, { message });
+    }
+
+    return c.json({ organizationId: organization.id });
+  },
+);
+
+export default app;

app/accept-invitation/[id]/page.tsx

@@ -0,0 +1,191 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import AuthLayout from "@/components/auth/AuthLayout";
+import BackToLoginLink from "@/components/auth/BackToLoginLink";
+import SignupForm from "@/components/auth/SignupForm";
+import {
+  AcceptInvitationButton,
+  ContinueLink,
+  LogInToAcceptLink,
+  SignOutButton,
+} from "@/components/auth/AcceptInvitationActions";
+import { auth } from "@/lib/auth";
+import { getSlugFromHost } from "@/lib/clientAuthUtils";
+import {
+  InvitationService,
+  type Invitation,
+} from "@/lib/services/InvitationService";
+import { MembersService } from "@/lib/services/MemberService";
+import { OrganizationsService } from "@/lib/services/OrganizationService";
+import { UserService } from "@/lib/services/UserService";
+
+export const metadata: Metadata = { title: "Accept Invitation" };
+
+type InvitationView =
+  | { kind: "not-found" }
+  | { kind: "closed" }
+  | { kind: "joined"; invitation: Invitation }
+  | { kind: "create-account"; invitation: Invitation }
+  | { kind: "log-in"; invitation: Invitation }
+  | { kind: "wrong-account"; invitation: Invitation; signedInEmail: string }
+  | { kind: "accept"; invitation: Invitation };
+
+const ROLE_LABEL: Partial<Record<string, string>> = {
+  owner: "an owner",
+  admin: "an admin",
+  member: "a member",
+};
+
+function roleLabel(role: string) {
+  return ROLE_LABEL[role] ?? role;
+}
+
+function sameEmail(a: string, b: string) {
+  return a.toLowerCase() === b.toLowerCase();
+}
+
+/** Decides what the invitee sees, from the invitation and who's signed in. */
+async function resolveInvitationView(
+  invitationId: string,
+  requestHeaders: Headers,
+): Promise<InvitationView> {
+  const organization = await OrganizationsService.findBySlug(
+    getSlugFromHost(requestHeaders.get("host") ?? undefined),
+  );
+  const invitation =
+    organization &&
+    (await InvitationService.findByIdAndOrganization(
+      invitationId,
+      organization.id,
+    ));
+  if (!invitation) return { kind: "not-found" };
+
+  const session = await auth.api.getSession({ headers: requestHeaders });
+  const signedInUser = session?.user;
+  const isInvitee =
+    signedInUser !== undefined &&
+    sameEmail(signedInUser.email, invitation.email);
+  const membership =
+    isInvitee &&
+    (await MembersService.findByUserAndOrganization(
+      signedInUser.id,
+      invitation.organizationId,
+    ));
+
+  // Signing up from this page accepts the invitation, so the new invitee
+  // lands here already a member if they come back.
+  if (membership) return { kind: "joined", invitation };
+  if (!InvitationService.isOpen(invitation)) return { kind: "closed" };
+  if (signedInUser && !isInvitee) {
+    return {
+      kind: "wrong-account",
+      invitation,
+      signedInEmail: signedInUser.email,
+    };
+  }
+  if (isInvitee) return { kind: "accept", invitation };
+
+  const account = await UserService.findByEmailAndOrganization(
+    invitation.email.toLowerCase(),
+    invitation.organizationId,
+  );
+  return account
+    ? { kind: "log-in", invitation }
+    : { kind: "create-account", invitation };
+}
+
+function invitedTitle(invitation: Invitation) {
+  return `You've been invited to join ${invitation.organizationName} as ${roleLabel(invitation.role)}`;
+}
+
+function InvitationContent({
+  view,
+  invitationId,
+}: {
+  view: InvitationView;
+  invitationId: string;
+}) {
+  const loginHref = `/login?redirect=${encodeURIComponent(
+    `/accept-invitation/${invitationId}`,
+  )}`;
+
+  switch (view.kind) {
+    case "not-found":
+      return (
+        <AuthLayout
+          title="Invitation not found"
+          description="This link doesn't match an invitation here. Check that you opened the whole link from your email."
+        >
+          <BackToLoginLink />
+        </AuthLayout>
+      );
+    case "closed":
+      return (
+        <AuthLayout
+          title="This invitation is no longer valid"
+          description="It has expired or was already used. Ask the person who invited you to send a new one."
+        >
+          <BackToLoginLink />
+        </AuthLayout>
+      );
+    case "joined":
+      return (
+        <AuthLayout
+          title={`You've joined ${view.invitation.organizationName}`}
+          description={`You're in as ${roleLabel(view.invitation.role)}.`}
+        >
+          <ContinueLink />
+        </AuthLayout>
+      );
+    case "create-account":
+      return (
+        <AuthLayout
+          title={invitedTitle(view.invitation)}
+          description="Create your account to accept."
+        >
+          <SignupForm invitation={view.invitation} loginHref={loginHref} />
+        </AuthLayout>
+      );
+    case "log-in":
+      return (
+        <AuthLayout
+          title={invitedTitle(view.invitation)}
+          description={`You already have an account with ${view.invitation.email}. Log in to accept.`}
+        >
+          <LogInToAcceptLink href={loginHref} />
+        </AuthLayout>
+      );
+    case "wrong-account":
+      return (
+        <AuthLayout
+          title={invitedTitle(view.invitation)}
+          description={`This invitation is for ${view.invitation.email}, but you're signed in as ${view.signedInEmail}. Sign out, then open the link again.`}
+        >
+          <SignOutButton />
+        </AuthLayout>
+      );
+    case "accept":
+      return (
+        <AuthLayout
+          title={invitedTitle(view.invitation)}
+          description={`Signed in as ${view.invitation.email}.`}
+        >
+          <AcceptInvitationButton invitationId={invitationId} />
+        </AuthLayout>
+      );
+    default: {
+      const leftover: never = view;
+      return leftover;
+    }
+  }
+}
+
+export default async function AcceptInvitationPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const view = await resolveInvitationView(id, await headers());
+  return <InvitationContent view={view} invitationId={id} />;
+}

app/api/[[...route]]/route.ts

@@ -11,6 +11,7 @@ import messages from "@/api/messages";
 import emails from "@/api/emails";
 import profile from "@/api/profile";
 import tags from "@/api/tags";
+import invitations from "@/api/invitations";
 import { Hono } from "hono";
 import { handle } from "hono/netlify";
 
@@ -28,7 +29,8 @@ const app = new Hono()
   .route("/messages", messages)
   .route("/emails", emails)
   .route("/profile", profile)
-  .route("/tags", tags);
+  .route("/tags", tags)
+  .route("/invitations", invitations);
 
 export const GET = handle(app);
 export const POST = handle(app);