AI Builders Logo

Advanced Guide

Configure your database and authentication for your app (optional)

Setting Up Database and Authentication

Configure Supabase and Google login for your app

Step 1: Create a Supabase Project

  1. 1. Go to Supabase Dashboard
  2. 2. Create a new project (choose a name and password)
  3. 3. Navigate to Project Settings → Data API and copy the Project URL
  4. 4. Navigate to API Keys and copy these values:
    • • Anon public key
    • • Service role key

Add these values to your /apps/web/.env.local file:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-key

Step 2: Set Up Google Cloud Project

  1. 1. Visit Google Cloud Console
  2. 2. Create a new project (or select existing)
  3. 3. Go to APIs & Services → Credentials
  4. 4. Click Create Credentials → OAuth client ID
  5. 5. Choose Web application
  6. 6. Configure authorized origins:
    • • Add http://localhost and http://localhost:3000 as Authorized JavaScript Origins
  7. 7. Copy the Client ID

Add Client ID to .env.local:

NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-client-id

Step 3: Enable Google Auth in Supabase

  1. 1. In your Supabase project, go to Authentication → Sign In / Providers
  2. 2. Select Google from the list
  3. 3. Paste your Google Client ID
  4. 4. Click Enable to activate Google sign-in
  5. 5. Save your changes

✅ Users can now sign in with Google on your site!

Step 4: Restart Development Server

Restart to load the new environment variables:

pnpm dev

🎉 Google One-Tap authentication should now work!

Advanced Cursor MCP Configuration

Configure Model Context Protocol for enhanced Supabase integration in Cursor

Step 1: Get Your Supabase Credentials

  1. 1. Go to Supabase Account Tokens
  2. 2. Click Generate new token
  3. 3. Name it something like "Cursor MCP" and click Generate token
  4. 4. Copy the generated token (you won't see it again!)
  5. 5. Get your Project ID from Supabase Dashboard:
    • • Click on your project
    • • Go to Settings → General
    • • Find the Reference ID (looks like: abcdefghijklmnop)

Step 2: Configure MCP in Cursor

Edit the file at .cursor/example.mcp.json in your project (rename it to mcp.json):

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server@latest",
        "--project-ref=your-project-id-here"
      ],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "your-access-token-here",
      }
    }
  }
}

Replace:

  • • your-access-token-here with your Supabase access token
  • • your-project-id-here with your project's Reference ID

Step 3: Restart Cursor

After saving the mcp.json file, restart Cursor to activate MCP.

💡 You can verify it's working by asking Cursor to "list my Supabase tables using mcp" or "show recent migrations"

Finish Database Setup: Apply Database Migrations with MCP

Test Your MCP Setup with Agent Mode

Now that MCP is configured, let's use it to set up your database. Try this prompt in Cursor's Agent Mode (Cmd+Shift+I):

"Run the MCP tooling needed to execute the SQL in our @migrations/ folder to set up our user table and payments table, including row level security and function triggers"

The agent will:

  • 1.Read the migration files in apps/supabase/supabase/migrations/
  • 2.Apply the payments table migration with indexes and RLS policies
  • 3.Apply the users table migration with auth trigger
  • 4.Set up automatic timestamps and user profile sync
  • 5.Generate TypeScript types from your new schema

Once this is done, you can check in your supabase browser in the Table Editor and verify that the payments and users tables were created.

What's happening behind the scenes? The MCP server is using the mcp_supabase_apply_migration tool to execute your SQL directly on your Supabase project, creating tables with proper security and triggers.