Supabase Setup
What Supabase is, how to set it up, and how to connect it to your React app.
What Is Supabase?
You could build a backend from scratch — write an API server in Node.js, set up a PostgreSQL database on a cloud server, write your own authentication system, manage file storage, handle server scaling. Large companies do this. It takes months and a team.
Supabase gives you all of that in about 10 minutes, free to start, and it uses the same technologies large companies use — not a simplified toy version.
Supabase is an open-source alternative to Firebase (Google's backend platform). It gives you:
| Feature | What it does |
|---|---|
| PostgreSQL database | Full relational database — the most powerful open-source database in the world |
| Authentication | Sign up, sign in, magic links, Google OAuth, session management |
| Row Level Security | Database-level access control (more on this later) |
| Storage | File uploads — resumes, profile photos, documents |
| Edge Functions | Serverless functions for sensitive operations (payments, emails) |
| Realtime | Live data updates (like Google Sheets live collaboration) |
All of this, managed and hosted, with a generous free tier. You will use every one of these features before this training is over.
Why Supabase over Firebase? SQL. Postgres is the industry standard for relational data. If you ever move away from Supabase, your data is in standard PostgreSQL — no proprietary format lock-in. Firebase uses a NoSQL document database which is harder to query, harder to relate, and harder to migrate away from.
Creating Your First Project
my-ca-portal).Your database password is not the same as your Supabase login password. The database password lets you connect directly to PostgreSQL if you ever need to. Save it securely — you will need it when setting up the Supabase CLI.
The Dashboard Tour
Once your project is created, you land on the Supabase dashboard. Learn where each section lives — you will use all of them.
Table Editor — A spreadsheet-like view of your database. You can create tables, insert rows, and browse data without writing SQL. Good for quick checks. You will use this constantly to verify that your code is actually writing to the database.
SQL Editor — Run raw SQL. This is where you paste migration files when testing locally. Also useful for debugging — you can query anything directly.
Authentication > Users — See every user account. View their email, when they last signed in, whether their email is verified. Useful for debugging auth issues.
Authentication > Policies — This is where Row Level Security policies live. You will visit this often.
Storage — File buckets. When Udyogaseva users upload a resume, it goes into the resumes storage bucket here.
Edge Functions — Your serverless functions. Udyogaseva has 25+ edge functions here — Razorpay payment verification, email sending, AI summary generation.
Settings > API — This is the most important page when starting a project. It has your Project URL and API keys. You need these to connect your React app.
The Three Keys You Need to Know
On the Settings > API page, you will see three values:
Project URL — Something like https://abcdefghijklmnop.supabase.co. This is your database's address.
anon public key — The public key. Safe to use in your browser. This key has limited access — it can only do what your Row Level Security policies allow.
service_role key — The all-access key. This bypasses all Row Level Security. It can read, write, delete anything — without restriction. This key must NEVER appear in your frontend code.
.env.Connecting to Your React App
Once you have your Project URL and anon key, connect Supabase to your React app in four steps.
npm install @supabase/supabase-js in your project terminal..env — create a .env file in your project root and add your VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY values.src/lib/supabase.ts using the pattern from Udyogaseva (see below). The URL and key come from environment variables, never hardcoded.supabase.ts and import it wherever you need to query the database. Never create multiple clients..env to your .gitignore immediately after creating it. Your API keys must never be committed to a Git repository. This is non-negotiable — a public GitHub repo with your Supabase keys gives anyone read access to your entire database.Key things to notice in the Supabase client setup:
createClient<Database>— the<Database>is a TypeScript generic. We pass in our generated database types so TypeScript knows the exact shape of every table, giving us autocomplete when writing queries.- The URL and key come from environment variables — never hardcoded.
- If the environment variables are missing, it throws immediately with a helpful error message instead of silently failing later.
Environment Variables — What Goes Where
Environment variables are how you keep secrets out of your code. Different frameworks use different naming conventions.
| Framework | Public prefix | Example |
|---|---|---|
| Vite (React) | VITE_ | VITE_SUPABASE_URL |
| Next.js | NEXT_PUBLIC_ | NEXT_PUBLIC_SUPABASE_URL |
| Expo (React Native) | EXPO_PUBLIC_ | EXPO_PUBLIC_SUPABASE_URL |
The prefix signals that the variable is safe to expose to the browser/client. Anything without the prefix stays server-side only.
What goes in .env: Your VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, and any other client-safe keys (Google Analytics measurement ID, Sentry DSN).
What never goes in .env: Your service_role key, Razorpay secret key, Resend API key. These go in Supabase secrets (for edge functions) or Vercel environment variables (for CI/build-time use).
The Supabase CLI — Your Local Development Tool
The Supabase CLI lets you run Supabase locally, create migrations, and deploy edge functions.
npx supabase init in your project root.npx supabase link --project-ref YOUR_PROJECT_REF. Find your project ref in the Supabase dashboard URL.npx supabase db push every time you create a new migration file to apply it to your database.npx supabase gen types typescript --linked) every time your schema changes — your TypeScript types must always match your actual database.npx supabase --version. If it prints a version number, the CLI is ready. If not, your project may need the CLI installed separately — ask Claude Code to walk you through it.Verifying the Connection
After setup, verify that your React app can talk to Supabase. Add a temporary test query to your app:
If you see the connection working in the browser console, your setup is complete. If you see an error about blocked by CORS or invalid API key, double-check your .env values and make sure the file is in the project root.
.env file in your React project root — add VITE_SUPABASE_URL= and VITE_SUPABASE_ANON_KEY= with your values.gitignore and add .env on a new line — confirm it is listed before doing anything else.env values are copied correctly and variable names have the VITE_ prefix exactly. If you see a CORS error, check that the URL includes the full https:// prefix.- My Supabase project is created with the Mumbai region selected
- I know the difference: anon key (browser-safe, RLS-limited) vs service_role key (never in browser)
- My
.envhas VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY set correctly .envis in my.gitignore— it will never be committed to gitsrc/lib/supabase.tsexists, exports the client, and throws if env vars are missing- I can navigate to Table Editor, Authentication → Policies, and Settings → API in the dashboard without searching