npx keyloom scaffold auth-pages

app/(auth)/
├── layout.tsx - Auth layout wrapper
├── login/
│   └── page.tsx - Login page with form
├── register/
│   └── page.tsx - Registration page
├── forgot-password/
│   └── page.tsx - Password reset request
├── reset-password/
│   └── page.tsx - Password reset form
└── verify-email/
    └── page.tsx - Email verification

import { SignInForm } from "@keyloom/ui/auth";
import { Card } from "@keyloom/ui/components/card";
import Link from "next/link";

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <Card className="w-full max-w-md p-6 space-y-6">
        <div className="text-center">
          <h1 className="text-2xl font-semibold">Welcome back</h1>
          <p className="text-muted-foreground">
            Sign in to your account to continue
          </p>
        </div>

        <SignInForm redirectTo="/dashboard" />

        <div className="text-center text-sm">
          <span className="text-muted-foreground">Don't have an account? </span>
          <Link href="/register" className="text-primary hover:underline">
            Sign up
          </Link>
        </div>
      </Card>
    </div>
  );
}

npx keyloom scaffold admin-panel

app/admin/
├── layout.tsx - Admin layout with navigation
├── page.tsx - Admin dashboard
├── users/
│   ├── page.tsx - User management table
│   └── [id]/page.tsx - User detail page
├── organizations/
│   ├── page.tsx - Organization management
│   └── [id]/members/page.tsx - Member management
└── settings/
    └── page.tsx - System settings

npx keyloom scaffold user-profile

app/profile/
├── layout.tsx - Profile layout
├── page.tsx - Profile overview
├── settings/
│   ├── page.tsx - Account settings
│   ├── security/page.tsx - Security settings
│   └── preferences/page.tsx - User preferences
└── organizations/
    └── page.tsx - Organization memberships

npx keyloom scaffold dashboard

app/dashboard/
├── layout.tsx - Dashboard layout with sidebar
├── page.tsx - Dashboard home
├── components/
│   ├── sidebar.tsx - Navigation sidebar
│   ├── header.tsx - Dashboard header
│   └── user-menu.tsx - User dropdown menu
└── settings/
    └── page.tsx - Dashboard settings

npx keyloom scaffold api-routes

app/api/
├── user/
│   ├── profile/route.ts - User profile API
│   └── preferences/route.ts - User preferences API
├── admin/
│   ├── users/route.ts - User management API
│   └── organizations/route.ts - Organization API
└── webhooks/
    └── auth/route.ts - Authentication webhooks

npx keyloom scaffold middleware

middleware.ts - Enhanced middleware
lib/
├── auth-middleware.ts - Custom auth logic
├── rbac-middleware.ts - Role-based access control
└── rate-limit-middleware.ts - Rate limiting

npx keyloom scaffold

? What would you like to scaffold?
❯ Complete authentication flow
  Admin panel with user management
  User profile and settings
  Protected dashboard
  API routes and endpoints
  Custom middleware configuration

? Which framework are you using?
❯ Next.js App Router
  Next.js Pages Router
  React with Vite
  React with Create React App

? Do you want to include UI components?
❯ Yes, use @keyloom/ui components
  No, generate basic HTML forms
  Custom, I'll provide my own components

? Authentication features to include:
❯◉ Email/password authentication
 ◉ OAuth providers (GitHub, Google, etc.)
 ◯ Magic link authentication
 ◯ Two-factor authentication
 ◯ Passwordless authentication

? Additional features:
❯◉ Role-based access control (RBAC)
 ◉ Organization management
 ◯ Audit logging
 ◯ Rate limiting
 ◯ Email verification

npx keyloom scaffold auth-pages \
  --app-name "My App" \
  --brand-color "#3b82f6" \
  --redirect-url "/dashboard"

# Next.js App Router (default)
npx keyloom scaffold dashboard --framework nextjs-app

# Next.js Pages Router
npx keyloom scaffold dashboard --framework nextjs-pages

# React with Vite
npx keyloom scaffold dashboard --framework react-vite

# Use Keyloom UI components (default)
npx keyloom scaffold auth-pages --ui keyloom

# Use Shadcn/ui components
npx keyloom scaffold auth-pages --ui shadcn

# Generate basic HTML forms
npx keyloom scaffold auth-pages --ui none

import { AuthUIProvider } from "@keyloom/ui";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthUIProvider>
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900">My App</h1>
            <p className="text-gray-600">Secure authentication platform</p>
          </div>
          {children}
        </div>
      </div>
    </AuthUIProvider>
  );
}

import { redirect } from "next/navigation";
import { getSession } from "@keyloom/nextjs";
import { Sidebar } from "./components/sidebar";
import { Header } from "./components/header";

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();
  
  if (!session) {
    redirect("/login");
  }

  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header user={session.user} />
        <main className="flex-1 overflow-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";
import { getSession } from "@keyloom/nextjs";

export async function GET(request: NextRequest) {
  const session = await getSession();
  
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // Fetch user profile data
  const profile = await getUserProfile(session.user.id);
  
  return NextResponse.json(profile);
}

export async function PUT(request: NextRequest) {
  const session = await getSession();
  
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const data = await request.json();
  
  // Update user profile
  const updatedProfile = await updateUserProfile(session.user.id, data);
  
  return NextResponse.json(updatedProfile);
}

const keyloom = require("@keyloom/ui/theme/tailwind-preset.cjs");

module.exports = {
  presets: [keyloom],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@keyloom/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
    },
  },
};

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Error: Template 'custom-template' not found

Error: File already exists: app/login/page.tsx

Warning: Could not detect framework, using default templates

Error: Cannot write to directory