Next.js

Install

@trylath/sdk is the server half — it holds your secret key and calls operations. @trylath/react is the browser half and never sees a secret key.Two packages because they have opposite security properties, and one package that did both would make it easy to import the wrong one into a client component.

npm i @trylath/sdk @trylath/react

Send from the server

A route handler or a server action is where the secret key lives. Keep it in LATH_API_KEY and never in anything prefixed NEXT_PUBLIC_ — that prefix is what decides whether a value is compiled into the client bundle.

// app/api/welcome/route.ts
import { createLath } from "@trylath/sdk";

const lath = createLath({ key: process.env.LATH_API_KEY });

export async function POST(req: Request) {
  const { email } = await req.json();
  const { result } = await lath.email.send({
    to: email,
    subject: "Welcome",
    text: "Glad you are here.",
  });
  return Response.json({ messageId: result.messageId, status: result.status });
}

Sign-in, in the browser

LathProvider takes the publishable key and the environment id. SignIn renders the whole flow; SignedIn and SignedOut switch on the session; UserButton is the account menu.These are safe in a client component by construction — a publishable key can only call the operations marked auth:public.

// app/providers.tsx
"use client";
import { LathProvider } from "@trylath/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <LathProvider
      publishableKey={process.env.NEXT_PUBLIC_LATH_PUBLISHABLE_KEY!}
      environmentId={process.env.NEXT_PUBLIC_LATH_ENV_ID!}
    >
      {children}
    </LathProvider>
  );
}

Protect a route handler

requireUser verifies the caller’s access token against your environment’s published keys. It does not call Lath on every request — the signature is checked locally against a JWKS, so an authenticated route costs no round trip.It throws when the token is missing or invalid, so the happy path below is the only path you write.

// app/api/me/route.ts
import { requireUser } from "@trylath/sdk";

export async function GET(req: Request) {
  const user = await requireUser(req, {
    environmentId: process.env.NEXT_PUBLIC_LATH_ENV_ID!,
  });
  return Response.json({ userId: user.userId, amr: user.amr });
}

Receive webhooks

A route handler must read the raw body — await req.text(), not await req.json() — because the signature is over the exact bytes that were sent. See the webhooks guide for why re-serialising breaks it.

// app/api/hooks/lath/route.ts
import { verifyWebhook } from "@trylath/sdk";

export async function POST(req: Request) {
  const raw = await req.text();
  if (!verifyWebhook(process.env.LATH_WEBHOOK_SECRET!, req.headers, raw)) {
    return new Response("bad signature", { status: 401 });
  }
  return new Response("ok");
}

Overview

Get started

Frameworks

Sending

Platform

Surfaces