All of the mid-session and step-up auth work

clients/web/src/components/groups/ReAuthBanner/ReAuthBanner.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { ReAuthBanner } from "./ReAuthBanner";
+
+describe("ReAuthBanner", () => {
+  it("renders message and action buttons", async () => {
+    const user = userEvent.setup();
+    const onReauthenticate = vi.fn();
+    const onDismiss = vi.fn();
+
+    renderWithMantine(
+      <ReAuthBanner
+        message="Sign in again to continue."
+        onReauthenticate={onReauthenticate}
+        onDismiss={onDismiss}
+      />,
+    );
+
+    expect(screen.getByText("Re-authentication required")).toBeInTheDocument();
+    expect(screen.getByText("Sign in again to continue.")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Re-authenticate" }));
+    expect(onReauthenticate).toHaveBeenCalledOnce();
+
+    const [, closeButton] = screen.getAllByRole("button");
+    await user.click(closeButton);
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+});

clients/web/src/components/groups/ReAuthBanner/ReAuthBanner.tsx

@@ -0,0 +1,36 @@
+import { Alert, Button, Group } from "@mantine/core";
+
+export interface ReAuthBannerProps {
+  message: string;
+  onReauthenticate: () => void;
+  onDismiss: () => void;
+}
+
+export function ReAuthBanner({
+  message,
+  onReauthenticate,
+  onDismiss,
+}: ReAuthBannerProps) {
+  return (
+    <Alert
+      color="red"
+      variant="light"
+      title="Re-authentication required"
+      withCloseButton
+      onClose={onDismiss}
+      styles={{
+        root: {
+          backgroundColor: "var(--mantine-color-body)",
+          border: "1px solid var(--mantine-color-red-3)",
+        },
+      }}
+    >
+      <Group justify="space-between" align="center" wrap="nowrap" gap="md">
+        <span>{message}</span>
+        <Button size="xs" variant="filled" onClick={onReauthenticate}>
+          Re-authenticate
+        </Button>
+      </Group>
+    </Alert>
+  );
+}