Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 2.39 KB

NEXTAUTH_MIGRATION.md

File metadata and controls

85 lines (65 loc) · 2.39 KB

NextAuth Migration Complete

Overview

Successfully migrated from Clerk to NextAuth with Google OAuth provider.

Changes Made

1. Authentication Setup

  • ✅ Removed all Clerk references from codebase
  • ✅ Created NextAuth configuration in src/pages/api/auth/[...nextauth].ts
  • ✅ Updated environment variables for Google OAuth
  • ✅ Created AuthContext wrapper for NextAuth

2. Database Schema Updates

  • ✅ Updated User model to use string IDs (required for NextAuth)
  • ✅ Added NextAuth required tables: Account, Session, VerificationToken
  • ✅ Updated foreign key references in Booking, Review, and Post models

3. Component Updates

  • ✅ Created new AuthContext using NextAuth hooks
  • ✅ Updated LayoutWrapper to use SessionProvider
  • ✅ Updated login/register pages to use Google OAuth
  • ✅ Fixed all components using logout to use signOut
  • ✅ Created reusable AuthButton component

4. Configuration Cleanup

  • ✅ Removed Clerk CSP references from next.config.ts
  • ✅ Updated environment file comments

Next Steps

1. Database Migration

Run the following commands to apply the schema changes:

npm run db:migrate

2. Test Authentication

  1. Start the development server: npm run dev
  2. Navigate to /login or /register
  3. Test Google OAuth sign-in
  4. Verify user data is stored correctly

3. Environment Variables

Ensure these are set in your .env file:

  • NEXTAUTH_URL=http://localhost:3000
  • NEXTAUTH_SECRET=your-secret-here
  • GOOGLE_CLIENT_ID=your-google-client-id
  • GOOGLE_CLIENT_SECRET=your-google-client-secret

Authentication Flow

  1. User clicks "Sign In" → triggers signIn('google')
  2. Redirected to Google OAuth consent screen
  3. After approval, redirected back to app
  4. NextAuth creates/updates user in database
  5. Session is established and user is authenticated

Available Auth Methods

import { useAuth } from '@/contexts/AuthContext';

const { 
  user,           // Current user object
  isLoading,      // Loading state
  isAuthenticated, // Boolean auth status
  signIn,         // Function to sign in
  signOut,        // Function to sign out
  session         // Full NextAuth session
} = useAuth();

Protected Routes

Use the ProtectedRoute component to secure pages:

import ProtectedRoute from '@/components/ProtectedRoute';

<ProtectedRoute allowedRoles={['admin']}>
  <AdminContent />
</ProtectedRoute>