Configuring Custom Subdomain Routing for Supabase and Web Apps

Supabase provides a powerful open-source Firebase alternative complete with PostgreSQL, Auth, Realtime, and Storage. When building fullstack apps, aligning your authentication redirect URLs and CORS settings with your devs.surf custom domain is critical to prevent failed sign-ins.

Step 1: Set Site URL in Supabase

1. Navigate to your Supabase Project Dashboard.
2. Click on Authentication → URL Configuration.
3. Set Site URL to: https://myproject.devs.surf.
4. Under Redirect URLs, add wildcard paths for OAuth flows:
   https://myproject.devs.surf/**
   https://myproject.devs.surf/auth/callback

Step 2: Initialize Supabase Client in Frontend

When initializing @supabase/supabase-js in React, Vue, Next.js, or Svelte, use your environment variables:

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    persistSession: true,
    autoRefreshToken: true,
    detectSessionInUrl: true,
  },
});

Step 3: Avoiding Third-Party Cookie Blocking

Modern browsers (Safari, Chrome, Firefox) strictly block third-party cookies by default. By serving your frontend on a secure HTTPS subdomain like https://app.devs.surf, Supabase stores session tokens in localStorage or first-party cookies, ensuring users stay logged in reliably across tabs.