💻 Software🗄️ Databases

How do I handle Vercel preview and Supabase auth?

Fresh3 days ago

Mar 14, 20260 views

Confidence Score69%

69%

Problem

Hey there. I think this one is massively important and I am unsure why it wasn't an issue before. Nowadays most Continouous Deployments consist of automated deploys. Let it be on render.com on vercel.com or what not. Many of those create a preview URL such as `some-hash.provider.ext` . Now supabase expects a "generic" base URL - which I would like to understand why because from an architectural perspective I think there should be only a list of "allowed URLs" and not necessarily a primary URL as the "primary" term is kinda not helpful (at least I am not seeing the advantage from an outside perspective). Now since the Auth configuration in the UI is very static (input(Main URL), input(additional URLs)) there is no way of having a proper automated workflow - at all. There will always be manual work involved of adding more and more URLs. IMO this can be even considered as "architectural flaw/bug". I'd be happy to help here if you point into the directions that need to be adapted. Other than that I'd be grateful if someone could pick that topic up, it is massively time-consuming and I am having a hard time understanding that this wasn't a problem for other people so far. Discussed in https://github.com/supabase/supabase/discussions/2760 <div type='discussions-op-text'> <sup>Originally posted by pedrobslisboa August 7, 2021</sup> Hey guys, I've been looking for the answer to this question without success. How do I handle Vercel preview and Supabase auth? E.g.: How can I

Unverified for your environment

Select your OS to check compatibility.

Your OS

OS version

Product version

1 Fix

Canonical Fix

Unverified Fix

New Fix – Awaiting Verification

Automate Supabase Auth URL Management for Vercel Previews

Medium Risk

Supabase requires a primary URL and additional URLs for authentication, which complicates automated deployments that generate dynamic preview URLs. This limitation arises from the static nature of the Supabase UI configuration, making it difficult to manage multiple preview URLs without manual intervention.

Awaiting Verification

Be the first to verify this fix

Create a Dynamic URL Management Script

Develop a script that automatically updates the Supabase allowed URLs based on the Vercel preview URL. This script should run as part of your CI/CD pipeline after each deployment.

javascript

const axios = require('axios');

const updateSupabaseUrls = async (previewUrl) => {
  const supabaseUrl = 'https://YOUR_SUPABASE_URL/rest/v1/auth';
  const apiKey = 'YOUR_SUPABASE_API_KEY';

  try {
    await axios.patch(supabaseUrl, {
      additional_urls: [previewUrl]
    }, {
      headers: {
        'Authorization': `Bearer ${apiKey}`
      }
    });
    console.log('Supabase URLs updated successfully.');
  } catch (error) {
    console.error('Error updating Supabase URLs:', error);
  }
};

updateSupabaseUrls('https://your-preview-url.vercel.app');

2
Integrate Script into CI/CD Pipeline
Add the script to your CI/CD configuration file (e.g., Vercel's `vercel.json` or GitHub Actions) to ensure it runs after each deployment. This will allow the script to automatically update the Supabase allowed URLs with the new preview URL.
yaml
```
steps:
  - name: Update Supabase URLs
    run: node updateSupabaseUrls.js
```
3
Set Up Environment Variables
Store your Supabase URL and API key as environment variables in your CI/CD environment to keep them secure. This prevents hardcoding sensitive information in your scripts.
bash
```
export SUPABASE_URL='https://YOUR_SUPABASE_URL';
export SUPABASE_API_KEY='YOUR_SUPABASE_API_KEY';
```

Test the Integration

Deploy your application to Vercel and verify that the Supabase allowed URLs are updated correctly by checking the Supabase dashboard or using the Supabase API to fetch the current allowed URLs.

javascript

const fetchAllowedUrls = async () => {
  const response = await axios.get(supabaseUrl, {
    headers: {
      'Authorization': `Bearer ${apiKey}`
    }
  });
  console.log('Allowed URLs:', response.data);
};

fetchAllowedUrls();

Validation

Confirm that the Supabase allowed URLs include the new Vercel preview URL by checking the Supabase dashboard or using the API to fetch the current allowed URLs after each deployment.

Environment

Submitted by

Alex Chen

2450 rep