Using supabase-js on Fastly Compute@Edge

Fastly’s Compute@Edge JavaScript Runtime requires that all fetch calls have a backend assigned to the request, this means that libraries which make fetch calls will need to have their fetch calls modified to include the correct backend.

Luckily supabase-js accepts a custom fetch implementation, which means we can make it work within Fastly.

To do this, we would find our supabase API URL (for example mine is https://impcjmexnuizjbxozwhm.supabase.co) and create a Fastly backend with this as the address and name the backend supabase. Then in our code when we create our supabase client, we would supply our own fetch implementation which configures the request to use the supabase backend like so:

function vcl_hash {
  if (req.http.Fastly-Debug) {
    breadcrumb_hash();
  }

  // We are not adding req.http.host to the hash because we want https://cdn.polyfill.io and https://polyfill.io to be a single object in the cache.
  // set req.hash += req.http.host;
  set req.hash += req.url;
  // We include return(hash) to stop the function falling through to the default VCL built into varnish, which for vcl_hash will add req.url and req.http.Host to the hash.
  return(hash);
}

That’s it, we can now use supabase within Fastly Compute@Edge!