DocumentationNext.js and Supabase V2

Environment Variables in the Next.js Supabase Starter Kit

Learn how to configure environment variables in the Next.js Supabase Starter Kit.

Environment variables are defined in the .env file in the root of the apps/web package.

  1. Shared Environment Variables: Shared environment variables are defined in the .env file. These are the env variables shared between environments (e.g., development, staging, production).
  2. Environment Variables: Environment variables for a specific environment are defined in the .env.development and .env.production files. These are the env variables specific to the development and production environments.
  3. Secret Keys: Secret keys and sensitive information are not stored in the .env file. Instead, they are stored in the environment variables of the CI/CD system.
  4. Secret keys to be used locally: If you need to use secret keys locally, you can store them in the .env.local file. This file is not committed to Git, therefore it is safe to store sensitive information in it.

The majority of the environment variables are defined in the apps/web/.env file. These are the env variables shared between environments (eg. they will be the same for development, staging, and production).

NB: You will not add any secret keys or sensitive information here. Only configuration, paths, feature flags, etc.

# SHARED ENVIRONMENT VARIABLES
# HERE YOU CAN ADD ALL THE **PUBLIC** ENVIRONMENT VARIABLES THAT ARE SHARED ACROSS ALL THE ENVIRONMENTS
# PLEASE DO NOT ADD ANY CONFIDENTIAL KEYS OR SENSITIVE INFORMATION HERE
# ONLY CONFIGURATION, PATH, FEATURE FLAGS, ETC.
# TO OVERRIDE THESE VARIABLES IN A SPECIFIC ENVIRONMENT, PLEASE ADD THEM TO THE SPECIFIC ENVIRONMENT FILE (e.g. .env.development, .env.production)
# SITE
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_PRODUCT_NAME=Makerkit
NEXT_PUBLIC_SITE_TITLE="Makerkit - The easiest way to build and manage your SaaS"
NEXT_PUBLIC_SITE_DESCRIPTION="Makerkit is the easiest way to build and manage your SaaS. It provides you with the tools you need to build your SaaS, without the hassle of building it from scratch."
NEXT_PUBLIC_DEFAULT_THEME_MODE=light
NEXT_PUBLIC_THEME_COLOR="#ffffff"
NEXT_PUBLIC_THEME_COLOR_DARK="#0a0a0a"
# AUTH
NEXT_PUBLIC_AUTH_PASSWORD=true
NEXT_PUBLIC_AUTH_MAGIC_LINK=false
NEXT_PUBLIC_CAPTCHA_SITE_KEY=
# BILLING
NEXT_PUBLIC_BILLING_PROVIDER=stripe
# CMS
CMS_CLIENT=keystatic
# KEYSTATIC
NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content
# LOCALES PATH
NEXT_PUBLIC_LOCALES_PATH=apps/web/public/locales
# PATHS (to be used in "packages")
SIGN_IN_PATH=/auth/sign-in
SIGN_UP_PATH=/auth/sign-up
TEAM_ACCOUNTS_HOME_PATH=/home
INVITATION_PAGE_PATH=/join
# FEATURE FLAGS
NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true

Please update the apps/web/.env file with the appropriate values.

This is complemented by the environment variables defined in the apps/web/.env.development and apps/web/.env.production files.

Secret Keys

Secret keys and sensitive information are to be never stored in the .env file. Instead, they are stored in the environment variables of the CI/CD system.

What does this mean? It means that you will need to add the secret keys to the environment variables of your CI/CD system (e.g., GitHub Actions, Vercel, Cloudflare, your VPS, Netlify, etc.). This is not a Makerkit-specific requirement, but a best practice for security for any application. Ultimately, it's your choice.

Below are some of the additional secret keys that you may need to add to your environment variables:

Supabase

For Supabase, you'll need to add the following environment variables:

SUPABASE_SERVICE_ROLE_KEY=

Stripe

Please check the Stripe documentation.

Lemon Squeezy

Please check the Lemon Squeezy documentation.

Mailers

Please check the Mailers documentation.

Monitoring

Please check the Monitoring documentation.

CMS

Please check the CMS documentation.

Feature Flags

To enable or disable certain application features, please toggle the values below:

NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true

The following feature flags are available:

  1. NEXT_PUBLIC_ENABLE_THEME_TOGGLE - you can hide the theme toggle (if you want to force a single theme)
  2. NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION - to prevent users from self-deleting their personal account
  3. NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING - to enable/disable billing for personal accounts
  4. NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION - to prevent team accounts from self-deleting the account
  5. NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING - to enable/disable billing for team accounts
  6. NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS - to disable team accounts
  7. NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION - to enable/disable the ability to create a team account

Personal Accounts vs Team Accounts

The starter kit supports two types of accounts:

  1. Personal accounts are accounts that are owned by a single user.
  2. Team accounts are accounts that group multiple users together.

