feat: Plain customer cards (#2933)

Author: isshaddad

apps/webapp/app/env.server.ts

@@ -151,6 +151,9 @@ const EnvironmentSchema = z
     SMTP_PASSWORD: z.string().optional(),
 
     PLAIN_API_KEY: z.string().optional(),
+    PLAIN_CUSTOMER_CARDS_SECRET: z.string().optional(),
+    PLAIN_CUSTOMER_CARDS_KEY: z.string().optional(),
+    PLAIN_CUSTOMER_CARDS_HEADERS: z.string().optional(),
     WORKER_SCHEMA: z.string().default("graphile_worker"),
     WORKER_CONCURRENCY: z.coerce.number().int().default(10),
     WORKER_POLL_INTERVAL: z.coerce.number().int().default(1000),

apps/webapp/app/models/admin.server.ts

@@ -210,8 +210,13 @@ export async function adminGetOrganizations(userId: string, { page, search }: Se
   };
 }
 
-export async function redirectWithImpersonation(request: Request, userId: string, path: string) {
-  const user = await requireUser(request);
+export async function redirectWithImpersonation(
+  request: Request,
+  userId: string,
+  path: string,
+  currentUser?: { id: string; admin: boolean }
+) {
+  const user = currentUser ?? (await requireUser(request));
   if (!user.admin) {
     throw new Error("Unauthorized");
   }

apps/webapp/app/routes/admin._index.tsx

@@ -1,12 +1,10 @@
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { redirect } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { CopyableText } from "~/components/primitives/CopyableText";
-import { Header1 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -19,9 +17,7 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
-import { useUser } from "~/hooks/useUser";
-import { adminGetUsers, redirectWithImpersonation } from "~/models/admin.server";
-import { commitImpersonationSession, setImpersonationId } from "~/services/impersonation.server";
+import { adminGetUsers } from "~/models/admin.server";
 import { requireUserId } from "~/services/session.server";
 import { createSearchParams } from "~/utils/searchParams";
 
@@ -32,7 +28,7 @@ export const SearchParams = z.object({
 
 export type SearchParams = z.infer<typeof SearchParams>;
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
 
   const searchParams = createSearchParams(request.url, SearchParams);
@@ -44,21 +40,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson(result);
 };
 
-const FormSchema = z.object({ id: z.string() });
-
-export async function action({ request }: ActionFunctionArgs) {
-  if (request.method.toLowerCase() !== "post") {
-    return new Response("Method not allowed", { status: 405 });
-  }
-
-  const payload = Object.fromEntries(await request.formData());
-  const { id } = FormSchema.parse(payload);
-
-  return redirectWithImpersonation(request, id, "/");
-}
-
 export default function AdminDashboardRoute() {
-  const user = useUser();
   const { users, filters, page, pageCount } = useTypedLoaderData<typeof loader>();
 
   return (
@@ -136,7 +118,7 @@ export default function AdminDashboardRoute() {
                     </TableCell>
                     <TableCell>{user.admin ? "✅" : ""}</TableCell>
                     <TableCell isSticky={true}>
-                      <Form method="post" reloadDocument>
+                      <Form method="post" action="/admin/impersonate" reloadDocument>
                         <input type="hidden" name="id" value={user.id} />
                         <Button
                           type="submit"

apps/webapp/app/routes/admin.impersonate.tsx

@@ -0,0 +1,57 @@
+import { redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { redirectWithImpersonation } from "~/models/admin.server";
+import { requireUser } from "~/services/session.server";
+import { validateAndConsumeImpersonationToken } from "~/services/impersonation.server";
+import { logger } from "~/services/logger.server";
+
+const FormSchema = z.object({ id: z.string() });
+
+async function handleImpersonationRequest(request: Request, userId: string): Promise<Response> {
+  const user = await requireUser(request);
+  if (!user.admin) {
+    return redirect("/");
+  }
+  return redirectWithImpersonation(request, userId, "/", user);
+}
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const impersonateUserId = url.searchParams.get("impersonate");
+  const impersonationToken = url.searchParams.get("impersonationToken");
+
+  if (!impersonateUserId) {
+    return redirect("/admin");
+  }
+
+  if (!impersonationToken) {
+    logger.warn("Impersonation request missing token");
+    return redirect("/");
+  }
+
+  // Check admin BEFORE consuming the one-time token
+  const user = await requireUser(request);
+  if (!user.admin) {
+    return redirect("/");
+  }
+
+  const validatedUserId = await validateAndConsumeImpersonationToken(impersonationToken);
+
+  if (!validatedUserId || validatedUserId !== impersonateUserId) {
+    logger.warn("Invalid or expired impersonation token");
+    return redirect("/");
+  }
+
+  return redirectWithImpersonation(request, impersonateUserId, "/", user);
+};
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method.toLowerCase() !== "post") {
+    return new Response("Method not allowed", { status: 405 });
+  }
+
+  const payload = Object.fromEntries(await request.formData());
+  const { id } = FormSchema.parse(payload);
+
+  return handleImpersonationRequest(request, id);
+}