@authio/nextjs

Install

pnpm add @authio/nextjs @authio/react

Edge middleware

Verifies the authio_session cookie against the cached JWKS from auth-core. On success, attaches x-authio-user-id, x-authio-org-id, and x-authio-role headers to the request so downstream Server Components can read them via headers().

// middleware.ts
import { authMiddleware } from "@authio/nextjs";

export default authMiddleware({
  apiUrl: process.env.NEXT_PUBLIC_AUTHIO_API_URL,
  issuer: "https://api.authio.com",
  audience: "authio",
  publicRoutes: ["/", "/pricing", "/sign-in", /^\/api\/public\//],
  signInUrl: "/sign-in",
});

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

auth() — Server Components, Route Handlers, Server Actions

// app/dashboard/page.tsx
import { auth } from "@authio/nextjs/server";

export default async function DashboardPage() {
  const { userId, orgId, role, sessionId } = await auth({
    apiUrl: process.env.NEXT_PUBLIC_AUTHIO_API_URL,
  });
  if (!userId) {
    return <p>Please sign in.</p>;
  }
  return <Members orgId={orgId!} />;
}

Route Handler example

// app/api/me/route.ts
import { auth } from "@authio/nextjs/server";

export async function GET() {
  const { userId, orgId } = await auth();
  if (!userId) return new Response("Unauthorized", { status: 401 });
  return Response.json({ userId, orgId });
}

Server Action example

"use server";
import { auth } from "@authio/nextjs/server";

export async function leaveOrg() {
  const { userId, orgId, sessionId } = await auth();
  if (!userId || !orgId || !sessionId) throw new Error("Unauthorized");
  // Call management-api with userId/orgId here, scoped by your sk_live_ key
}

Edge runtime requirements

The middleware runs in the Edge runtime which has Web Crypto but not Node’s crypto module. @authio/nextjs uses jose which works in both runtimes, so the same import path works on Vercel Edge, Vercel Node, Cloudflare, or self-hosted Next.