• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading Records from Postgres
    • Creating a Record
    • Seeding Local Data
    • Introduction
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Supabase is not starting
    • Calling API Routes from the client
    • Adding Pages
    • Updating the Sidebar menu
    • Setup oAuth
    • Fetching the selected Organization
    • Resetting the local DB
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Supabase is not stopping
    • Dark Theme
    • Theming
    • API Routes vs Server Actions
    • Generating Database Types
    • Updating the Logo
    • Adding a new language in the Next.js Supabase SaaS Kit
    • Tables/Functions not found
    • Updating the Fonts
    • Adding Pages
    • Adding a new translation file
    • Contentlayer gets stuck
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Dynamic server usage error
    • Environment variables
    • Detect current Locale
    • 403 error with API/Actions
    • Setting up Emails
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

How to edit your Makerkit project configuration | Next.js Supabase

Learn how and where to edit your project configuration in your Makerkit SaaS application.

Makerkit stores your project configuration in a Typescript file named configuration.ts, in which we store non-secret data needed in the client-side bundles of your project.

What is stored in the configuration file?

In this configuration file, we store data that is safe to be exposed in the client-side bundles of your project.

The configuration file contains the following data:

tsx
import type { Provider } from '@supabase/gotrue-js/src/lib/types';
const production = process.env.NODE_ENV === 'production';
enum Themes {
Light = 'light',
Dark = 'dark',
}
const configuration = {
site: {
name: 'Awesomely - Your SaaS Title',
description: 'Your SaaS Description',
themeColor: '#ffffff',
themeColorDark: '#0a0a0a',
siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
siteName: 'Awesomely',
twitterHandle: '',
githubHandle: '',
language: 'en',
convertKitFormId: '',
locale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE,
},
auth: {
// ensure this is the same as your Supabase project. By default - it's true
requireEmailConfirmation:
process.env.NEXT_PUBLIC_REQUIRE_EMAIL_CONFIRMATION === 'true',
// NB: Enable the providers below in the Supabase Console
// in your production project
providers: {
emailPassword: true,
phoneNumber: false,
emailLink: false,
oAuth: ['google'] as Provider[],
},
},
production,
environment: process.env.NEXT_PUBLIC_ENVIRONMENT,
features: {
enableThemeSwitcher: true,
},
theme: Themes.Dark,
paths: {
signIn: '/auth/sign-in',
signUp: '/auth/sign-up',
signInMfa: '/auth/verify',
onboarding: `/onboarding`,
appPrefix: '/dashboard',
appHome: '/dashboard',
authCallback: '/auth/callback',
settings: {
profile: 'settings/profile',
authentication: 'settings/profile/authentication',
email: 'settings/profile/email',
password: 'settings/profile/password',
},
},
sentry: {
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
},
stripe: {
products: [
{
name: 'Basic',
description: 'Description of your Basic plan',
badge: `Up to 20 users`,
features: [
'Basic Reporting',
'Up to 20 users',
'1GB for each user',
'Chat Support',
],
plans: [
{
name: 'Monthly',
price: '$9',
stripePriceId: '<price_id>',
},
{
name: 'Yearly',
price: '$90',
stripePriceId: '<price_id>',
},
],
},
{
name: 'Pro',
badge: `Most Popular`,
recommended: true,
description: 'Description of your Pro plan',
features: [
'Advanced Reporting',
'Up to 50 users',
'5GB for each user',
'Chat and Phone Support',
],
plans: [
{
name: 'Monthly',
price: '$29',
stripePriceId: '<price_id>',
},
{
name: 'Yearly',
price: '$200',
stripePriceId: '<price_id>',
},
],
},
{
name: 'Premium',
description: 'Description of your Premium plan',
badge: ``,
features: [
'Advanced Reporting',
'Unlimited users',
'50GB for each user',
'Account Manager',
],
plans: [
{
name: '',
price: 'Contact us',
stripePriceId: '',
label: `Contact us`,
href: `/contact`,
},
],
},
],
},
};
export default configuration;

How should I store my secrets?

You should store your secrets in your non public environment variables, and ideally set up from your CI or Hosting Provider (such as Vercel).

Never add secrets to the configuration file, as it is exposed in the client-side bundles of your project.

Please refer to the Next.js official documentation on how to best store your secrets.

On this page
  1. What is stored in the configuration file?
    1. How should I store my secrets?