npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

boltgate

v2.1.0

Published

NextAuth setup tool for Next.js projects

Readme

✨ What You Get

  • 🔐 Complete NextAuth v5 setup with Prisma
  • 🎨 Modern login UI with OAuth providers (GitHub, Google)
  • 🛡️ Route protection middleware with regex support
  • 🗄️ Database schema with User/Account models
  • 🎯 Ready-to-use components and pages
  • 📱 Responsive design with Tailwind CSS
  • 🚀 NEW: Flexible public URL configuration with regex patterns

🚀 Quick Start

1. Install Boltgate

npm install -g boltgate

2. Run in your Next.js project

cd your-nextjs-project
boltgate

3. Set up your database

Add your database URL to .env:

DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

4. Run database migrations

npx prisma migrate dev

5. Start your app

npm run dev

That's it! You now have a complete authentication system. 🎉


🎨 Customization

Adding OAuth Providers

Edit auth.config.ts to add more providers:

import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
import Discord from "next-auth/providers/discord";
import type { NextAuthConfig } from "next-auth";

export default {
  providers: [GitHub, Google, Discord],
} satisfies NextAuthConfig;

Add the required environment variables:

GITHUB_ID="your-github-client-id"
GITHUB_SECRET="your-github-client-secret"
GOOGLE_ID="your-google-client-id"
GOOGLE_SECRET="your-google-client-secret"
DISCORD_ID="your-discord-client-id"
DISCORD_SECRET="your-discord-client-secret"

Customizing Routes

Edit route.ts to define which routes are public or protected. You can now use both exact string matches and regex patterns for more flexible route configuration:

/**
 * Public routes (exact or pattern-based).
 * - Strings = exact matches
 * - Regex = dynamic patterns
 */
export const publicRoutes: (string | RegExp)[] = [
  "/", // homepage (exact match)
  "/about", // about page (exact match)
  /^\/form\/[^/]+\/view$/, // matches /form/{anything}/view (regex pattern)
  /^\/form\/[^/]+\/edit$/, // matches /form/{anything}/edit (regex pattern)
  /^\/blog\/\d{4}\/\d{2}\/\d{2}\/.+$/, // matches /blog/YYYY/MM/DD/title (regex pattern)
];

export const authRoutes = ["/auth/login", "/auth/register"];

export const DEFAULT_LOGIN_REDIRECT = "/dashboard";

Regex Pattern Examples

  • /^\/form\/[^/]+\/view$/ - Matches any form view URL like /form/contact/view, /form/survey/view
  • /^\/blog\/\d{4}\/\d{2}\/\d{2}\/.+$/ - Matches blog posts with date structure like /blog/2024/01/15/my-post
  • /^\/api\/public\/.+$/ - Matches all public API routes like /api/public/users, /api/public/data
  • /^\/docs\/[a-z-]+$/ - Matches documentation pages like /docs/getting-started, /docs/api-reference

Adding Custom User Fields

Extend the Prisma schema in prisma/schema.prisma:

model User {
  id            String          @id @default(cuid())
  name          String?
  email         String          @unique
  emailVerified DateTime?
  image         String?
  role          String          @default("USER")
  bio           String?
  accounts      Account[]
  createdAt     DateTime        @default(now())
  updatedAt     DateTime        @updatedAt
}

Then run:

npx prisma migrate dev

Customizing the Login Component

Edit components/login_component_1.tsx to match your design:

// Add your custom styling, additional providers, or branding
const LoginComponent = () => {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Welcome to MyApp</CardTitle>
        <CardDescription>Sign in to continue</CardDescription>

        {/* Your custom login buttons */}
        <Button onClick={() => signIn("github")}>
          <FaGithub />
          Continue with GitHub
        </Button>
      </CardHeader>
    </Card>
  );
};

📁 Project Structure

After running Boltgate, your project will have:

your-project/
├── app/
│   ├── (protected)/
│   │   └── dashboard/page.tsx     # Protected dashboard
│   ├── api/auth/[...nextauth]/
│   │   └── route.ts               # Auth API routes
│   ├── auth/login/page.tsx        # Login page
│   └── lib/index.ts               # Prisma client
├── components/
│   └── login_component_1.tsx      # Login component
├── auth.config.ts                 # Auth providers config
├── auth.ts                        # Main auth setup
├── middleware.ts                  # Route protection
├── route.ts                       # Route constants
└── prisma/schema.prisma           # Database schema

🔧 Common Tasks

Adding a New Protected Page

  1. Create your page in app/(protected)/your-page/page.tsx
  2. The middleware will automatically protect it

Adding a New Public Page

  1. Add the route to publicRoutes in route.ts (supports both exact strings and regex patterns)
  2. Create your page normally

Examples:

  • For exact routes: "/about", "/contact"
  • For dynamic routes: /^\/product\/[^/]+$/ (matches /product/laptop, /product/phone)

Customizing User Session

Edit auth.ts to add custom session data:

export const { auth, handlers, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(client),
  callbacks: {
    async session({ session, token }) {
      if (token.sub && session.user) {
        session.user.id = token.sub;
        // Add custom fields
        session.user.role = token.role;
      }
      return session;
    },
  },
  // ... rest of config
});

🐛 Troubleshooting

"Module not found" errors

rm -rf node_modules package-lock.json
npm install

Database connection issues

  • Check your DATABASE_URL in .env
  • Make sure your database is running
  • Verify the connection string format

OAuth provider not working

  • Verify client ID and secret in .env
  • Check redirect URLs in provider settings
  • Ensure NEXTAUTH_URL is set correctly

Prisma client not generated

npx prisma generate

📦 What Gets Installed

Boltgate automatically installs:

  • next-auth@beta - Authentication library
  • @auth/prisma-adapter - Database adapter
  • @prisma/client - Database client
  • prisma - Database toolkit
  • react-icons - UI icons

🤝 Contributing

Found a bug or want to add a feature? We'd love your help!

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

MIT License - feel free to use in your projects!


Made with ❤️ by Jay Shnde