// React Router with server rendering

import { z } from "zod";

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

export type User = z.infer<typeof userSchema>;

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

import { userSchema } from "./user";

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

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 { redirect, type MiddlewareFunction } from "react-router";

import {
  cookieJarMiddleware,
  routerJar,
} from "@monarcode/session-kit/react-router/server";

import { serverAuth } from "./session.server";

const refreshSession: MiddlewareFunction<Response> = async (
  { context },
  next,
) => {
  // A failed refresh shows up when a loader reads the session.
  await serverAuth.refreshIfDue(routerJar(context)).catch(() => {});
  const response = await next();
  // A copy: some responses, such as `fetch`'s, can't change their headers.
  const page = new Response(response.body, response);
  page.headers.set("Cache-Control", "private, no-store");
  return page;
};

/** For the root route: the jar first, so it wraps the rest. */
export const sessionMiddleware = [cookieJarMiddleware, refreshSession];

/** Sends signed-out users to the sign-in page, which brings them back. */
export const requireSession: MiddlewareFunction<Response> = async ({
  context,
  url,
}) => {
  if (!(await serverAuth.getSession(routerJar(context))))
    throw redirect(
      `/login?redirectTo=${encodeURIComponent(url.pathname + url.search)}`,
    );
};

import {
  Form,
  redirect,
  useActionData,
  type ActionFunctionArgs,
  type LoaderFunctionArgs,
} from "react-router";

import { safeReturnTo } from "@monarcode/session-kit";
import { routerJar } from "@monarcode/session-kit/react-router/server";

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

export async function loader({ context, url }: LoaderFunctionArgs) {
  if (await serverAuth.getSession(routerJar(context)))
    throw redirect(safeReturnTo(url.searchParams.get("redirectTo")));
  return null;
}

export async function action({ request, context, url }: ActionFunctionArgs) {
  const form = await request.formData();
  try {
    await serverAuth.signIn(
      routerJar(context),
      await login(String(form.get("username")), String(form.get("password"))),
    );
  } catch (error) {
    return {
      error: error instanceof Error ? error.message : "Sign-in failed",
    };
  }
  throw redirect(safeReturnTo(url.searchParams.get("redirectTo")));
}

export default function Login() {
  const result = useActionData<typeof action>();
  return (
    <Form method="post">
      <label>
        Username
        <input name="username" autoComplete="username" />
      </label>
      <label>
        Password
        <input
          name="password"
          type="password"
          autoComplete="current-password"
        />
      </label>
      {result?.error && <p role="alert">{result.error}</p>}
      <button>Sign in</button>
    </Form>
  );
}

import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";

import { routerJar } from "@monarcode/session-kit/react-router/server";

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

export async function loader({ context }: LoaderFunctionArgs) {
  return Response.json(await serverAuth.getSession(routerJar(context)));
}

export async function action({ request, context }: ActionFunctionArgs) {
  if (request.headers.get("sec-fetch-site") !== "same-origin")
    return new Response(null, { status: 403 });
  await serverAuth.signOut(routerJar(context));
  return Response.json(null);
}

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

import type { User } from "./user";

export type AppSession = Session<User>;

async function session(method: "GET" | "POST") {
  const response = await fetch("/auth/session", { method });
  if (!response.ok) throw new Error(`Session failed (${response.status})`);
  return (await response.json()) as AppSession | null;
}

export function createAppAuth(initial: AppSession | null) {
  return createMirrorAuth({
    name: "app",
    session: initial,
    revalidate: () => session("GET"),
    signOut: () => session("POST"),
  });
}

export type AppAuth = ReturnType<typeof createAppAuth>;

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

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

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

import type { ReactNode } from "react";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  useLoaderData,
  useRevalidator,
  type LoaderFunctionArgs,
} from "react-router";

import { useMirrorAuth } from "@monarcode/session-kit/react";
import { routerJar } from "@monarcode/session-kit/react-router/server";

import { createAppAuth } from "./auth/client";
import { sessionMiddleware } from "./auth/middleware.server";
import { serverAuth } from "./auth/session.server";
import { AuthProvider } from "./hooks";

export const middleware = sessionMiddleware;

export async function loader({ context }: LoaderFunctionArgs) {
  return { session: await serverAuth.getSession(routerJar(context)) };
}

export function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  const { session } = useLoaderData<typeof loader>();
  const { revalidate } = useRevalidator();
  const auth = useMirrorAuth(createAppAuth, session, revalidate);
  return (
    <AuthProvider client={auth}>
      <Outlet />
    </AuthProvider>
  );
}

import { Outlet } from "react-router";

import { requireSession } from "../auth/middleware.server";

export const middleware = [requireSession];

// So navigation in the browser runs the middleware.
export const loader = () => null;

export default function Protected() {
  return <Outlet />;
}

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

export default function Home() {
  const user = useAuth((state) => state.user);
  return <h1>Welcome, {user?.firstName}</h1>;
}

import { redirect, useLoaderData, type LoaderFunctionArgs } from "react-router";

import { routerJar } from "@monarcode/session-kit/react-router/server";
import { z } from "zod";

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

export async function loader({ context }: LoaderFunctionArgs) {
  const credentials = await serverAuth.credentials.get(routerJar(context));
  if (!credentials) throw redirect("/login?redirectTo=/orders");
  const response = await fetch("https://api.example.com/orders", {
    headers: { Authorization: `Bearer ${credentials.accessToken}` },
  });
  if (!response.ok) throw new Error(`Orders failed (${response.status})`);
  return z.array(z.object({ id: z.number() })).parse(await response.json());
}

export default function Orders() {
  const orders = useLoaderData<typeof loader>();
  return <p>{orders.length} orders</p>;
}

import type { ActionFunctionArgs } from "react-router";

import { routerJar } from "@monarcode/session-kit/react-router/server";
import { z } from "zod";

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

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

export async function action({ request, context }: ActionFunctionArgs) {
  if (request.headers.get("sec-fetch-site") !== "same-origin")
    return new Response(null, { status: 403 });
  const jar = routerJar(context);
  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),
  );
}