Add Authie to Next.js.

1. Enroll the application

npx @authie/cli init

The CLI detects Next.js, opens browser approval, and safely writes exactly two values to .env.local: the public NEXT_PUBLIC_AUTHIE_PUBLISHABLE_KEY and server-only AUTHIE_SECRET_KEY. Rerunning it migrates retired Authie environment names.

2. Install the SDK

npm install @authie/nextjs

3. Add the provider

"use client";
import { AuthieProvider } from "@authie/nextjs";

export function Providers({ children }) {
  return (
    <AuthieProvider>
      {children}
    </AuthieProvider>
  );
}

4. Add authentication UI

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

<SignedOut>
  <SignUpButton />
  <SignInButton methods={["authie", "password"]} />
</SignedOut>
<SignedIn><UserButton /></SignedIn>

The password option creates an account scoped to your application. Continue with Authie is an additional SSO option. Verification, recovery, and session renewal are handled by the same SDK.

5. Add the request adapter

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

There is no /api/auth/[...authie] route in the new integration.

6. Protect server code

import { auth } from "@authie/nextjs/server";

export async function POST() {
  const { userId } = await auth.protect({ permission: "tasks.write" });
  // Perform the mutation for userId.
}

Client guards improve presentation; auth.protect() is the authorization boundary.

Before launch

• Configure a same-site Authie Frontend API custom domain
• Test application sign-up, verification, sign-in, and password reset
• Test Authie SSO if you enable it
• Test session-token rotation and logout
• Test disabled users and cross-application isolation
• Enforce permissions in server code

Using another framework? Start with React or the framework-neutral @authie/backend package.