// 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 { nextSession } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import { serverAuth } from "./server";

export const session = nextSession(serverAuth, { cookies, redirect });

import { NextResponse, type NextRequest } from "next/server";

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

export function proxy(request: NextRequest) {
  return session.refresh(request, NextResponse.next());
}

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

import { sessionRoute } from "@monarcode/session-kit/next";
import { cookies } from "next/headers";

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

export const { GET, POST } = sessionRoute(serverAuth, { cookies });

"use server";

import { z } from "zod";

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

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

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

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

import { signInAction } from "../../app/actions";
// Types only: left out of the browser's bundle.
import type { serverAuth } from "./server";

export type AppSession = SessionOf<typeof serverAuth>;

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

export type AppAuth = ReturnType<typeof createAppAuth>;

"use client";

import type { ReactNode } from "react";

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

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

// Types `AuthProvider` and the hooks with this client.
declare module "@monarcode/session-kit" {
  interface Register {
    auth: AppAuth;
  }
}

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

import type { ReactNode } from "react";

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

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

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

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

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

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

"use client";

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

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

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) {
      // What the client's signIn option threw, from signInAction's error.
      setError(failure instanceof Error ? failure.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 { createAuthFetch } from "@monarcode/session-kit/http";
import { z } from "zod";

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

export default async function Orders() {
  await session.require("/orders");
  const apiFetch = createAuthFetch(await session.readOnly(), {
    baseUrl: "https://api.example.com/",
  });
  const response = await apiFetch("orders");
  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>;
}