# Security Migration Guide

## Overview
This document explains the security improvements made to protect sensitive API keys and secrets.

## Important Security Note
**Frontend encryption is NOT secure** - Any encryption done on the frontend can be reversed by anyone who has access to the frontend code. The proper solution is to keep secrets server-side only.

## Changes Made

### 1. Environment Variables Setup
- Created `.env.example` template file for reference
- Created environment-specific files (`.env.development`, `.env.staging`, `.env.production`)
- Updated `next.config.mjs` to use environment variables instead of hardcoded values

### 2. API Routes Created
All OAuth secret keys are now handled server-side through API routes:
- `/api/google-auth` - Handles Google OAuth token exchange
- `/api/instagram-auth` - Handles Instagram OAuth (already existed, updated)
- `/api/instagram-token-exchange` - Handles Instagram token refresh
- `/api/tiktok-auth` - Handles TikTok OAuth (updated to use env vars)
- `/api/facebook-exchange-code` - Handles Facebook token exchange (updated to use env vars)

### 3. Client Components Updated
All client-side components now use API routes instead of directly accessing secrets:
- `YoutubeLogin.tsx` - Uses `/api/google-auth`
- `GoogleLogin.tsx` - Uses `/api/google-auth`
- `InstagramLogin.tsx` - Uses `/api/instagram-auth` and `/api/instagram-token-exchange`
- All other OAuth-related components updated

### 4. Authorization URLs Fixed
Removed secrets from OAuth authorization URLs (secrets should never be in URLs):
- Instagram authorization URLs no longer include `client_secret`
- Secrets are only used server-side during token exchange

## Environment Variables

### Public Keys (Safe to Expose)
These are prefixed with `NEXT_PUBLIC_` and can be used in client-side code:
- `NEXT_PUBLIC_GOOGLE_CLIENT_ID`
- `NEXT_PUBLIC_INSTAGRAM_CLIENT_ID`
- `NEXT_PUBLIC_FACEBOOK_CLIENT_ID`
- `NEXT_PUBLIC_TIKTOK_CLIENT_ID`
- `NEXT_PUBLIC_STRIPE_PUBLIC_KEY`
- `NEXT_PUBLIC_CHAT_APP_ID`
- `NEXT_PUBLIC_CHAT_REGION`
- `NEXT_PUBLIC_CAPTCHA_SITEKEY`

### Secret Keys (Server-Side Only)
These should NEVER be exposed to the frontend:
- `GOOGLE_CLIENT_SECRET_ID`
- `INSTAGRAM_SECRET_ID`
- `FACEBOOK_SECRET_ID`
- `TIKTOK_SECRET_ID`
- `STRIPE_SECRET_KEY`
- `CHAT_AUTH_KEY`
- `CHAT_REST_API_KEY`

## Setup Instructions

1. Copy `.env.example` to the appropriate environment file (`.env.development`, `.env.staging`, or `.env.production`)
2. Fill in your actual API keys and secrets for that environment
3. Restart your development server

## Remaining Security Concerns

### Chat API Keys
The following chat keys are still being used in client-side components:
- `ChatAuthKey` - Used in `MainLayout.tsx`
- `ChatRestAPIKey` - Used in multiple client components

**Recommendation**: These should be moved to server-side API routes if possible, or use a different authentication method that doesn't expose secrets to the frontend.

### Stripe Secret Key
The Stripe secret key should only be used server-side. Ensure all Stripe operations requiring the secret key are done through API routes.

## Best Practices

1. **Never commit actual keys** - Only commit `.env.example` as a template
2. **Never commit environment files** - All `.env.*` files are gitignored (except `.env.example`)
3. **Use `NEXT_PUBLIC_` prefix** - Only for values that are safe to expose
4. **Keep secrets server-side** - Use API routes for any operations requiring secrets
5. **Rotate keys regularly** - If keys were exposed, rotate them immediately
6. **Use environment-specific keys** - Different keys for development, staging, and production

## Testing

After migration:
1. Test all OAuth flows (Google, Instagram, Facebook, TikTok)
2. Verify no secrets are exposed in browser DevTools
3. Check that API routes are working correctly
4. Test Stripe payment flows

## Rollback

If you need to rollback:
1. Restore the original `next.config.mjs` with hardcoded values
2. Restore component files that were modified
3. Remove the new API routes if needed