/studio-env-setup

name: nuxt-studio:env-setup
description: Helper for setting up OAuth environment variables on Cloudflare dashboard and other platforms
argument-hint: No arguments required - interactive environment variable setup guide
allowed-tools: [Read, AskUserQuestion]

Studio Environment Variables Setup

Guide users through setting environment variables for OAuth secrets on deployment platforms, with focus on security best practices.

Execution Steps

1. Detect Current Environment

Check if .env.local exists and read current OAuth configuration:

# Read .env.local to see what's configured locally

Identify configured providers:

• GitHub: NUXT_OAUTH_GITHUB_CLIENT_ID
• GitLab: NUXT_OAUTH_GITLAB_CLIENT_ID
• Google: NUXT_OAUTH_GOOGLE_CLIENT_ID

If no providers configured:

⚠️ No OAuth providers configured locally.

Run /nuxt-studio:configure-studio-auth first to set up OAuth.

This command helps you transfer those credentials to your deployment platform securely.

Stop and wait for OAuth configuration.

2. Choose Deployment Platform

Ask user:

**Question**: "Where are you deploying Studio?"

• Header: "Platform"
• Options:
• **Cloudflare Pages**: "Environment variables via dashboard"
• **Cloudflare Workers**: "Secrets via wrangler CLI"
• **Vercel**: "Environment variables via project settings"
• **Netlify**: "Environment variables via site settings"
• Multi-select: false

3. Platform-Specific Instructions

Based on chosen platform, provide detailed instructions:

For Cloudflare Pages:

Setting Environment Variables on Cloudflare Pages:

1. Open Cloudflare Dashboard:
   https://dash.cloudflare.com

2. Navigate to:
   Workers & Pages → [Your Project Name] → Settings → Environment variables

3. Click "Add variable" for each of these:

   FOR PRODUCTION ENVIRONMENT:

For each configured provider, list the variables:

**If GitHub configured:**

   Variable Name: NUXT_OAUTH_GITHUB_CLIENT_ID
   Value: [your GitHub Client ID]
   Environment: ✓ Production

   Variable Name: NUXT_OAUTH_GITHUB_CLIENT_SECRET
   Value: [your GitHub Client Secret]
   Environment: ✓ Production

**If GitLab configured:**

   Variable Name: NUXT_OAUTH_GITLAB_CLIENT_ID
   Value: [your GitLab Application ID]
   Environment: ✓ Production

   Variable Name: NUXT_OAUTH_GITLAB_CLIENT_SECRET
   Value: [your GitLab Secret]
   Environment: ✓ Production

   (If self-hosted GitLab)
   Variable Name: NUXT_OAUTH_GITLAB_SERVER_URL
   Value: https://gitlab.yourcompany.com
   Environment: ✓ Production

**If Google configured:**

   Variable Name: NUXT_OAUTH_GOOGLE_CLIENT_ID
   Value: [your Google Client ID]
   Environment: ✓ Production

   Variable Name: NUXT_OAUTH_GOOGLE_CLIENT_SECRET
   Value: [your Google Client Secret]
   Environment: ✓ Production

**Always add:**

   Variable Name: NUXT_PUBLIC_STUDIO_URL
   Value: https://studio.yourdomain.com
   Environment: ✓ Production

Continue instructions:

4. Click "Save" after adding all variables

5. FOR PREVIEW ENVIRONMENT (optional but recommended):
   - Repeat steps above
   - Select ✓ Preview environment instead
   - Use different OAuth app credentials for preview
   - Use preview URL for NUXT_PUBLIC_STUDIO_URL

6. Redeploy to apply variables:
   - Go to "Deployments" tab
   - Click "Retry deployment" on latest deployment
   - Wait for deployment to complete

7. Verify variables are loaded:
   - Check deployment logs for any OAuth errors
   - Test authentication after deployment

For Cloudflare Workers:

Setting Secrets on Cloudflare Workers:

Use wrangler CLI to set secrets securely:

1. Ensure you're logged in:
   wrangler whoami

2. Set OAuth secrets (one at a time):

For each configured provider, provide wrangler commands:

**If GitHub configured:**

   wrangler secret put NUXT_OAUTH_GITHUB_CLIENT_ID
   (Paste your GitHub Client ID when prompted)

   wrangler secret put NUXT_OAUTH_GITHUB_CLIENT_SECRET
   (Paste your GitHub Client Secret when prompted)

**If GitLab configured:**

   wrangler secret put NUXT_OAUTH_GITLAB_CLIENT_ID
   (Paste your GitLab Application ID when prompted)

   wrangler secret put NUXT_OAUTH_GITLAB_CLIENT_SECRET
   (Paste your GitLab Secret when prompted)

   (If self-hosted GitLab)
   wrangler secret put NUXT_OAUTH_GITLAB_SERVER_URL
   (Paste your GitLab server URL when prompted)

**If Google configured:**

   wrangler secret put NUXT_OAUTH_GOOGLE_CLIENT_ID
   (Paste your Google Client ID when prompted)

   wrangler secret put NUXT_OAUTH_GOOGLE_CLIENT_SECRET
   (Paste your Google Client Secret when prompted)

Continue instructions:

3. Set public variables in wrangler.toml:

   Edit wrangler.toml and add:

   [vars]
   NUXT_PUBLIC_STUDIO_URL = "https://studio.yourdomain.com"

4. Deploy with updated secrets:
   wrangler deploy

5. Verify secrets are set:
   wrangler secret list

IMPORTANT:
- Secrets are encrypted and never shown again
- wrangler.toml can be committed to Git (no secrets there)
- Use wrangler secret for sensitive values only

For Vercel:

Setting Environment Variables on Vercel:

1. Open Vercel Dashboard:
   https://vercel.com/dashboard

2. Navigate to:
   Your Project → Settings → Environment Variables

3. Add these variables:

   FOR PRODUCTION:

List variables for each configured provider (similar to Cloudflare Pages format).

4. Select environment for each:
   - ✓ Production
   - ✓ Preview (optional)
   - Development (optional, for vercel dev)

5. Click "Save" after adding all variables

6. Redeploy:
   - Go to "Deployments" tab
   - Click "..." on latest deployment
   - Click "Redeploy"

7. Verify:
   - Check deployment logs
   - Test OAuth authentication

For Netlify:

Setting Environment Variables on Netlify:

1. Open Netlify Dashboard:
   https://app.netlify.com

2. Navigate to:
   Your Site → Site settings → Environment variables

3. Click "Add a variable" for each:

List var