This guide covers all configuration steps needed to connect your application to Supabase, Dodo Payments, and Google OAuth.
Environment Variables Setup
Create Environment File
Copy the example environment file to create your local configuration:cp .env.example .env.local
.env.local file will contain all your sensitive configuration values. Configure Variables
Open .env.local and fill in the following variables:NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
DATABASE_URL=
DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=
Supabase Configuration
Create Supabase Project
- Go to Supabase and sign in
- Click New Project
- Choose your organization
- Enter a project name and database password
- Select a region close to your users
- Click Create new project
Project provisioning takes 2-3 minutes. Wait for it to complete before proceeding.
Get API Credentials
Navigate to Settings → API in your Supabase project:NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
- Project URL →
NEXT_PUBLIC_SUPABASE_URL
- Anon/Public Key →
NEXT_PUBLIC_SUPABASE_ANON_KEY
The anon key is safe to use in client-side code. Never expose the service role key in your frontend.
Get Database Connection String
Navigate to Settings → Database in your Supabase project:DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.[PROJECT-REF].supabase.co:5432/postgres
[YOUR-PASSWORD] with your database password. Google OAuth Setup
Create Google Cloud Project
- Go to Google Cloud Console
- Click Select a project → New Project
- Enter a project name and click Create
Enable Google+ API
- In your Google Cloud project, go to APIs & Services → Library
- Search for “Google+ API”
- Click on it and press Enable
Create OAuth Credentials
- Go to APIs & Services → Credentials
- Click Create Credentials → OAuth client ID
- If prompted, configure the OAuth consent screen first:
- Choose External user type
- Fill in required app information
- Add your email as a test user
- For Application type, select Web application
- Add authorized redirect URI:
https://[your-project-ref].supabase.co/auth/v1/callback
- Click Create
- Copy the Client ID and Client Secret
Configure Google Provider in Supabase
- In your Supabase project, go to Authentication → Providers
- Find Google and click to expand
- Toggle Enable Google Provider
- Paste your Client ID and Client Secret
- Click Save
Dodo Payments Configuration
Create Dodo Payments Account
- Sign up at Dodo Payments
- Complete the onboarding process
- Verify your email address
Get API Key
- Navigate to Settings → API Keys
- Copy your API key:
DODO_PAYMENTS_API_KEY=dodo_sk_test_...
Keep your API key secure. Never commit it to version control or expose it in client-side code.
Get Webhook Secret
- Navigate to Settings → Webhooks
- Copy your webhook signing secret:
DODO_WEBHOOK_SECRET=whsec_...
Set Environment Mode
Set the payment environment to test mode during development:DODO_PAYMENTS_ENVIRONMENT=test_mode
Change this to live_mode when deploying to production.
Final Environment File
Your complete .env.local should look like this:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# Database URL (from Supabase Settings → Database)
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres
# Dodo Payments Configuration
DODO_PAYMENTS_API_KEY=dodo_sk_test_...
DODO_WEBHOOK_SECRET=whsec_...
DODO_PAYMENTS_ENVIRONMENT=test_mode
Initialize Database Schema
With your environment variables configured, push the database schema to Supabase:
This creates three tables in your database:
- users - Stores user account information
- subscriptions - Tracks active and past subscriptions
- payments - Records payment history and invoices
Your application is now configured and ready for deployment!
Next Steps
Proceed to Deployment to deploy the webhook handler and run your application for the first time. 