This allows you to:

  1. Serve B2C customers (personal accounts)
  2. Serve B2B customers (team accounts)
  3. Allow both (for example, like GitHub)

In the vast majority of cases, you will want to enable billing for personal OR team accounts. I have not seen many cases where billing both was required.

To do so, please set the following variables accordingly.

For enabling personal accounts billing only:

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=false

You may also want to fully disable team accounts:

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=false

To enable team accounts billing only:

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=false
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true

To enable both, leave them both as true.

Please remember that for ensuring DB consistency, you need to also set them at DB level by adjusting the table config:

create table if not exists public.config(
    enable_team_accounts boolean default true not null,
    enable_account_billing boolean default true not null,
    enable_team_account_billing boolean default true not null,
    billing_provider public.billing_provider default 'stripe' not null
);

To enable personal account billing:

update config set enable_account_billing = true;

To enable team account billing:

update config set enable_team_account_billing = true;

To disable team accounts:

update config set enable_team_accounts = false;

To leave them both enabled, just leave them as they are.

Contact Form submissions

To receive submissions from the contact form, you need to set up the following environment variables:

CONTACT_EMAIL=

This email will receive the submissions from the contact form.

List of Environment Variables for the Web App

NEXT_PUBLIC_SITE_URL

The URL of the site. This is used for generating absolute URLs across the site (where needed). When going to production, this should be set to the production URL - including https as protocol (e.g., https://example.com). The configuration will validate that the URL is valid - so the build will fail if the URL is not valid.

NEXT_PUBLIC_SITE_URL=https://example.com

NEXT_PUBLIC_PRODUCT_NAME

The name of the product. This is used in various places across the site.

NEXT_PUBLIC_PRODUCT_NAME=Makerkit

NEXT_PUBLIC_SITE_TITLE

The title of the site. This is used in the <title> tag of the site.

NEXT_PUBLIC_SITE_TITLE=Makerkit - The easiest way to start your next project

NEXT_PUBLIC_SITE_DESCRIPTION

The description of the site. This is used in the <meta name="description"> tag of the site.

NEXT_PUBLIC_SITE_DESCRIPTION=Makerkit is the easiest way to start your next project. It comes with everything you need to get started.

NEXT_PUBLIC_DEFAULT_THEME_MODE

The default theme mode of the site. This can be either light or dark or system (to follow the system theme).

NEXT_PUBLIC_DEFAULT_THEME_MODE=light

NEXT_PUBLIC_DEFAULT_LOCALE

The default locale of the site. This is used for the default language of the site.

NEXT_PUBLIC_DEFAULT_LOCALE=en

NEXT_PUBLIC_AUTH_PASSWORD

Use this variable to enable or disable password-based authentication. If you set this to true, users will be able to sign up and sign in using their email and password. If you set this to false, the form won't be shown.

NEXT_PUBLIC_AUTH_PASSWORD=true

Use this variable to enable or disable magic link-based authentication. If you set this to true, users will be able to sign up and sign in using a magic link sent to their email. If you set this to false, the form won't be shown.

NEXT_PUBLIC_AUTH_MAGIC_LINK=true

CONTACT_EMAIL

The email address where the contact form submissions will be sent.

CONTACT_EMAIL=info@makerkit.dev

NEXT_PUBLIC_ENABLE_THEME_TOGGLE

Use this variable to enable or disable the theme toggle. If you set this to true, the theme toggle will be shown. If you set this to false, the theme toggle won't be shown.

NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION

Use this variable to enable or disable personal account deletion. If you set this to true, users will be able to delete their personal account. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING

Use this variable to enable or disable billing for personal accounts. If you set this to true, users will be able to add their billing information. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNT_DELETION

Use this variable to enable or disable team accounts deletion. If you set this to true, users will be able to delete their team account. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNT_DELETION=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING

Use this variable to enable or disable billing for team accounts. If you set this to true, users will be able to add their billing information. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS

Use this variable to enable or disable team accounts. If you set this to true, users will be able to create team accounts. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING

Use this variable to enable or disable billing for team accounts. If you set this to true, users will be able to add their billing information. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION

Use this variable to enable or disable team accounts creation. If you set this to true, users will be able to create team accounts. If you set this to false, the form won't be shown.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true

NEXT_PUBLIC_ENABLE_NOTIFICATIONS

Use this variable to enable or disable notifications.

If you set this to true, users will be able to see the notifications dropdown. If you set this to false, the notifications dropdown won't be shown.

NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true

NEXT_PUBLIC_REALTIME_NOTIFICATIONS

Use this variable to enable or disable real-time notifications.

If you set it to true we will use Supabase Realtime to show notifications in real-time. If you set it to false, notifications will be fetched lazily.

This is preferable for billing reasons, as real-time notifications can be expensive.

NEXT_PUBLIC_REALTIME_NOTIFICATIONS=true

NEXT_PUBLIC_ENABLE_VERSION_UPDATER

Use this variable to enable or disable the version updater. If enabled, the version updater will check for new versions of the app and prompt the user to update.

NB: if you use Vercel, this is redundant, as Vercel uses Skew Protection to automatically reload the page when a new version is deployed.

NEXT_PUBLIC_ENABLE_VERSION_UPDATER=true

This is disabled by default.

NEXT_PUBLIC_SUPABASE_URL

The URL of the Supabase project.

NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co

NEXT_PUBLIC_SUPABASE_ANON_KEY

The anonymous key of the Supabase project. You find this in your Supabase project settings.

NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

SUPABASE_SERVICE_ROLE_KEY

The service role key of the Supabase project. You find this in your Supabase project settings.

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

NEXT_PUBLIC_BILLING_PROVIDER

The billing provider to use. This can be either stripe or lemon-squeezy.

NEXT_PUBLIC_BILLING_PROVIDER=stripe

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

If you are using Stripe as your billing provider, you need to set this variable to your Stripe publishable key.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key

STRIPE_SECRET_KEY

If you are using Stripe as your billing provider, you need to set this variable to your Stripe secret key.

STRIPE_SECRET_KEY=your-stripe-secret-key

STRIPE_WEBHOOK_SECRET

If you are using Stripe as your billing provider, you need to set this variable to your Stripe webhook secret.

STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret

This variable is the "Signing Secret" from the Stripe webhook settings, after creating a webhook endpoint.

LEMON_SQUEEZY_SECRET_KEY

If you are using Lemon Squeezy as your billing provider, you need to set this variable to your Lemon Squeezy secret key.

LEMON_SQUEEZY_SECRET_KEY=your-lemon-squeezy-secret-key

LEMON_SQUEEZY_STORE_ID

If you are using Lemon Squeezy as your billing provider, you need to set this variable to your Lemon Squeezy store ID.

LEMON_SQUEEZY_STORE_ID=your-lemon-squeezy-store-id

LEMON_SQUEEZY_SIGNING_SECRET

If you are using Lemon Squeezy as your billing provider, you need to set this variable to your Lemon Squeezy signing secret.

LEMON_SQUEEZY_SIGNING_SECRET=your-lemon-squeezy-signing-secret

SUPABASE_DB_WEBHOOK_SECRET

This is a secret key that you must generate and set in both the the environment variable and in the Supabase webhook headers when ccreating a webhook.

This is used to verify that the webhook is coming from the correct source.

Please use any random string for this. For example, make a strong password using a password manager.

SUPABASE_DB_WEBHOOK_SECRET=********

CMS_CLIENT

The CMS client to use. This can be either wordpress or keystatic.

CMS_CLIENT=keystatic

WORDPRESS_API_URL

If you are using WordPress as your CMS client, you need to set this variable to your WordPress API URL.

WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json

MAILER_PROVIDER

The mailer provider to use. This can be either nodemailer or resend.

MAILER_PROVIDER=nodemailer

Resend uses an HTTP API to send emails. Nodemailer uses SMTP. It is mandatory to use Resend when using the edge runtime, since it doesn't support Nodemailer, which requires a Node.js runtime.

RESEND_API_KEY

If you are using Resend as your mailer provider, you need to set this variable to your Resend API key.

RESEND_API_KEY=your-resend-api-key

EMAIL_SENDER

The email address to use as the sender of the emails.

EMAIL_SENDER=info@makerkit.dev

EMAIL_HOST

If you are using Nodemailer as your mailer provider, you need to set this variable to your SMTP host.

EMAIL_HOST=smtp.your-email-provider.com

EMAIL_PORT

If you are using Nodemailer as your mailer provider, you need to set this variable to your SMTP port.

EMAIL_PORT=587

EMAIL_USER

If you are using Nodemailer as your mailer provider, you need to set this variable to your SMTP user.

EMAIL_USER=your-email-user

EMAIL_PASSWORD

If you are using Nodemailer as your mailer provider, you need to set this variable to your SMTP password.

EMAIL_PASSWORD=your-email-password

EMAIL_TLS

If you are using Nodemailer as your mailer provider, you need to set this variable to your SMTP TLS setting.

EMAIL_TLS=true

NEXT_PUBLIC_CAPTCHA_SITE_KEY

If you want to protect your endpoints using Cloudflare's Captcha, you need to set this variable to your Captcha site key.

NEXT_PUBLIC_CAPTCHA_SITE_KEY=your-captcha-site-key

CAPTCHA_SECRET_TOKEN

If you want to protect your endpoints using Cloudflare's Captcha, you need to set this variable to your Captcha secret token.

CAPTCHA_SECRET_TOKEN=your-captcha-secret-token