Documentation
Complete guide to the Auth.js Template - a modern Next.js application with authentication, database integration, and beautiful UI components.
Quick Start
Get up and running with the Auth.js Template in minutes
1. Clone the Repository
git clone https://github.com/ganiny/authjs-template.git
2. Install Dependencies
npm install
3. Set Up Environment
cp .env.example .env.local
4. Run Development Server
npm run dev
Authentication
Secure authentication with multiple providers
Google OAuth
GitHub OAuth
Twitter OAuth
JWT Sessions
Protected Routes
Database
Prisma ORM with PostgreSQL support
Prisma ORM
PostgreSQL
Type-safe Queries
Migrations
User Management
UI Components
Beautiful, accessible components with shadcn/ui
shadcn/ui Components
Dark/Light Mode
Responsive Design
Tailwind CSS
Accessible
Development
Modern development tools and practices
TypeScript
ESLint
Turbopack
Hot Reload
Next.js 15
Environment Variables
Configure your environment variables for authentication and database
Authentication
AUTH_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
Database
DATABASE_URL=postgresql://...
DIRECT_URL=postgresql://...
Note: Most cloud database providers will give you a special connection string for Prisma ORM. Make sure to copy this connection string into your
.env file as DATABASE_URL (and DIRECT_URL if needed).Project Structure
Understanding the organization of your codebase
authjs-template/ ├── src/ │ ├── app/ # Next.js App Router │ │ ├── api/ # API routes │ │ ├── login/ # Login page │ │ ├── profile/ # Profile page │ │ └── page.tsx # Home page │ ├── components/ # Reusable components │ │ ├── ui/ # shadcn/ui components │ │ ├── Header.tsx # Navigation header │ │ └── Footer.tsx # Footer component │ ├── auth.ts # Auth.js configuration │ ├── auth.config.ts # Auth providers │ └── middleware.ts # Route protection ├── prisma/ # Database schema & migrations ├── public/ # Static assets └── package.json # Dependencies & scripts
Next Steps
What to do after setting up your project
1
Customize Authentication
Add more OAuth providers or implement custom authentication logic in the auth configuration.
2
Extend Database Schema
Modify the Prisma schema to add your own models and relationships.
3
Add New Pages
Create new pages and components following the existing patterns and styling.
4
Deploy Your Application
Deploy to Vercel, Netlify, or your preferred hosting platform.
Resources
Helpful links and documentation for further learning