Re_Figma_Code/DEPLOYMENT_CONFIGURATION.md

# Deployment Configuration Guide

## Issue: Token Exchange Failing in Production

### Problem Description
The OAuth token exchange is working locally but failing in production. This happens because the frontend doesn't know where the backend is deployed.

### Root Cause
In `src/services/authApi.ts`:
```typescript
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api/v1';
```

When `VITE_API_BASE_URL` is not set in production, it defaults to `localhost`, causing the deployed frontend to try calling a non-existent local backend.

### Solution: Configure Environment Variables

## 1. Create Environment Files

Create these files in the `Re_Figma_Code` directory:

### `.env.example` (template)
```env
# API Configuration
VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_BASE_URL=http://localhost:5000
```

### `.env.local` (local development)
```env
VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_BASE_URL=http://localhost:5000
```

### `.env.production` (production)
```env
# Replace with your actual backend URL
VITE_API_BASE_URL=https://your-backend-domain.com/api/v1
VITE_BASE_URL=https://your-backend-domain.com
```

## 2. Platform-Specific Configuration

### If deploying on **Vercel**:
1. Go to your project settings
2. Navigate to "Environment Variables"
3. Add:
   - `VITE_API_BASE_URL` = `https://your-backend-url.com/api/v1`
   - `VITE_BASE_URL` = `https://your-backend-url.com`
4. Select "Production" environment
5. Redeploy

### If deploying on **Netlify**:
1. Go to Site settings → Environment variables
2. Add:
   - `VITE_API_BASE_URL` = `https://your-backend-url.com/api/v1`
   - `VITE_BASE_URL` = `https://your-backend-url.com`
3. Redeploy the site

### If deploying with **Docker**:
Add to your `docker-compose.yml` or Dockerfile:
```yaml
environment:
  - VITE_API_BASE_URL=https://your-backend-url.com/api/v1
  - VITE_BASE_URL=https://your-backend-url.com
```

### If using **CI/CD** (GitHub Actions, etc.):
Add to your build secrets/variables and pass them during build:
```bash
VITE_API_BASE_URL=https://your-backend-url.com/api/v1 npm run build
```

## 3. Update .gitignore

Ensure `.env.local` and `.env.production` are in `.gitignore`:
```
# Environment files
.env.local
.env.production
.env*.local
```

Keep `.env.example` committed for reference.

## 4. OAuth Flow Validation

After configuring, verify the flow works:

### Local Flow:
1. Frontend: `http://localhost:3000`
2. Backend: `http://localhost:5000`
3. Okta redirects to: `http://localhost:3000/login/callback?code=...`
4. Frontend calls: `http://localhost:5000/api/v1/auth/token-exchange`
5. Backend exchanges code with Okta using `redirect_uri=http://localhost:3000/login/callback`

### Production Flow:
1. Frontend: `https://your-frontend.com`
2. Backend: `https://your-backend.com`
3. Okta redirects to: `https://your-frontend.com/login/callback?code=...`
4. Frontend calls: `https://your-backend.com/api/v1/auth/token-exchange`
5. Backend exchanges code with Okta using `redirect_uri=https://your-frontend.com/login/callback`

## 5. Update Okta Configuration

Ensure your Okta app has the production callback URL registered:

1. Log in to Okta Admin Console
2. Go to Applications → Your App → General Settings
3. Under "Sign-in redirect URIs", add:
   - `http://localhost:3000/login/callback` (for local dev)
   - `https://your-frontend-domain.com/login/callback` (for production)
4. Under "Sign-out redirect URIs", add:
   - `http://localhost:3000` (for local dev)
   - `https://your-frontend-domain.com` (for production)
5. Save changes

## 6. CORS Configuration

Ensure your backend allows requests from your production frontend:

In `Re_Backend/src/app.ts` or `server.ts`, update CORS:
```typescript
app.use(cors({
  origin: [
    'http://localhost:3000',
    'http://localhost:5173',
    'https://your-frontend-domain.com' // Add your production frontend URL
  ],
  credentials: true
}));
```

## 7. Testing Checklist

- [ ] Environment variables are set in deployment platform
- [ ] Backend URL is reachable from frontend
- [ ] Okta callback URLs include production URLs
- [ ] CORS allows production frontend origin
- [ ] Backend is deployed and running
- [ ] Try login flow in production
- [ ] Check browser console for API call URLs
- [ ] Verify token exchange endpoint is being called correctly

## 8. Debugging

If still failing, check:

### Frontend Console:
```javascript
// Should show your production backend URL
console.log('API_BASE_URL:', import.meta.env.VITE_API_BASE_URL);
```

### Network Tab:
- Look for the `/auth/token-exchange` request
- Verify it's calling your production backend, not localhost
- Check response status and error messages

### Backend Logs:
- Check if token exchange request is reaching the backend
- Look for Okta API errors
- Verify redirect_uri matches what Okta expects

## Quick Fix Commands

### 1. Create environment files:
```bash
cd Re_Figma_Code

# Create .env.local
echo "VITE_API_BASE_URL=http://localhost:5000/api/v1" > .env.local
echo "VITE_BASE_URL=http://localhost:5000" >> .env.local

# Create .env.production (update URLs!)
echo "VITE_API_BASE_URL=https://your-backend-url.com/api/v1" > .env.production
echo "VITE_BASE_URL=https://your-backend-url.com" >> .env.production
```

### 2. Test locally:
```bash
npm run dev
```

### 3. Build for production:
```bash
npm run build
```

The build process will use `.env.production` values.

## Common Issues

### Issue 1: "Network Error" or "Failed to fetch"
**Cause**: CORS not configured or backend URL wrong
**Fix**: Check CORS settings and verify backend URL

### Issue 2: "Invalid redirect_uri"
**Cause**: Okta doesn't have production callback URL
**Fix**: Add production URL to Okta app settings

### Issue 3: Still calling localhost in production
**Cause**: Environment variable not loaded during build
**Fix**: Ensure variables are set BEFORE building, not at runtime

### Issue 4: 404 on /api/v1/auth/token-exchange
**Cause**: Wrong backend URL or backend not deployed
**Fix**: Verify backend is running and URL is correct

## Notes

- Vite environment variables MUST start with `VITE_` to be exposed to client
- Environment variables are embedded at **build time**, not runtime
- Changing env vars requires rebuilding the frontend
- Never commit `.env.local` or `.env.production` with real URLs to git