// Next.js

import "server-only";
import { createServerAuth } from "@monarcode/session-kit/server";
import { z } from "zod";

const API = "https://api.example.com";

const userSchema = z.object({ id: z.number(), firstName: z.string() });
const tokens = z.object({ accessToken: z.string(), refreshToken: z.string() });

export const serverAuth = createServerAuth({
  name: "app",
  user: userSchema,
  secret: process.env.SESSION_SECRET!,
  refresh: async ({ refreshToken, signal }) => {
    const response = await fetch(`${API}/auth/refresh`, {
      method: "POST",
      signal,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refreshToken }),
    });
    // The backend rejected the refresh token: sign out.
    if (response.status === 401) return null;
    if (!response.ok) throw new Error(`Refresh failed (${response.status})`);
    return tokens.parse(await response.json());
  },
});

/** Signs in with your backend, from the server. */
export async function login(username: string, password: string) {
  const response = await fetch(`${API}/auth/login`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password }),
  });
  const body: unknown = await response.json().catch(() => null);
  if (!response.ok) {
    // The backend says why, such as wrong credentials, in `message`.
    const failure = z.object({ message: z.string() }).safeParse(body);
    throw new Error(
      failure.success
        ? failure.data.message
        : `Sign-in failed (${response.status})`,
    );
  }
  return { ...tokens.parse(body), user: userSchema.parse(body) };
}

import "server-only";
import { cache } from "react";

import { safeReturnTo } from "@monarcode/session-kit";
import { nextJar } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import { serverAuth } from "./server";

export const getSession = cache(async () =>
  serverAuth.getSession(nextJar(await cookies())),
);

/** The session, or the sign-in page, which sends the user back to `path`. */
export async function requireSession(path: string) {
  const session = await getSession();
  if (!session)
    redirect(`/login?redirectTo=${encodeURIComponent(safeReturnTo(path))}`);
  return session;
}

import { proxyJar } from "@monarcode/session-kit/next";
import { NextResponse, type NextRequest } from "next/server";

import { serverAuth } from "./lib/auth/server";

export async function proxy(request: NextRequest) {
  const response = NextResponse.next();
  // If the refresh fails, the page still renders with the cookie as it is.
  await serverAuth.refreshIfDue(proxyJar(request, response)).catch(() => {});
  return response;
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

"use server";

import { nextJar } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";
import { z } from "zod";

import { login, serverAuth } from "../lib/auth/server";

async function jar() {
  return nextJar(await cookies(), { writable: true });
}

export async function getSessionAction() {
  return serverAuth.getSession(await jar());
}

const credentials = z.object({ username: z.string(), password: z.string() });

export async function signInAction(input: unknown) {
  const { username, password } = credentials.parse(input);
  try {
    return {
      session: await serverAuth.signIn(
        await jar(),
        await login(username, password),
      ),
    };
  } catch (error) {
    return {
      error: error instanceof Error ? error.message : "Sign-in failed",
    };
  }
}

export async function signOutAction() {
  await serverAuth.signOut(await jar());
}

import { createMirrorAuth } from "@monarcode/session-kit";

import {
  getSessionAction,
  signInAction,
  signOutAction,
} from "../../app/actions";

export type AppSession = NonNullable<
  Awaited<ReturnType<typeof getSessionAction>>
>;

export function createAppAuth(session: AppSession | null) {
  return createMirrorAuth({
    name: "app",
    session,
    revalidate: getSessionAction,
    signIn: async (input: { username: string; password: string }) => {
      const result = await signInAction(input);
      if ("error" in result) throw new Error(result.error);
      return result.session;
    },
    signOut: signOutAction,
  });
}

export type AppAuth = ReturnType<typeof createAppAuth>;

import { createAuthHooks } from "@monarcode/session-kit/react";

import type { AppAuth } from "../lib/auth/client";

export const { AuthProvider, useAuth, useAuthClient } =
  createAuthHooks<AppAuth>();

"use client";

import type { ReactNode } from "react";

import { useMirrorAuth } from "@monarcode/session-kit/react";
import { useRouter } from "next/navigation";

import { createAppAuth, type AppSession } from "../lib/auth/client";
import { AuthProvider } from "./hooks";

export function Providers(props: {
  session: AppSession | null;
  children: ReactNode;
}) {
  const router = useRouter();
  const auth = useMirrorAuth(createAppAuth, props.session, () =>
    router.refresh(),
  );
  return <AuthProvider client={auth}>{props.children}</AuthProvider>;
}

import type { ReactNode } from "react";

import { getSession } from "../lib/auth/session";
import { Providers } from "./providers";

export default async function RootLayout(props: { children: ReactNode }) {
  const session = await getSession();
  return (
    <html lang="en">
      <body>
        <Providers session={session}>{props.children}</Providers>
      </body>
    </html>
  );
}

import { requireSession } from "../lib/auth/session";

export default async function Home() {
  const session = await requireSession("/");
  return <h1>Welcome, {session.user.firstName}</h1>;
}

import { safeReturnTo } from "@monarcode/session-kit";
import { redirect } from "next/navigation";

import { getSession } from "../../lib/auth/session";
import { SignInForm } from "./sign-in-form";

export default async function Login({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  if (await getSession())
    redirect(safeReturnTo((await searchParams).redirectTo));
  return <SignInForm />;
}

"use client";

import { useState, type FormEvent } from "react";

import { useAuthClient } from "../hooks";

export function SignInForm() {
  const auth = useAuthClient();
  const [error, setError] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    try {
      await auth.signIn({
        username: String(form.get("username")),
        password: String(form.get("password")),
      });
    } catch (failure) {
      // An AuthError; its cause is what signInAction returned.
      const cause = failure instanceof Error ? failure.cause : undefined;
      setError(cause instanceof Error ? cause.message : "Sign-in failed");
    }
  }

  return (
    <form onSubmit={submit}>
      <label>
        Username
        <input name="username" autoComplete="username" />
      </label>
      <label>
        Password
        <input
          name="password"
          type="password"
          autoComplete="current-password"
        />
      </label>
      {error && <p role="alert">{error}</p>}
      <button>Sign in</button>
    </form>
  );
}

import { nextJar } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";
import { z } from "zod";

import { serverAuth } from "../../lib/auth/server";
import { requireSession } from "../../lib/auth/session";

export default async function Orders() {
  await requireSession("/orders");
  const credentials = await serverAuth.credentials.get(
    nextJar(await cookies()),
  );
  // requireSession has checked that someone is signed in.
  const response = await fetch("https://api.example.com/orders", {
    headers: { Authorization: `Bearer ${credentials!.accessToken}` },
  });
  if (!response.ok) throw new Error(`Orders failed (${response.status})`);
  const orders = z
    .array(z.object({ id: z.number() }))
    .parse(await response.json());
  return <p>{orders.length} orders</p>;
}

import { nextJar } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";
import { z } from "zod";

import { serverAuth } from "../../../../lib/auth/server";

const rejected = z.object({ sessionId: z.string(), accessToken: z.string() });

export async function POST(request: Request) {
  if (request.headers.get("sec-fetch-site") !== "same-origin")
    return new Response(null, { status: 403 });
  const jar = nextJar(await cookies(), { writable: true });
  const body = rejected.safeParse(await request.json().catch(() => null));
  return Response.json(
    body.success
      ? await serverAuth.clientCredentials.renew(jar, body.data)
      : await serverAuth.clientCredentials.get(jar),
  );
}