SDKs / Client

Next.js

TypeScript Themeable Playground

@identra/nextjs

App Router integration: client components from React, plus local server-side token verification.

Install

pnpm add @identra/nextjs

Client provider

The provider and UI are client-side; render them from a `"use client"` boundary in your root layout.

tsx

// app/providers.tsx
"use client";
import { IdentraProvider } from "@identra/nextjs";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <IdentraProvider
      baseUrl="http://localhost:8080"
      applicationId={process.env.NEXT_PUBLIC_IDENTRA_APP_ID!}
    >
      {children}
    </IdentraProvider>
  );
}

Protect a Server Component

Create the helpers once; `auth()` verifies the request's token locally (EdDSA via cached JWKS) — no network on the hot path.

tsx

// app/lib/identra.ts
import { createIdentraAuth } from "@identra/nextjs/server";

export const { auth, protect } = createIdentraAuth({
  baseUrl: process.env.IDENTRA_BASE_URL!,
  applicationId: process.env.IDENTRA_APP_ID!,
});

// app/dashboard/page.tsx
import { redirect } from "next/navigation";
import { auth } from "@/app/lib/identra";

export default async function Dashboard() {
  const claims = await auth();          // IdentraClaims | null
  if (!claims) redirect("/sign-in");
  return <p>Signed in as {claims.sub}</p>;
}

Route handler

`protect()` throws `IdentraError("unauthorized")` when there's no valid session.

// app/api/me/route.ts
import { protect } from "@/app/lib/identra";

export async function GET(req: Request) {
  const claims = await protect(req);
  return Response.json({ userId: claims.sub });
}

Drop-in components

SignInSignUpUserButtonSignedInSignedOutProtect

Try these in the playground

API

IdentraProvideruseIdentra()createIdentraAuth()auth()protect()