FunnyAuth

A production-ready, animated authentication experience built with Next.js App Router, TypeScript, NextAuth, and MongoDB.

FunnyAuth combines secure authentication fundamentals with a playful UI system:

• Login/Register mode switching with smooth, layout-aware animation.
• Mode-specific visual themes.
• Typewriter side-panel messaging.
• Evasive submit button behavior when required fields are incomplete.

Table of Contents

• Project Overview
• Core Features
• Tech Stack
• Architecture
• Project Structure
• Authentication Flow
• API Endpoints
• Environment Variables
• Local Development Setup
• Available Scripts
• Security Notes
• Deployment (Vercel)
• Troubleshooting
• Future Improvements
• License

Project Overview

FunnyAuth is a single-page authentication interface with:

• Credentials-based login.
• MongoDB-backed registration.
• Session handling via NextAuth (JWT strategy).
• Responsive, animated UI focused on user engagement.

The project is suitable as:

• A reusable authentication starter.
• A modern UI/UX reference for animated auth workflows.
• A base for expanding to OAuth, dashboard features, and user profile management.

Core Features

Authentication

• User registration via custom API route.
• User login via NextAuth Credentials provider.
• Password hashing with bcryptjs (salt rounds: 12).
• JWT-based session strategy.
• Protected dashboard route.

Validation and Forms

• Zod-based schema validation for login/register.
• React Hook Form integration via zod resolver.
• Client-side and server-side input enforcement.

UI and Motion

• Login/Register mode switch with animated layout transitions.
• Form and side panel swap positions between modes on large screens.
• Typewriter text effect for side-panel messages.
• Mode-based color theme transitions.
• Floating icon accents.
• Evasive submit button behavior if required fields are missing.

Database

• MongoDB Atlas connection through Mongoose.
• User model with:
  • name
  • email (unique)
  • password (hashed)
  • optional profile metadata and login stats

Tech Stack

Frontend

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS v4
• Framer Motion
• Lucide React icons
• React Hot Toast

Forms and Validation

• React Hook Form
• Zod
• @hookform/resolvers

Backend and Auth

• Next.js Route Handlers
• NextAuth v5 (beta)
• bcryptjs
• Mongoose
• MongoDB Atlas

Tooling

• ESLint
• PostCSS

Architecture

High-Level Design

• App Router pages render UI and protected screens.
• Route handlers expose API endpoints under /api.
• NextAuth central configuration handles login sessions and callbacks.
• Mongoose model abstracts user persistence.
• Zod schemas define validation contracts reused across layers.

Key Internal Modules

• Auth config and handlers: src/auth.ts
• MongoDB connection cache: src/lib/mongodb.ts
• User schema/model: src/models/User.ts
• Validation schemas: src/schemas/auth.ts
• Register endpoint: src/app/api/auth/register/route.ts
• NextAuth endpoint: src/app/api/auth/[...nextauth]/route.ts

Project Structure

src/
  app/
    api/
      auth/
        [...nextauth]/route.ts
        register/route.ts
    dashboard/page.tsx
    globals.css
    layout.tsx
    page.tsx
  auth.ts
  components/
    auth/
      AuthWrapper.tsx
      InputField.tsx
      LoginForm.tsx
      RegisterForm.tsx
      SidePanel.tsx
      SubmitButton.tsx
    dashboard/
      LogoutButton.tsx
    providers.tsx
  lib/
    mongodb.ts
  models/
    User.ts
  schemas/
    auth.ts
  types/
    next-auth.d.ts

Authentication Flow

Registration

1. User fills registration form.
2. Client validates through Zod + React Hook Form.
3. Request sent to POST /api/auth/register.
4. Server validates payload via registerSchema.
5. Server checks email uniqueness.
6. Password is hashed with bcryptjs.
7. User is stored in MongoDB.
8. Success response returns basic user data.

Login

1. User submits credentials.
2. NextAuth Credentials provider receives values.
3. Server validates via loginSchema.
4. User fetched from MongoDB by email.
5. bcrypt compare validates password.
6. JWT/session callbacks attach id and title.
7. User redirected to dashboard.

Protected Route

• Dashboard page checks server session via auth().
• Unauthenticated users are redirected to home.

API Endpoints

POST /api/auth/register

Creates a new user account.

Request body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "SuperSecret123!",
  "confirmPassword": "SuperSecret123!"
}

Success response (201):

{
  "success": true,
  "message": "Account created! Welcome to the madness!",
  "user": {
    "id": "...",
    "name": "John Doe",
    "email": "john@example.com"
  }
}

Error responses:

• 400: validation error
• 409: email already exists
• 500: server-side failure

/api/auth/[...nextauth]

Managed by NextAuth route handlers for sign-in/session/auth callbacks.

Environment Variables

Create a file named .env.local in the project root:

MONGODB_URI=your_mongodb_connection_string
AUTH_SECRET=your_minimum_32_character_secret
NEXTAUTH_URL=http://localhost:3000

Optional backward-compatible variable:

NEXTAUTH_SECRET=your_minimum_32_character_secret

Important:

• Never commit secrets to Git.
• Use a different NEXTAUTH_SECRET per environment.
• Restrict MongoDB Atlas network access in production.

Local Development Setup

Prerequisites

• Node.js 20+
• npm 9+
• MongoDB Atlas project and connection string

Install

npm install

Configure Environment

• Add .env.local using the variables above.

Run Development Server

npm run dev

Open:

• http://localhost:3000

Available Scripts

• npm run dev: start development server
• npm run build: create production build
• npm run start: run production server
• npm run lint: run linting

Security Notes

Implemented:

• Password hashing with bcryptjs.
• Server-side validation with Zod.
• Session management with NextAuth.
• Protected route guard on dashboard.

Recommended next hardening steps:

• Add rate limiting to auth endpoints.
• Add CSRF review for custom POST handlers beyond NextAuth.
• Add email verification flow.
• Add account lockout policy after repeated failures.
• Add audit logging for auth events.

Deployment (Vercel)

1. Push repository to GitHub.
2. Import project into Vercel.
3. Set environment variables:
   • MONGODB_URI

• AUTH_SECRET (or NEXTAUTH_SECRET)
• NEXTAUTH_URL (your production URL)

4. Deploy.

After deploy, ensure NEXTAUTH_URL matches your live domain exactly.

Troubleshooting

1) Missing environment values

Symptom:

• Server error mentioning missing MONGODB_URI or auth secret.

Fix:

• Verify .env.local exists and includes all required variables.
• Restart dev server after updating env values.

2) Login fails for valid user

Check:

• Stored password is hashed.
• Email matches lowercase normalized value.
• MongoDB connection is healthy.

3) Registration returns email conflict

Meaning:

• Email already exists in database.

Fix:

• Use a different email or delete the existing test user.

4) Windows path issues with special characters

If your folder path includes special shell characters (for example &), some environments can behave inconsistently.

Recommended:

• Keep project paths simple when possible.
• Use Git Bash as npm script shell if needed:

npm config set script-shell "C:\Program Files\Git\bin\bash.exe"

Future Improvements

• OAuth providers (Google, GitHub).
• Email verification and password reset.
• User profile page and avatar uploads.
• Better role-based authorization.
• End-to-end tests (Playwright/Cypress).
• API rate limiting and bot protection.

License

This project currently has no explicit license file. If you plan to publish or distribute it, add a LICENSE file (for example MIT) and update this section accordingly.