Environment Variables

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 not stored in the .env file. Instead, they are stored in the environment variables of the CI/CD system.

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.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS