Nextbase Docs
Nextbase Docs
HomeBlogWelcome to Nextbase v3!Getting Started with NextBaseQuick setup
First StepsSetting up Supabase LocallySetting up StripeDev environmentLogin to app in developmentSetting up Supabase for Production
Installation

Dev environment

Setup your dev environment for the Supabase Stripe Starter Kit. Link your repository to Supabase, setup env variables, and run your dev server.

Link your repository to supabase

Setup env variables

In your repository directory, you should have a .env.local.example file which looks like this. For dev environment, copy the .env.local.example file to .env.local. The localhost values are used for local development. After running pnpm supabase start, run pnpm supabase status to get the actual publishable key and secret key values, then update your .env.local file accordingly.

    # supabase
    # Get the actual publishable key and secret key from `pnpm supabase status` after starting Supabase
    NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321/
    NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
    SUPABASE_SECRET_KEY=YOUR_SECRET_KEY
    SUPABASE_DATABASE_PASSWORD=postgres
    SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
    # SUPABASE_PROJECT_REF=SUPABASE_PROJECT_REF
    # stripe
    STRIPE_SECRET_KEY=STRIPE_SECRET_KEY
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
    STRIPE_WEBHOOK_SECRET=STRIPE_WEBHOOK_SECRET
    # host
    NEXT_PUBLIC_SITE_URL=http://localhost:3000
    # email
    ADMIN_EMAIL=admin@myapp.com
    RESEND_API_KEY=RESEND_API_KEY
    # analytics
    # ultimate and pro
    NEXT_PUBLIC_POSTHOG_API_KEY=NEXT_PUBLIC_POSTHOG_API_KEY
    NEXT_PUBLIC_POSTHOG_APP_ID=NEXT_PUBLIC_POSTHOG_APP_ID
    NEXT_PUBLIC_POSTHOG_HOST=NEXT_PUBLIC_POSTHOG_HOST
    NEXT_PUBLIC_GA_ID=NEXT_PUBLIC_GA_ID
    UNKEY_ROOT_KEY=UNKEY_ROOT_KEY
    UNKEY_API_ID=UNKEY_API_ID
    ## Supabase providers
    # this file is only used by supabase configtoml for local development
    # next.js uses .env.local for local development
    TWITTER_API_KEY=TWITTER_API_KEY
    TWITTER_API_SECRET=TWITTER_API_SECRET
    GOOGLE_CLIENT_ID=GOOGLE_CLIENT_ID
    GOOGLE_CLIENT_SECRET=GOOGLE_CLIENT_SECRET
    GITHUB_CLIENT_ID=GITHUB_CLIENT_ID
    GITHUB_CLIENT_SECRET=GITHUB_CLIENT_SECRET

Supabase env for login with providers

Note. Supabase also reads from .env.local for local development. Read more about it in this github issue.

  • https://github.com/supabase/cli/issues/1518#issuecomment-2084506041

It reads from .env.local for local development, or .env in that priority.

TWITTER_API_KEY=TWITTER_API_KEY
TWITTER_API_SECRET=TWITTER_API_SECRET
GOOGLE_CLIENT_ID=GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET=GOOGLE_CLIENT_SECRET
GITHUB_CLIENT_ID=GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET=GITHUB_CLIENT_SECRET

Note: If you don't need to login with providers, yet you can avoid setting up the above env variables. However, please ensure that you comment out the authentication provider logic for the providers you don't need in the supabase/config.toml file.

# supabase/config.toml

[auth.external.twitter]
enabled = false
client_id = ""
secret = ""
redirect_uri = ""

Run your dev server

We are ready to start our dev server. Run

pnpm dev

Our local development server is now running at localhost:3000.

Setting up Stripe

Setting up Stripe for your Supabase project. Learn how to create products, webhooks, and more.

Login to app in development

Login to app in development using email and password.

On this page

Link your repository to supabaseSetup env variablesSupabase env for login with providersRun your dev server