Required Environment Variables for Supabase Auth and Stripe Billing in Awesome-GPT-Image-2

The Awesome-GPT-Image-2 application requires six core environment variables—split between public client-side Supabase keys (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY) and secret server-side credentials (SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, APP_URL)—to enable secure user authentication and payment processing via Vercel Functions.

The Awesome-GPT-Image-2 repository powers a visual prompt-as-code gallery built on Vite, Supabase, and Stripe. According to the source code in freestylefly/awesome-gpt-image-2, the application separates client-side configuration from server-side secrets to securely handle auth flows and billing webhooks.

Supabase Auth Environment Variables

The authentication layer relies on Supabase and requires both public keys for browser initialization and a private service key for server-side database operations.

Public Client-Side Keys

In src/supabaseClient.js, the Vue/React frontend initializes the Supabase client using two Vite-prefixed variables exposed to the browser:

• VITE_SUPABASE_URL – The public Supabase project URL.
• VITE_SUPABASE_ANON_KEY – The public anonymous key for client-side authentication.

The utility exports an isSupabaseConfigured boolean that validates these variables exist before attempting SDK initialization. If missing, the application logs an error and disables auth-dependent features.

import { supabase, isSupabaseConfigured } from '@/supabaseClient';

if (!isSupabaseConfigured) {
  console.error('Supabase not configured – check VITE_SUPABASE_* variables');
}

await supabase.auth.signInWithOAuth({ provider: 'google' });

Secret Service Role Key

Server-side Vercel Functions in api/_lib/supabase.js perform privileged operations—such as updating user credits or verifying memberships—using the SUPABASE_SERVICE_ROLE_KEY. This key bypasses Row Level Security (RLS) and must never be exposed to the client or committed to version control.

Stripe Billing Environment Variables

The billing system, implemented in api/_lib/billing.js, handles membership subscriptions and credit pack purchases through Stripe Checkout.

API and Webhook Secrets

Two variables control Stripe functionality:

• STRIPE_SECRET_KEY – Your Stripe secret API key (test or live) used to create checkout sessions.
• STRIPE_WEBHOOK_SECRET – The endpoint signing secret required to validate Stripe webhook signatures in api/billing/webhook.js.

The helper function isStripeConfigured() guards all billing routes by checking for the presence of STRIPE_SECRET_KEY. Without it, the application throws an error before attempting any payment operation.

import { isStripeConfigured, getStripeClient } from '@/api/_lib/billing';

if (!isStripeConfigured()) {
  throw new Error('Stripe not configured – set STRIPE_SECRET_KEY');
}
const stripe = getStripeClient(); // Lazily initializes Stripe instance

Application URL Configuration

The APP_URL variable defines the base domain for checkout redirect URLs (defaults to https://gpt-image2.canganghe.ai when unset). This ensures Stripe redirects users back to the correct /billing/success or /billing/cancel endpoints after payment.

Complete Environment Variable Reference

The following table summarizes all required variables for auth and billing functionality:

Variable	Scope	File Reference	Description
VITE_SUPABASE_URL	Client	src/supabaseClient.js	Public Supabase project URL.
VITE_SUPABASE_ANON_KEY	Client	src/supabaseClient.js	Public key for browser authentication.
SUPABASE_SERVICE_ROLE_KEY	Server	api/_lib/supabase.js	Privileged key for DB operations in Vercel Functions.
STRIPE_SECRET_KEY	Server	api/_lib/billing.js	Stripe API secret for payment processing.
STRIPE_WEBHOOK_SECRET	Server	api/billing/webhook.js	Webhook signing secret for event validation.
APP_URL	Server	api/_lib/billing.js	Base URL for checkout redirect callbacks.

Note: The repository includes an .env.example file containing placeholder values for all variables. Copy this to .env and populate with your actual credentials before deploying.

Implementation Code Examples

Validating Stripe Webhook Signatures

The readRawBody utility in api/_lib/billing.js captures the raw request body required for signature verification. Use this pattern in your webhook handler:

import { readRawBody } from '@/api/_lib/billing';

export async function webhookHandler(req, res) {
  const rawBody = await readRawBody(req);
  const signature = req.headers['stripe-signature'];
  const event = stripe.webhooks.constructEvent(
    rawBody,
    signature,
    process.env.STRIPE_WEBHOOK_SECRET
  );
  // Handle event.type (checkout.session.completed, etc.)
}

Creating a Checkout Session

Combine getBillingCatalog and checkoutLineItem to generate Stripe sessions dynamically:

import { getBillingCatalog, checkoutLineItem } from '@/api/_lib/billing';

export async function createCheckoutSession(req, res) {
  const { productId } = req.body;
  const { client } = req.supabase;
  const catalog = await getBillingCatalog(client);
  const product = catalog.packs.find(p => p.id === productId);
  
  if (!product) return res.status(400).json({ error: 'Invalid product' });

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [checkoutLineItem(product)],
    mode: 'payment',
    success_url: `${process.env.APP_URL}/billing/success`,
    cancel_url: `${process.env.APP_URL}/billing/cancel`
  });
  res.json({ url: session.url });
}

Summary

• Client-side Supabase requires VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY for browser authentication, validated via isSupabaseConfigured in src/supabaseClient.js.
• Server-side Supabase requires SUPABASE_SERVICE_ROLE_KEY for privileged operations in api/_lib/supabase.js.
• Stripe billing requires STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET, guarded by isStripeConfigured() in api/_lib/billing.js.
• Application routing depends on APP_URL for post-payment redirects.
• Copy .env.example to .env and configure all six variables before deploying to Vercel.

Frequently Asked Questions

What is the difference between VITE_SUPABASE_ANON_KEY and SUPABASE_SERVICE_ROLE_KEY?

VITE_SUPABASE_ANON_KEY is a public key used in the browser to identify anonymous users and initiate OAuth flows; it respects Row Level Security policies. SUPABASE_SERVICE_ROLE_KEY is a secret key used exclusively in server-side Vercel Functions to bypass RLS and perform administrative actions like crediting user accounts after successful Stripe payments.

How do I obtain the STRIPE_WEBHOOK_SECRET for local development?

Create a webhook endpoint in your Stripe Dashboard pointing to your local tunnel URL (e.g., using Vercel CLI or ngrok). After creating the endpoint, Stripe reveals the signing secret. Alternatively, use the Stripe CLI to listen for local events and forward them to your /api/billing/webhook route, which automatically provides the webhook secret.

Can I deploy the application without setting the Stripe variables?

Yes, but billing functionality will be disabled. The isStripeConfigured() function in api/_lib/billing.js returns false when STRIPE_SECRET_KEY is missing, causing all payment endpoints to throw errors. The Supabase auth features will still function if those credentials are present.

Where should these environment variables be defined in production?

Set all variables in your Vercel project dashboard under Project Settings > Environment Variables. Ensure SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, and STRIPE_WEBHOOK_SECRET are marked as Secret (encrypted). Client-side variables prefixed with VITE_ are automatically exposed to the browser build during vite build.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}