@notchai/auth-ui

Next.js App Router get-started UI for NotchAI Auth Kit — landing, login, register, forgot/reset password, and a dashboard with logout.

Install

pnpm add @notchai/auth-ui @notchai/auth-kit next react react-dom

Import styles once (e.g. in app/layout.tsx):

import "@notchai/auth-ui/styles.css";

Quick start

// app/providers.tsx
"use client";
import { AuthProvider } from "@notchai/auth-ui";

export function Providers({ children }: { children: React.ReactNode }) {
  return <AuthProvider apiBaseUrl="/api/auth">{children}</AuthProvider>;
}

// app/login/page.tsx
"use client";
import { AuthPage, LoginForm } from "@notchai/auth-ui";
import { useRouter } from "next/navigation";

export default function LoginPage() {
  const router = useRouter();
  return (
    <AuthPage>
      <LoginForm
        onSuccess={() => router.push("/dashboard")}
        footer={
          <div className="ak-links">
            <a href="/register">Create account</a>
            <a href="/forgot-password">Forgot password?</a>
          </div>
        }
      />
    </AuthPage>
  );
}

Wire /api/auth/* Route Handlers with createAuth from @notchai/auth-kit (see the examples/next-starter app and recipe).

Components

| Export | Purpose | |--------|---------| | AuthProvider / useAuth | Session state + actions | | LandingPage | Default marketing/get-started hero | | LoginForm / RegisterForm | Auth forms | | ForgotPasswordForm / ResetPasswordForm | Password reset | | DashboardShell | Signed-in shell with logout | | AuthPage | Centered auth layout | | createAuthClient | Headless fetch client |

License

MIT © NotchAI