Fix Supabase in React (Vite) for Indian Users

The Problem

Indian ISPs - including Jio, Airtel, ACT Fibernet, and BSNL - are DNS-blocking *.supabase.co following a government ministry order under Section 69A of the IT Act. When a user on one of these networks tries to reach your Supabase backend, the ISP's DNS resolver returns a sinkhole IP instead of the real Supabase server address. The connection hangs and eventually times out with ERR_CONNECTION_TIMED_OUT or DNS_PROBE_FINISHED_NXDOMAIN.

Client-side apps like React (Vite) apps are directly affected because API calls happen from the user's browser or device, which uses the ISP's DNS. Your app cannot reach *.supabase.co, so every Supabase operation fails - database queries, authentication, file storage, and real-time subscriptions.

Changing DNS on your own machine (to 1.1.1.1 or 8.8.8.8) can help during development, but it does not fix the problem for your end users. They are stuck on their ISP's default DNS and cannot change it. The fix needs to be transparent - your users should not need to install a VPN or configure anything.

Your Current Setup

This is the standard Supabase setup for React (Vite). The URL points to *.supabase.co, which is blocked on Jio, Airtel, ACT, and BSNL networks across India.

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

When an Indian user on a blocked ISP opens your React (Vite) app, the Supabase client tries to connect to the .supabase.co domain. The ISP intercepts the DNS query and returns a dead-end IP. The request never reaches Supabase, and your app fails silently or shows a network error.

Step 1: Set Up JioBase

JioBase is a managed reverse proxy that routes your Supabase traffic through Cloudflare's edge network. Since the proxy domain is not blocked, DNS resolves normally for all ISPs. Your Supabase requests go through the proxy instead of directly to *.supabase.co.

Step 2: Update Your React (Vite) Code

Replace your Supabase URL with the JioBase proxy URL. Your anon key stays the same. All Supabase features - REST API, Auth, Storage, Realtime - work through the proxy without any code changes beyond the URL swap.

// .env
# Before (blocked):
# VITE_SUPABASE_URL=https://xyz.supabase.co

# After (proxied through JioBase):
VITE_SUPABASE_URL=https://myapp.jiobase.com
VITE_SUPABASE_ANON_KEY=your-anon-key

That is the entire code change. The Supabase client library does not validate or restrict the URL format. It sends standard HTTP requests and WebSocket connections to whatever URL you provide. JioBase transparently forwards every request to your actual Supabase project over HTTPS. Your Row Level Security policies, auth configuration, and database schema are completely unaffected.

Step 3: Rebuild and Deploy

After updating the environment variable (or the URL in your code), you need to rebuild your React (Vite) app and redeploy it. Most frameworks read environment variables at build time, so a restart or rebuild is required for the change to take effect.

npm run build

Once the build completes, deploy to your hosting provider as you normally would. The updated app will route all Supabase traffic through JioBase's Cloudflare proxy. Users on Jio, Airtel, ACT, BSNL, and any other affected ISP will be able to access your app immediately.

Additional Notes for React (Vite)

Here are some React (Vite)-specific tips to keep in mind when setting up the proxy:

Verify It Works

After deploying your updated React (Vite) app, verify the proxy is working correctly with these steps:

How The Proxy Works

Understanding the proxy architecture helps explain why this fix is reliable and why it adds negligible latency.

Why Changing DNS Is Not Enough

The first instinct when encountering a DNS block is to switch to a public DNS resolver like Cloudflare's 1.1.1.1 or Google's 8.8.8.8. While this can work for your own development machine, it does not solve the problem for your users.

A reverse proxy is the only production-grade solution. It is transparent to your users, adds minimal latency (1-5ms via Cloudflare's edge), and works on every ISP without any client-side configuration.

Frequently Asked Questions