Skip to content

Environment Variables

This page is the source of truth for configuration knobs used by Workbench AI.

  • All values below must be supplied via hosting platform / Supabase / Stripe dashboards, not committed to git.
  • Use placeholders only (e.g. YOUR_SUPABASE_URL, YOUR_STRIPE_SECRET_KEY).
  • Refer to the listed files to see how each variable is used.

Frontend (Vite + SPA)

These variables are used by the current Vite/React SPA and are baked in at build time.

NAME Used in Description Notes
VITE_SUPABASE_URL (expected) src/integrations/supabase/client.ts Public Supabase project URL used by the browser client. Must match the Supabase project URL. Do not use the service role URL here.
VITE_SUPABASE_ANON_KEY (expected) src/integrations/supabase/client.ts Public (anon) Supabase key used by the browser client. Treat as sensitive but not secret; rotate if leaked. Service role key must never be exposed to the browser.

Vite vs Next.js

The current production app is Vite/React. The nextjs/ folder uses NEXT_PUBLIC_SUPABASE_URL/NEXT_PUBLIC_SUPABASE_ANON_KEY instead of VITE_* variables. See the Next.js project docs if/when that app is promoted to production.

Next.js migration app (experimental)

The nextjs/ directory contains a parallel Next.js app using its own env conventions.

NAME Used in Description Notes
NEXT_PUBLIC_SUPABASE_URL nextjs/src/src/integrations/supabase/client.ts, nextjs/src/src/hooks/useCheckout.ts, nextjs/src/src/hooks/useBilling.ts, nextjs/src/src/hooks/useSubscription.ts, nextjs/src/src/hooks/useStripePortal.ts, nextjs/src/src/hooks/useStripeCheckout.ts, nextjs/src/src/hooks/useNameplates.ts, nextjs/src/src/hooks/useAffiliateSubmission.ts Public Supabase URL for the Next.js app. Same value as VITE_SUPABASE_URL, but exposed via Next.js.
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY src/integrations/supabase/client.ts Public Supabase key for the Next.js app. Preferred value is the Supabase Publishable key; legacy anon key also works during transition.
NODE_ENV many nextjs/src/src/hooks/* Node/Next.js environment flag used to gate console logging. Managed by tooling (next dev / next build), usually no manual configuration needed.

Supabase Edge Functions (server-side)

These variables are read by edge functions under supabase/functions. They must be configured in the Supabase project settings → Functions → Environment variables.

NAME Used in Description Notes
SUPABASE_URL supabase/functions/stripe-webhook/index.ts, supabase/functions/create-checkout-session/index.ts, supabase/functions/create-portal-session/index.ts Supabase project URL used by edge functions to talk back to the database. Typically the same as VITE_SUPABASE_URL, but consumed server-side.
SUPABASE_SERVICE_ROLE_KEY supabase/functions/stripe-webhook/index.ts, supabase/functions/create-checkout-session/index.ts, supabase/functions/create-portal-session/index.ts Supabase service role key used by edge functions with full DB access (bypasses RLS). Highly sensitive. Must never be exposed to the frontend. Rotate if there is any suspicion of leakage.
STRIPE_SECRET_KEY supabase/functions/stripe-webhook/index.ts, supabase/functions/create-checkout-session/index.ts, supabase/functions/create-portal-session/index.ts, supabase/functions/* helpers that call Stripe Stripe API secret key used by edge functions to call Stripe. Use separate keys for dev/stage/prod; rotate regularly.
STRIPE_WEBHOOK_SECRET supabase/functions/stripe-webhook/index.ts Stripe webhook signing secret for the webhook endpoint. Must match the secret configured in the Stripe dashboard for the webhook.
STRIPE_STARTER_PRICE_ID supabase/functions/create-checkout-session/index.ts Stripe Price ID for the "starter" plan. Example placeholder: price_12345_STARTER. Set per environment.
STRIPE_PROFESSIONAL_PRICE_ID supabase/functions/create-checkout-session/index.ts Stripe Price ID for the "professional" plan. Example placeholder: price_12345_PROFESSIONAL.

Function-specific env vars

Additional edge functions may read other env vars (e.g. for third-party APIs). When adding a new function, document any new variables here and keep them generic, e.g. THIRD_PARTY_API_KEY.

Stripe dashboard configuration

These are not traditional environment variables, but they behave like configuration knobs in Stripe.

NAME / Concept Used in Description Notes
Products & Prices (e.g. starter, professional) Referenced via STRIPE_STARTER_PRICE_ID and STRIPE_PROFESSIONAL_PRICE_ID in create-checkout-session Subscription products and prices for the SaaS. Configure in Stripe dashboard; reference by price_... IDs via env vars.
Webhook Endpoint URL Stripe → supabase/functions/stripe-webhook URL Stripe calls for subscription/payment events. Must match the Supabase Edge Function URL; use a separate endpoint per environment.

Deployment / Hosting configuration

Hosting platforms (Vercel, Cloudflare Pages, etc.) provide their own env var UX. These values are typically set there and exposed either to the build step (Vite/Next.js) or the runtime (edge functions via Supabase).

NAME Used in Description Notes
VITE_SUPABASE_URL Vite build, browser See Frontend section. Set in hosting provider project settings.
VITE_SUPABASE_ANON_KEY Vite build, browser See Frontend section. Set in hosting provider project settings.
NEXT_PUBLIC_SUPABASE_URL nextjs/ app build/runtime See Next.js section. Only if/when the Next.js app is deployed.
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY Next.js app build/runtime See Next.js section. Preferred for production deployments.

Environment separation

Use different env var values per environment (dev/staging/prod), but keep the names consistent. For example:

  • Dev: YOUR_DEV_SUPABASE_URL, YOUR_DEV_STRIPE_SECRET_KEY
  • Prod: YOUR_PROD_SUPABASE_URL, YOUR_PROD_STRIPE_SECRET_KEY

CI/CD and hosting should inject the correct values without changing code.

Quick checklist for new environments

  • [ ] Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY (or Next.js equivalents) in the hosting platform.
  • [ ] Set SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY in Supabase function env config.
  • [ ] Set STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, and price IDs in Supabase env (or secure function config).
  • [ ] Configure Stripe products/prices and webhook endpoints.
  • [ ] Verify that the app can:
    1. Sign up and log in
    2. Create a checkout session and complete a subscription
    3. Receive a Stripe webhook and update subscription state in Supabase.