Auth Core

1import { authLaunchChecks, authProviderOptions, authRouteGroups } from "@/lib/stackfoundry/auth-options";
2 
3export default function AuthArchitecturePage() {
4  return (
5    <main className="flex flex-col gap-6 p-6">
6      <div>
7        <h1 className="text-2xl font-semibold">Auth Architecture</h1>
8        <p className="text-muted-foreground">
9          Choose one primary auth provider, then keep route groups and authorization boundaries explicit.
10        </p>
11      </div>
12 
13      <section className="grid gap-3 md:grid-cols-2">
14        {authProviderOptions.map((provider) => (
15          <div className="rounded-lg border p-4" key={provider.id}>
16            <h2 className="font-medium">{provider.label}</h2>
17            <p className="mt-2 text-sm text-muted-foreground">{provider.bestFor}</p>
18            <code className="mt-3 block rounded border bg-muted p-2 text-xs">{provider.installCommand}</code>
19          </div>
20        ))}
21      </section>
22 
23      <section className="rounded-lg border p-4">
24        <h2 className="font-medium">Recommended App Router layout</h2>
25        <div className="mt-4 grid gap-3">
26          {authRouteGroups.map((group) => (
27            <div className="rounded-md border p-3 text-sm" key={group.path}>
28              <code>{group.path}</code>
29              <p className="mt-1 text-muted-foreground">{group.purpose}</p>
30            </div>
31          ))}
32        </div>
33      </section>
34 
35      <section className="rounded-lg border p-4">
36        <h2 className="font-medium">Before production</h2>
37        <ul className="mt-3 grid gap-2 text-sm text-muted-foreground">
38          {authLaunchChecks.map((check) => (
39            <li key={check}>{check}</li>
40          ))}
41        </ul>
42      </section>
43    </main>
44  );
45}