Embed production authentication.

1. Install one package

npm install https://authie.ai/sdk/authie-nextjs-0.3.2.tgz

The versioned package is served over HTTPS by Authie, and your lockfile records its resolved URL and integrity hash.

2. Add the server integration

Create one configuration module and one catch-all route. The SDK handles discovery, PKCE, state, nonce, callback validation, encrypted HTTP-only sessions, refresh rotation, logout, and application-scoped identity checks.

// src/lib/authie.ts
import { createAuthie } from "@authie/nextjs";
export const { auth, currentUser, handlers, proxy } = createAuthie();

// src/app/api/auth/[...authie]/route.ts
import { handlers } from "@/lib/authie";
export const { GET, POST } = handlers;

// proxy.ts
export { proxy } from "@/lib/authie";

Copy the two values displayed when you create the integration into NEXT_PUBLIC_AUTHIE_PUBLISHABLE_KEY and server-only AUTHIE_SECRET_KEY. The SDK derives the remaining OIDC and session configuration.

3. Add the provider

Install one provider near the root of the client component tree.

"use client";

import { AuthieProvider } from "@authie/nextjs/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthieProvider appearance={{ variables: {
      colorPrimary: "#1d6b51",
      borderRadius: "12px",
    } }}>
      {children}
    </AuthieProvider>
  );
}

4. Render drop-in UI

import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignUpButton,
  UserButton,
} from "@authie/nextjs/react";

export function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton>Sign in</SignInButton>
        <SignUpButton>Get started</SignUpButton>
      </SignedOut>
      <SignedIn><UserButton afterSignOutUrl="/" /></SignedIn>
    </header>
  );
}

The buttons open embedded email/password forms by default. The user stays in your application throughout sign-in or sign-up. Set mode="redirect" to use Authie's hosted page as a fallback.

5. Protect UI and show a profile

import { Protect, SignIn, UserProfile } from "@authie/nextjs/react";

export function AccountPage() {
  return (
    <Protect fallback={<SignIn returnTo="/account" />}>
      <UserProfile />
    </Protect>
  );
}

6. Protect server code

Use auth() in Server Components and Route Handlers. It validates the access token against this application's /me endpoint and fails closed.

import { auth } from "@/lib/authie";

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

Session hooks

import { useAuth, useUser } from "@authie/nextjs/react";

const { isLoaded, isSignedIn, signIn, signOut, refresh } = useAuth();
const { user } = useUser();

The user object contains id, name, email, emailVerified, and an optional image. It contains no OAuth tokens.

What the SDK serves

See Authentication for the underlying security guarantees.

Before production

• Register every production origin and exact callback URI in Authie.
• Keep all secrets and tokens out of Client Components.
• Test refresh rotation, logout, disabled users, and cross-application isolation.
• Use server-side authorization for every protected operation.