react / next.js

@nexauth/nextjs

install

npm i @nexauth/nextjs

<SignIn> — plug-in screen, fully branded

app/login/page.tsx

import { SignIn } from "@nexauth/nextjs";

export default function Page() {
  return (
    <SignIn
      publishableKey="pk_live_..."
      methods={["whatsapp", "google", "passkey", "email"]}
      branding={{
        name: "Acme Health",
        logo: "/logo.png",          // or hosted URL
        color: "#7c6cff",           // primary action color
        theme: "dark",              // dark | light
        securedBy: true,            // "Secured by NexAuth" — required on Free
      }}
      onSuccess={(session) => router.push("/dashboard")}
    />
  );
}

The same branding + methods contract is shared across all SDKs (Flutter NexOtpScreen, Compose NexAuthScreen, Swift NexAuthView) — configure once in the dashboard, it renders identically everywhere.

<OtpInput> — animated boxes

custom

import { OtpInput } from "@nexauth/nextjs";

<OtpInput
  length={6}
  color="#7c6cff"           // active border + focus
  onComplete={(code) => verify(code)}
/>
// paste-strip, backspace-walk, numeric keyboard, autofill

Middleware + server

middleware.ts

import { nexauthMiddleware } from "@nexauth/nextjs/server";
export default nexauthMiddleware({ publicRoutes: ["/", "/pricing"] });
// offline RS256 verify via JWKS — zero API calls