Add SEQN Auth to Next.js App Router

If a Next.js App Router project does not already exist, first create one using:

npx create-next-app@latest my-seqn-auth-app --yes

Start with Secure SEQN Auth onboarding, then install the SEQN Auth SDK from the hosted tarball. Open https://auth.seqn.in/signin or https://auth.seqn.in/signup if the user is not already signed in to SEQN Auth. Ask for the user's email only if it helps prefill the hosted sign-in page. Never ask for or collect the user's password in chat, terminal, logs, environment files, or commit history; password entry must happen only inside the hosted SEQN Auth page.

After hosted sign-in succeeds, ask CLI-style onboarding questions: Project name?, Local app URL?, and Framework detected?. Use those answers as the app label, local return URL, and setup confirmation; skip any question that is already obvious from repository inspection. Preserve existing backend/API base URL and proxy behavior, create proxy.ts with seqnMiddleware() from @seqn/auth-js/next and a literal static matcher array (in src/ if it exists, otherwise project root), create a small client auth shell, add local app/sign-in/page.tsx and app/sign-up/page.tsx, and wrap app/layout.tsx. It uses <SeqnAuthProvider>, <Show>, <UserButton>, <SignIn>, and <SignUp> from @seqn/auth-js/react.

<HostedSignInLink> and <HostedSignUpLink> remain available for apps that prefer fully hosted pages, but this quickstart renders Clerk-like auth windows inside the user app and sends the Google button directly to the secure SEQN Auth handoff.

Latest docs: https://docs.seqn.in/quickstart.html

Hosted copy-prompt page: https://auth.seqn.in/ (Copy setup prompt after signing in)

Keyless Mode

The developer copied this prompt after signing in to SEQN Auth, so do not ask for another dashboard owner. You may ask for an email only to prefill the hosted SEQN Auth sign-in page. Do not ask for a password; password entry stays in the hosted page. Without env vars (NEXT_PUBLIC_SEQN_AUTH_BASE_URL, NEXT_PUBLIC_SEQN_AUTH_PUBLISHABLE_KEY, SEQN_AUTH_SECRET_KEY), the target app uses keyless dev mode with shared Google OAuth and a temporary localhost project. A "Configure your application" prompt appears later in the SEQN Auth Console to claim the project. Do NOT ask for API keys, env vars, Authentik setup, Google OAuth credentials, or production domains before the first local run.

Install

npm install https://auth.seqn.in/sdk/seqn-auth-js-0.1.0.tgz

After install, ask the CLI-style onboarding questions that are still unknown: Project name?, Local app URL?, and Framework detected?. Do not ask for passwords, keys, account setup, domains, Authentik settings, Google OAuth credentials, or redirect URLs before the first local run.

Before editing source files, inspect existing .env* files, API fetch helpers, app/api proxy routes, middleware/proxy files, and old auth routes. Keep API base URLs and proxy targets intact, including API_BASE_URL, NEXT_PUBLIC_API_URL, route-handler proxy targets, reverse-proxy paths, and local backend ports.

Generated proxy.ts

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

export default seqnMiddleware();

export const config = {
  matcher: [
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    "/(api|trpc)(.*)",
    "/__seqn/(.*)",
  ],
};

Generated app/seqn-auth-provider.tsx

"use client";

import * as React from "react";
import { createSeqnAuthReact } from "@seqn/auth-js/react";

const {
  SeqnAuthProvider,
  SignIn,
  SignUp,
  Show,
  UserButton,
} = createSeqnAuthReact(React);

const projectName = "My SaaS";

export { SignIn, SignUp };

export function SeqnAuthShell({ children }: { children: React.ReactNode }) {
  return (
    <SeqnAuthProvider>
      <header>
        <strong>{projectName}</strong>
        <nav>
          <Show when="signed-out">
            <a href="/sign-in">Sign in</a>
            <a href="/sign-up">Sign up</a>
          </Show>
          <Show when="signed-in">
            <UserButton />
          </Show>
        </nav>
      </header>
      {children}
    </SeqnAuthProvider>
  );
}

