Next.js Authentication Generator

Create a Next.js application with built-in authentication in seconds! Choose between Firebase or MongoDB as your authentication backend.

Features

• 🚀 Quick Setup: Generate a complete Next.js app with authentication pre-configured
• 🔥 Firebase Support: Full Firebase Authentication integration
• 🍃 MongoDB Support: Complete MongoDB authentication with JWT
• 📦 Ready to Use: Includes login/signup pages, auth context, and API routes
• 🎨 Modern UI: Beautiful, responsive authentication forms with Tailwind CSS
• 🔒 Secure: Industry-standard security practices built-in

Quick Start

Create a New Project

npx nextjs-authentication-node my-app

Or install globally:

npm install -g nextjs-authentication-node
create-nextjs-auth my-app

Setup Process

The CLI will guide you through:

1. Project Name: Enter your desired project name
2. Auth Provider: Choose between Firebase or MongoDB
3. Configuration: Enter your Firebase credentials or MongoDB URI
4. Automatic Setup: The tool will:
   • Create a Next.js project with TypeScript and Tailwind CSS
   • Install all necessary dependencies
   • Generate authentication files and API routes
   • Create a sample login/signup page
   • Configure environment variables

Start Development

cd my-app
npm run dev

Visit http://localhost:3000/login to see your authentication page!

What Gets Generated

For Firebase Projects

• ✅ lib/firebase.ts - Firebase configuration and initialization
• ✅ context/AuthContext.tsx - React context for authentication state
• ✅ app/login/page.tsx - Login and signup page
• ✅ .env.local - Environment variables (Firebase config)
• ✅ Updated app/layout.tsx with AuthProvider

For MongoDB Projects

• ✅ lib/mongodb.ts - MongoDB client configuration
• ✅ context/AuthContext.tsx - React context for authentication state
• ✅ app/api/auth/login/route.ts - Login API endpoint
• ✅ app/api/auth/signup/route.ts - Signup API endpoint
• ✅ app/api/auth/me/route.ts - Get current user endpoint
• ✅ app/api/auth/logout/route.ts - Logout endpoint
• ✅ app/login/page.tsx - Login and signup page
• ✅ .env.local - Environment variables (MongoDB URI, JWT secret)
• ✅ Updated app/layout.tsx with AuthProvider

Usage

Using the Auth Hook

"use client";

import { useAuth } from "@/context/AuthContext";

export default function ProfilePage() {
  const { user, loading, logout } = useAuth();

  if (loading) return <div>Loading...</div>;

  if (!user) return <div>Please login</div>;

  return (
    <div>
      <h1>Welcome, {user.email}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Protecting Routes

"use client";

import { useAuth } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function ProtectedPage() {
  const { user, loading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !user) {
      router.push("/login");
    }
  }, [user, loading, router]);

  if (loading) return <div>Loading...</div>;
  if (!user) return null;

  return <div>Protected content</div>;
}

Environment Variables

Firebase

After running the setup, update your .env.local with real Firebase credentials:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-app.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef

MongoDB

After running the setup, update your .env.local with your MongoDB URI:

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/dbname
JWT_SECRET=your-generated-secret

API Reference

Auth Context

The useAuth() hook provides:

• user: Current user object (or null if not authenticated)
• loading: Boolean indicating if auth state is being loaded
• login(email, password): Function to log in a user
• signup(email, password): Function to create a new user
• logout(): Function to log out the current user

Customization

The generated files are fully customizable. You can:

• Modify the login/signup UI in app/login/page.tsx
• Add more auth methods (Google, GitHub, etc.) to the context
• Extend the user model with additional fields
• Add password reset functionality
• Implement email verification

Requirements

• Node.js 16.8 or later
• npm or yarn

License

ISC

Support

For issues and questions, please visit our GitHub repository.

Made with ❤️ by GoldenSalman