Next.js Guide

Next.js Authentication

Add production-ready authentication to your Next.js app in 5 minutes. Pre-built sign-in forms, protected routes, middleware, and multi-org support.

Why GitHat for Next.js

GitHat provides drop-in authentication for Next.js App Router applications. Install the SDK, wrap your layout with GitHatProvider, and you have sign-in, sign-up, protected routes, and organization switching working immediately.

Quick Setup

Install `@githat/nextjs`, add the GitHatProvider to your root layout, and create sign-in/sign-up pages using the pre-built form components. Add middleware.ts for edge route protection.

Features Included

Pre-built SignInForm and SignUpForm components, UserButton with avatar dropdown, OrgSwitcher for multi-tenant apps, authMiddleware for edge route protection, useAuth() hook for auth state, automatic JWT refresh, dark theme included.

Install

npm install @githat/nextjs

Example

// app/layout.tsx
import { GitHatProvider } from '@githat/nextjs';
import '@githat/nextjs/styles';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GitHatProvider config={{
          publishableKey: process.env.NEXT_PUBLIC_GITHAT_KEY,
          afterSignInUrl: '/dashboard',
        }}>
          {children}
        </GitHatProvider>
      </body>
    </html>
  );
}
Start building with GitHat

Free to get started. No credit card required.

Related