Generated app/sign-in/page.tsx

import { SignIn } from "../seqn-auth-provider";

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

Generated app/sign-up/page.tsx

import { SignUp } from "../seqn-auth-provider";

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

Updated app/layout.tsx

import { SeqnAuthShell } from "./seqn-auth-provider";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <SeqnAuthShell>
          {children}
        </SeqnAuthShell>
      </body>
    </html>
  );
}

Rules

ALWAYS:

• Use seqnMiddleware() from @seqn/auth-js/next in proxy.ts.
• Use a literal static matcher array in proxy.ts; do not import matcher constants because Next parses this config at compile time.
• Start with Secure SEQN Auth onboarding before editing files.
• Open https://auth.seqn.in/signin or https://auth.seqn.in/signup for account entry when needed.
• Ask for the user's email only if it helps prefill the hosted sign-in page.
• Never ask for or collect the user's password in chat, terminal, logs, environment files, or commit history.
• Keep password entry only inside the hosted SEQN Auth page.
• Ask CLI-style onboarding questions after hosted sign-in: Project name?, Local app URL?, and Framework detected?.
• Add <SeqnAuthShell> inside <body> in app/layout.tsx.
• Add local app/sign-in/page.tsx and app/sign-up/page.tsx using <SignIn> and <SignUp>.
• Import React helpers from @seqn/auth-js/react.
• Import Next helpers from @seqn/auth-js/next.
• Use App Router with app/page.tsx and app/layout.tsx.
• Use the existing package manager.
• Rely on keyless mode, skip account creation and API keys for the first run.
• Preserve existing API base URL/proxy behavior, dashboard data loaders, local backend ports, and unrelated middleware unless an existing test proves a specific auth-related change is required.
• When removing old auth code, separate auth-only callbacks/token cookies from API proxy/session plumbing. Preserve anything still used by existing pages or backend calls.

NEVER:

• Use the Pages Router for new setup.
• Ask users to paste a password into AI chat, terminal prompts, env files, logs, or commits.
• Tell users to get API keys before first run.
• Put SEQN_AUTH_SECRET_KEY in browser code.
• Import from internal package paths.
• Configure Authentik, OAuth clients, redirect URLs, or production Google credentials before the first local run.
• Replace keyless mode with mock auth.
• Redirect primary app sign-in/sign-up buttons to hosted pages instead of local /sign-in and /sign-up pages.
• Add an interactive npm postinstall prompt that can block CI.
• Show npx seqn-auth init as the primary user workflow.

Deprecated

Do not add old custom auth guards, hand-written OIDC callbacks, browser-stored access tokens, or local password forms for this quickstart. Use the in-app SEQN Auth windows and server-side SEQN Auth sessions.

Verify Before Responding

1. Is seqnMiddleware() used in proxy.ts?
2. Is proxy.ts using a literal static matcher array instead of an imported matcher constant?
3. Is SeqnAuthShell inside <body> in app/layout.tsx?
4. Are React imports only from @seqn/auth-js/react?
5. Are Next imports only from @seqn/auth-js/next?
6. Is the app using App Router?
7. Is it using <Show> instead of manual signed-in branching?
8. Do /sign-in and /sign-up render <SignIn> and <SignUp> from the SEQN React helper?
9. Did you avoid asking the user for keys before first run?
10. Did you avoid asking for a password outside the hosted SEQN Auth page?
11. Did you ask only the needed CLI-style onboarding questions?
12. Are existing API base URLs/proxy routes unchanged, and do dashboard/data pages still call the same backend target as before?

If any fails, revise.

After Setup

Have the user sign up as their first test user from the nav. After signup succeeds and an account button appears, congratulate them. If a "Configure your application" callout appears in SEQN Auth Console, tell them to click it. Then recommend exploring: Organizations, Components, Webhooks, and the hosted SEQN Auth Console at https://auth.seqn.in/auth/console.