# Google OAut7. Add authorized redirect URIs:
   - `http://localhost:3001/api/auth/callback/google` (for development - note port 3001)
   - `https://yourdomain.com/api/auth/callback/google` (for production)etup Instructions

## Setup Steps

### 1. Google Cloud Console Setup

1. Go to the [Google Cloud Console](https://console.cloud.google.com/)
2. Create a new project or select an existing one
3. Enable the Google+ API or Google People API
4. Go to "Credentials" in the left sidebar
5. Click "Create Credentials" → "OAuth 2.0 Client IDs"
6. Configure the OAuth consent screen if prompted
7. Choose "Web application" as the application type
8. Add authorized redirect URIs:
   - `http://localhost:3000/api/auth/callback/google` (for NextAuth callback)
   - `https://yourdomain.com/api/auth/callback/google` (for production)

### 2. Environment Variables

Update your `.env.local` file with the credentials from Google Cloud Console:

```bash
# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-random-secret-key-here  # Generate a random string

# Google OAuth Configuration
GOOGLE_CLIENT_ID=your-google-client-id-here
GOOGLE_CLIENT_SECRET=your-google-client-secret-here
```

### 3. Generate NEXTAUTH_SECRET

Run this command to generate a secure secret:
```bash
openssl rand -base64 32
```

### 4. Backend API Endpoints

You'll need to create API endpoints for both signup and login:

**For Signup:**
```
POST ${API_BASE_URL}/google-auth
```

**For Login:**
```
POST ${API_BASE_URL}/google-login
```

Both endpoints should accept:
```json
{
  "email": "user@example.com",
  "name": "User Name",
  "google_id": "google_user_id",
  "image": "profile_image_url",
  "provider": "google",
  "action": "signup" | "login"
}
```

Both endpoints should return:
```json
{
  "success": true,
  "token": "jwt_token",
  "user": {
    // user data
  }
}
```

## Usage

### Signup Flow:
1. Users click the "Google" button on the signup page (`/auth/signup`)
2. They're redirected to Google for authentication
3. After successful authentication, they're redirected to `/google-login`
4. The callback page detects this is a signup and calls `/google-auth` endpoint
5. Users are redirected to onboarding upon successful registration

### Login Flow:
1. Users click the "Google" button on the login page (`/auth/login`)
2. They're redirected to Google for authentication  
3. After successful authentication, they're redirected to `/google-login`
4. The callback page detects this is a login and calls `/google-login` endpoint
5. Users are redirected to dashboard upon successful login

## Files Created/Modified

- `/app/api/auth/[...nextauth]/route.ts` - NextAuth configuration
- `/app/google-login/page.tsx` - Google OAuth callback page
- `/app/providers/NextAuthProvider.tsx` - Session provider wrapper
- `/app/layout.tsx` - Updated to include NextAuth provider
- `/app/components/auth/signupForm.tsx` - Added Google sign-in functionality
- `/app/components/button.tsx` - Updated SocialButton to support onClick
- `/app/components/types.ts` - Updated socialBtnProps interface
- `/types/next-auth.d.ts` - TypeScript definitions for NextAuth
- `.env.local` - Added NextAuth environment variables