OAuth Authentication Setup

Complete guide to the Google OAuth implementation in this application

Authentication Architecture
How OAuth is implemented in this app

Technology Stack

  • Auth.js (NextAuth v5) - Modern authentication library for Next.js
  • Google OAuth 2.0 - Secure authentication provider
  • Prisma Adapter - Database session management
  • PostgreSQL (Neon) - User and session storage

Authentication Flow

  1. User clicks "Sign in with Google"
  2. Redirected to Google OAuth consent screen
  3. User authorizes the application
  4. Google returns authorization code
  5. Auth.js exchanges code for access token
  6. User profile is fetched and stored in database
  7. Session is created and user is authenticated
Configuration Details
Environment variables and setup requirements

Required Environment Variables

AUTH_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
DATABASE_URL=your-database-connection

Google Cloud Console Setup

  1. Create project in Google Cloud Console
  2. Enable Google OAuth API
  3. Configure OAuth consent screen
  4. Create OAuth 2.0 credentials (Web application)
  5. Add authorized redirect URIs:
    • http://localhost:3000/api/auth/callback/google
    • https://your-domain.com/api/auth/callback/google
Database Schema
Auth.js tables managed by Prisma

User Table

Stores user profile information (id, name, email, image)

Account Table

OAuth provider details and tokens (Google OAuth data)

Session Table

Active user sessions with expiration timestamps

VerificationToken Table

Email verification tokens (if email auth is added)

Implementation Files
Key files in the authentication system
auth.tsAuth.js configuration and exports
middleware.tsRoute protection and redirects
app/api/auth/[...nextauth]/route.tsAPI handler
app/auth/signin/page.tsxSign-in page
app/components/user-menu.tsxUser dropdown menu
prisma/schema.prismaDatabase models