- Install next-auth@beta, bcryptjs, zod, and @auth/prisma-adapter - Create auth.ts with credentials provider and JWT session strategy - Create auth.config.ts for edge-compatible middleware configuration - Add NextAuth type extensions for session and JWT - Create API route handler for authentication - Configure environment variables for NextAuth - Add AUTH_SETUP.md documentation Task: 1. Set up authentication infrastructure Requirements: 1.1, 2.1
2.8 KiB
2.8 KiB
Authentication Setup
This document describes the authentication infrastructure setup for the Ultimate Lists App.
Installed Dependencies
- next-auth@5.0.0-beta - NextAuth.js v5 (Auth.js) for authentication
- bcryptjs - Password hashing library
- zod - Schema validation for forms and API inputs
- @auth/prisma-adapter - Prisma adapter for NextAuth
- @types/bcryptjs - TypeScript types for bcryptjs
Configuration Files
auth.ts
Main authentication configuration file that exports:
handlers- HTTP handlers for the auth API routessignIn- Function to sign in userssignOut- Function to sign out usersauth- Function to get the current session
Features:
- Credentials provider for email/password authentication
- JWT session strategy
- Password verification with bcrypt
- Custom callbacks for JWT and session
- Custom auth pages configuration
auth.config.ts
Edge-compatible auth configuration for middleware:
- Route authorization logic
- Custom auth pages
- Provider configuration placeholder
types/next-auth.d.ts
TypeScript type extensions for NextAuth:
- Adds
idfield to Session user - Adds
idfield to JWT token - Defines User interface
app/api/auth/[...nextauth]/route.ts
API route handler that exports GET and POST handlers from NextAuth.
Environment Variables
The following environment variables have been added to .env:
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here-please-change-in-production
AUTH_SECRET=your-secret-key-here-please-change-in-production
Important: Generate secure secrets for production using:
openssl rand -base64 32
Next Steps
- Update the Prisma schema to add User, Collaborator, and Invitation models (Task 2)
- Implement user registration functionality (Task 3)
- Implement authentication functionality (Task 4)
- Create authentication UI components (Task 6)
- Implement route protection middleware (Task 7)
Usage
Getting the current session
import { auth } from "@/auth"
export default async function Page() {
const session = await auth()
if (!session?.user) {
// User is not authenticated
return <div>Please log in</div>
}
// User is authenticated
return <div>Welcome {session.user.email}</div>
}
Sign in
import { signIn } from "@/auth"
await signIn("credentials", {
email: "user@example.com",
password: "password123",
redirectTo: "/",
})
Sign out
import { signOut } from "@/auth"
await signOut({ redirectTo: "/auth/login" })
Security Notes
- Passwords are hashed using bcrypt before storage
- JWT tokens are used for stateless sessions
- Session tokens are stored in httpOnly cookies
- All credentials are validated using Zod schemas
- Failed login attempts return null without revealing whether email exists