SEQN Auth Next.js Helpers

The Next helper is exported from @seqn/auth-js/next. It avoids importing from next/server, so it can be used in route handlers, server components, and middleware with the Next APIs you already have.

For the fastest App Router setup, use the agent recipe in Next.js App Router prompt. Copying the prompt requires a signed-in SEQN account so the setup can be linked to a dashboard workspace. The target app still supports keyless mode: no project API keys or env vars are required before the first local run.

Environment

Environment variables are optional during keyless development. Add them only after claiming/configuring the application.

NEXT_PUBLIC_SEQN_AUTH_BASE_URL=https://auth.seqn.in
NEXT_PUBLIC_SEQN_AUTH_PUBLISHABLE_KEY=pk_live_your_project_key
SEQN_AUTH_SECRET_KEY=sk_live_your_project_secret

Only the NEXT_PUBLIC_ values belong in browser bundles. Keep SEQN_AUTH_SECRET_KEY server-side.

Server component

import { createSeqnAuthNextHelpers } from "@seqn/auth-js/next";

export default async function Page() {
  const auth = createSeqnAuthNextHelpers();
  const config = await auth.client.loadPublicConfig();
  const hosted = auth.getHostedAuthUrls(null, {
    config,
    returnTo: "https://app.example.com/dashboard"
  });

  return (
    <main>
      <h1>{config.application.name}</h1>
      <a href={hosted.signInUrl}>Sign in</a>
      <a href={hosted.signUpUrl}>Sign up</a>
    </main>
  );
}

App Router auth pages

For a Clerk-like flow, keep the auth windows inside your app:

// app/sign-in/page.tsx
import { SignIn } from "../seqn-auth-provider";

export default function SignInPage() {
  return <SignIn returnTo="http://localhost:3000" projectName="My app" />;
}

// app/sign-up/page.tsx
import { SignUp } from "../seqn-auth-provider";

export default function SignUpPage() {
  return <SignUp returnTo="http://localhost:3000" projectName="My app" />;
}

The rendered button starts the SEQN Auth Google handoff at /auth/login, then returns to the app after the secure hosted session is created.

Route handler backend check

import { createSeqnAuthNextHelpers } from "@seqn/auth-js/next";

export async function GET() {
  const auth = createSeqnAuthNextHelpers();
  const health = await auth.verifyBackendKeyHealth();
  return Response.json(health, { status: health.ok ? 200 : 503 });
}

Middleware redirect

The helper builds URLs. Your middleware still owns policy and uses NextResponse.

import { NextResponse } from "next/server";
import { createSeqnAuthNextHelpers } from "@seqn/auth-js/next";

export function middleware(request) {
  const auth = createSeqnAuthNextHelpers();

  if (request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(auth.createSignInUrl(request));
  }

  return NextResponse.next();
}

This example redirects unconditionally to show the handoff. In production, only redirect when your app has determined the request lacks a valid session.