Skip to main content

Configure Supabase for Your Project

Path B only

This page is only needed if you're following Path B (full web app with login and a database). If you're doing Path A, skip ahead to Building Your Profile Site.

Now that you have a repo cloned and a Supabase project created, let's connect the two. We'll configure Supabase with GitHub as a login provider so users can sign in to your app.

Step 1: Set up GitHub OAuth (Login with GitHub)​

To let users log in with their GitHub account, you need to create a GitHub OAuth App.

  1. Go to github.com/settings/developers
  2. Click OAuth Apps in the left sidebar
  3. Click New OAuth App
  4. Fill in the details:
    • Application name: Your app's name (e.g., My App)
    • Homepage URL: http://localhost:5173 (we'll update this later when we deploy)
    • Authorization callback URL: Go to your Supabase dashboard > Authentication > Providers > GitHub, and copy the Callback URL shown there. It will look like https://abcdefghijkl.supabase.co/auth/v1/callback
  5. Click Register application
  6. You'll see your Client ID — copy it
  7. Click Generate a new client secret — copy the secret immediately

Now add these to Supabase:

  1. In your Supabase dashboard, go to Authentication > Providers
  2. Find GitHub and expand it
  3. Toggle it on
  4. Paste your Client ID and Client Secret
  5. Click Save
Want to add more login providers?

Supabase supports many social login providers (Google, Apple, Discord, etc.). The setup process is similar for each — you create OAuth credentials with the provider, then add them in Supabase. If you'd like to add Google login or others later, ask Claude Code for help and it can walk you through it.

Step 2: Save your Supabase credentials for the project​

Your app will need the Supabase Project URL and Publishable key to connect. Let's save them in your project now.

  1. Navigate to your project folder in the terminal:

    cd ~/repos/your-repo-name

  2. Create an environment file:

    touch .env

  3. Open .env in a text editor and add the following (replace the placeholder values with your actual credentials from the Supabase dashboard):

    VITE_SUPABASE_URL=https://your-reference-id.supabase.co
    VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_your-key-here
    • Project URL: Found in Project Settings > General > Reference ID. Your URL is https://YOUR_REFERENCE_ID.supabase.co
    • Publishable key: Found in Project Settings > API Keys > Publishable key (the sb_publishable_... value)

  4. Make sure .env is in your .gitignore so it doesn't get pushed to GitHub:

    echo ".env" >> .gitignore
caution

Even though the Publishable key is safe to use in frontend code, it's still good practice to keep environment variables out of your Git history. The .env file stays on your computer only.

Step 3: Verify your configuration​

Go through this checklist:

  • GitHub OAuth App created with the correct callback URL
  • GitHub provider enabled in Supabase with Client ID and Secret
  • .env file created in your project with Supabase URL and Publishable key
  • .env is listed in .gitignore

What just happened?​

You connected three services together:

  1. GitHub is now registered as a login provider — it knows your app exists and will allow users to authenticate through it
  2. Supabase knows the credentials for GitHub and will handle the login flow
  3. Your project has the connection details it needs to talk to Supabase

When a user clicks "Login with GitHub" in your app, here's what happens behind the scenes:

  1. Your app redirects the user to GitHub
  2. GitHub asks the user to authorize your app
  3. GitHub redirects back to Supabase with an authorization code
  4. Supabase exchanges the code for user info and creates a session
  5. The user is logged in to your app

You don't have to build any of that — Supabase handles it all.

What's next?​

Your project is fully configured. Head to Building Your App to start building with Claude Code.