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:

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)

# API Configuration
VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_BASE_URL=http://localhost:5000

.env.local (local development)

VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_BASE_URL=http://localhost:5000

.env.production (production)

# 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:

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:

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:

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:

// 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:

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:

npm run dev

3. Build for production:

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