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

> Discover the 6 essential environment variables for Supabase Auth and Stripe Billing in Awesome-GPT-Image-2. Securely enable authentication and payments on Vercel.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-31

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) | Public Supabase project URL. |
| `VITE_SUPABASE_ANON_KEY` | Client | [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) | Public key for browser authentication. |
| `SUPABASE_SERVICE_ROLE_KEY` | Server | [`api/_lib/supabase.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js) | Privileged key for DB operations in Vercel Functions. |
| `STRIPE_SECRET_KEY` | Server | [`api/_lib/billing.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/billing.js) | Stripe API secret for payment processing. |
| `STRIPE_WEBHOOK_SECRET` | Server | [`api/billing/webhook.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/webhook.js) | Webhook signing secret for event validation. |
| `APP_URL` | Server | [`api/_lib/billing.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/billing.js) captures the raw request body required for signature verification. Use this pattern in your webhook handler:

```javascript
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:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js).
- **Server-side Supabase** requires `SUPABASE_SERVICE_ROLE_KEY` for privileged operations in [`api/_lib/supabase.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js).
- **Stripe billing** requires `STRIPE_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET`, guarded by `isStripeConfigured()` in [`api/_lib/billing.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`.