Environment Variables & Security | Developer & Build Documentation

Environment Variables Reference

Variable	Scope	Required	Description
`NEXT_PUBLIC_FW_API_URL`	Client & Server	Yes	Base URL for Fourthwall Storefront API (`https://storefront-api.fourthwall.com/v1`).
`NEXT_PUBLIC_FW_STOREFRONT_TOKEN`	Client & Server	Yes	Storefront token provided in your Fourthwall dashboard developer settings.
`NEXT_PUBLIC_FW_COLLECTION`	Client & Server	No	Default collection for the homepage grid and carousel (defaults to `launch` or `all`).
`NEXT_PUBLIC_FW_CHECKOUT`	Client & Server	No	Custom domain or fallback checkout domain (`https://shop.roryskagen.com`).
`FOURTHWALL_ACCESS_TOKEN`	Server Only	Optional	Bearer access token for Fourthwall Platform API write operations.
`FOURTHWALL_API_KEY`	Server Only	Optional	Basic auth API Key / Username for Fourthwall Platform API.
`FOURTHWALL_API_SECRET`	Server Only	Optional	Basic auth API Secret / Password for Fourthwall Platform API.
`FOURTHWALL_WEBHOOK_SECRET`	Server Only	Optional	Secret key to verify incoming Fourthwall webhook event signatures.

Environment Variable Sanitization

Environment variables imported from external tools often include surrounding quotes or inline comments (e.g. "value" # comment). To prevent parsing failures, all environment variables pass through cleanEnv() in lib/utils.ts:

// lib/utils.ts
export function cleanEnv(value: string | undefined): string {
  if (!value) return '';
  let cleaned = value.trim();
  if (cleaned.includes(' #')) {
    cleaned = cleaned.split(' #')[0]!.trim();
  }
  if ((cleaned.startsWith('"') && cleaned.endsWith('"')) ||
      (cleaned.startsWith("'") && cleaned.endsWith("'"))) {
    cleaned = cleaned.slice(1, -1).trim();
  }
  return cleaned;
}

Next.js Remote Image Whitelisting

Next.js strict Image Optimization blocks remote image URLs unless explicitly registered in next.config.js. The following domains are whitelisted:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { protocol: 'https', hostname: '*.fourthwall.com' },
      { protocol: 'https', hostname: '*.fourthwall.dev' },
      { protocol: 'https', hostname: 'images.unsplash.com' },
      { protocol: 'https', hostname: 'res.cloudinary.com' },
      { protocol: 'https', hostname: '*.supabase.co' }
    ]
  }
};

Secrets Security Best Practices

1. Never prefix private keys with NEXT_PUBLIC_: Only public storefront tokens and API URLs should carry the NEXT_PUBLIC_ prefix.

2. Platform write credentials must remain server-side: FOURTHWALL_ACCESS_TOKEN and FOURTHWALL_API_SECRET are strictly consumed in server-side API routes (app/api/import/fourthwall/route.ts) and CLI scripts.