/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    span: "span",
    ol: "ol",
    li: "li",
    code: "code",
    strong: "strong"
  }, props.components), {Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Hi there! Since version 0.4.0, we worked hard on providing improvements to\nthe overall look and feel of the application, we reduced the bundle's size\nby tweaking the Firebase tree-shaking configuration, minor fixes, and added\none of the latest change to Firebase Storage that helped us reduce\ncomplexity in certain parts of the codebase."
    }), "\n", _jsxs(_components.h2, {
      id: "1-design-improvements",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#1-design-improvements",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "1) Design Improvements"]
    }), "\n", _jsx(_components.p, {
      children: "The biggest design changes affected the authentication pages."
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "The overall background has a darker shade"
      }), "\n", _jsx(_components.li, {
        children: "Smaller gap between controls"
      }), "\n"]
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/auth-0.5.0.webp",
      width: "1346",
      height: "1596"
    }), "\n", _jsxs(_components.p, {
      children: ["Furthermore, we updated the ", _jsx(_components.code, {
        children: "Sidebar"
      }), " layout to take the full space of the page:"]
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/sidebar-layout-0.5.0.webp",
      width: "2738",
      height: "2056"
    }), "\n", _jsxs(_components.h2, {
      id: "2-bundle-size-reduction",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#2-bundle-size-reduction",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "2) Bundle Size reduction"]
    }), "\n", _jsx(_components.p, {
      children: "Because of a bug in either Reactfire or Next.js, tree-shaking isn't working\ncorrectly when importing Reactfire."
    }), "\n", _jsxs(_components.p, {
      children: ["To work it around, we added a list of externals to the webpack configuration,\nwhich helped us ", _jsx(_components.strong, {
        children: "shave off at least 50kb"
      }), " from the production bundle!"]
    }), "\n", _jsxs(_components.h2, {
      id: "3-firestore-rules-in-firebase-storage",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#3-firestore-rules-in-firebase-storage",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "3) Firestore rules in Firebase Storage"]
    }), "\n", _jsxs(_components.p, {
      children: ["Using ", _jsx(_components.a, {
        href: "/blog/tutorials/firestore-storage-rules",
        children: "Firestore rules in the Firebase storage rules"
      }), "\nhelped us reduce the complexity of the code for handling group security."]
    }), "\n", _jsx(_components.p, {
      children: "In fact, to restrict\nusers from reading and writing only to the organizations they're part of, we\nneeded to use custom claims, and update them every time the user changed\norganization."
    }), "\n", _jsx(_components.p, {
      children: "Thanks to the new updated, we were able to clean up a lot of\ncode and simplify the whole process. Cheers, Firebase team!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Changelog

I am super excited to announce **a new documentation generator for the Supabase Kits**! 🎉

With this new feature, the Remix Supabase, Next.js Supabase and Next.js Supabase Lite kits are now feature complete, like the original kit based on Next.js and Firebase.

In addition, **the Remix kit also gets a new shiny blog generator**, which was already available for the Next.js kits.


<Image src="/assets/images/posts/docs-index.webp" alt="Documentation Index Page" width="2796" height="1668" />


## What is a documentation generator?

The documentation generator allows you to self-host your own documentation site for your Makerkit-based SaaS.

Instead of relying on a third-party service, you can write your documentation in Markdown and host it on your own domain - together with your SaaS.

While you may eventually outgrow the documentation generator (which is good!), Makerkit offers a complete solution for your SaaS from day one.

## How does it work?

The documentation (like the blog) is built using the amazing [Contentlayer](https://contentlayer.dev).

Contentlayer helps us greatly simplify the process of organizing Markdown files into a structured content model.

### Content Folder

Every kit now has a `content` folder, which contains the Markdown files for the documentation. The `content` folder is organized into sections, which are then rendered as pages on the documentation site.

Sections can be nested, so you can have a section with sub-sections. The sub-sections are then rendered as sub-pages.

### Initial Section page

Every section page can have an `index.mdx` file, which is the initial page for the section. This is useful if you want to have a landing page for the section, which then links to the sub-sections.

<Image src="/assets/images/posts/docs-section-page.webp" alt="Documentation Section Page" width="2818" height="1800" />

### Ordering

To organize the order of the sections, you shall prefix the folder name with a number, such as `01-getting-started`. The sections are then sorted alphabetically, so you can use numbers to control the order.

<Image src="/assets/images/posts/docs-ordering.webp" alt="Documentation Ordering" width="754" height="674" />

For example, the `content` folder for the Next.js Supabase kit looks like this:

```bash
- content
 - docs
 - 01-getting-started
 - index.mdx
 - 01-installation.mdx
 - 02-configuration.mdx
 - 01-supabase.mdx
 - 02-firebase.mdx
 - 03-authentication.mdx
 - 04-database.mdx
 - 05-storage.mdx
 - 06-usage.mdx
 - 07-deployment.mdx
 - 01-vercel.mdx
 - 02-netlify.mdx
 - 08-questions.mdx
 - 02-faq
 - index.mdx
 - 01-what-is-supabase.mdx
```

As you can see, we can use nested folders to organize the content. The `01-getting-started` folder is the first section, and it has an `index.mdx` file, which is the initial page for the section. The `02-configuration` folder is the second section, and it has a sub-section `01-supabase` and `02-firebase`.

### Frontmatter

Every Markdown file can have a frontmatter, which is a YAML block at the top of the file. The frontmatter is used to define the title of the page, and the description of the page.

For example, the `index.mdx` file for the `01-getting-started` section looks like this:

```mdx
---
title: "Getting Started with the Makerkit SaaS Starter Kits"
label: "Getting Started"
description: "Learn how to get started with the Makerkit SaaS Starter Kits"
---
```

The `title` is the title of the page, which is used for the `title` tag in the HTML code. The `label` is the label of the page, which is used in the sidebar navigation (where it's likely you will want a less SEO-focused label). The `description` is the description of the page, which is used in the meta tags.

## Conclusion

I hope you like this new feature! I am super excited about it, and I can't wait to see what you will build with it.

If you have any questions, please feel free to reach out to me on our Discord channel.

Bye! 👋

Announcing a new documentation generator for the Supabase Kits

One of the most requested features for Makerkit is an admin panel for managing users, organizations and generally a way to build management tools within the SaaS application.
Today, I am excited to announce the launch of the Makerkit Super Admin! 🎉

## Why do I need an admin panel, you ask?

As a SaaS founder, you'll be spending a lot of time in your admin panel. It's where you'll manage your users, subscriptions, and more. It's also where you'll be able to build custom tools for your SaaS application.

For example, you might want to build a tool that allows you to send a message to all your users. Or you might want to build a tool that allows you to manage your users' data.

The initial release of the Super Admin will offer you the following features:

1. A Dashboard with an overview of your SaaS application - including active users, organizations, subscriptions, and number of trials
2. A Users page where you can manage your users - including the ability ban, reactivate and impersonate users
3. An Organizations page where you can manage your organizations - including the ability to view its members and the subscription status

More features will be added in the future, including the ability to manage your subscriptions, plans, and more.

## Super Admin Features

### Dashboard

The Dashboard gives you an overview of your SaaS application. It includes the following information:

1. Number of subscribed users
2. Number of Organizations
3. Number of active subscriptions
4. Number of trials

<Image src="/assets/images/posts/admin-dashboard.webp" width={2868} height={818} alt={'Super Admin Dashboard'} />

Yes - it's still basic, but from here you can build upon it and add more information that is relevant to your SaaS application. For example, if your SaaS application is an AI Chatbot, you might want to add the number of conversations resolved by the chatbot. Or if your SaaS application is a CRM, you might want to add the number of leads generated, and so on.

Anything that helps you understand the health of your SaaS application can be added to the Dashboard - and you should likely do so!

### Users

The Users page allows you to manage your users. You can view all your users paginated and search for a specific user. You can also ban, reactivate and impersonate users.

<Image src="/assets/images/posts/admin-users-page.webp" width={2844} height={1938} alt={'Super Admin Users Page'} />

You can view the detail of a user by clicking on the user's ID, where you can see the user's email, name, organizations, and other information.

<Image src="/assets/images/posts/admin-user-detail.webp" width={2868} height={1960} alt={'Super Admin User Detail'} />

#### Disabling/Banning users

Admins can easily disable/ban some users from the users page or from the user's page:

<Image src="/assets/images/posts/admin-disable-user.webp" width={2862} height={1952} alt={'Super Admin Disable User'} />

#### Impersonating Users

An extremely useful feature for SaaS founders is the ability to impersonate users, usually for debugging ot helping users out.

<Image src="/assets/images/posts/admin-impersonate-user.webp" width={2862} height={1952} alt={'Super Admin Impersonate User'} />

### Organizations

The Organizations page allows you to manage your organizations. You can view all your organizations paginated and search for a specific organization. You can also view its members and the subscription status.

<Image src="/assets/images/posts/admin-organizations-page.webp" width={2868} height={1960} alt={'Super Admin Organizations Page'} />

#### View Members

The View Members page allows you to view all the members of an organization. You can also search for a specific member. From here, you can navigate to the detail of a member by clicking on the member's ID.

<Image src="/assets/images/posts/admin-organization-members-page.webp" width={2868} height={1960} alt={'Super Admin Organization Members Page'} />

## When will it be available?

The initial version will be out on Wednesday 16 August 2023. Further updates will come soon.

## Future Plans

The Super Admin is just the beginning. I have a lot of plans for the Super Admin, including the ability to manage your subscriptions, managing members, updating users and organizations, and more.

One of the things I am excited the most about is the ability to build plugins to better manage your SaaS. For example, a simple feedback tool that allows you to collect feedback from your users and manage it from the Super Admin. Or a CMS that allows you to manage your content from the Super Admin - and more.

Stay tuned for more updates!

Introducing the Makerkit Super Admin


As our tech stacks progress and new technologies emerge, we need to make sure that MakerKit is up to date with the latest and greatest. This means that we need to make some changes to the platform. We will be making these changes in Summer 2023.

From packages being updated to frameworks evolving, technology never sleeps - and neither do we.

## Design Updates

We will be updating the design of MakerKit to be more modern and sleek. To do so, we will [fully embrace Shadcn UI](https://ui.shadcn.com) - so that you can copy/paste components from the documentation into your MakerKit projects.

### Tailwind CSS

We will also update our colors convention in Tailwind CSS.

We will retire the `black` convention in favour of `dark`, which we will use for dark mode. This will allow us to have a more consistent naming convention. This also means we can better integrate with Shadcn UI.

This will also allow to build more themes for dark mode, which we will be doing in the future.

## Package Updates

Some of the packages into the kits will be replaced for better alternatives.

1. Headless UI will be fully removed in favour of Shadcn UI / Radix UI.
2. Additionally we will remove the `classnames` package in favour of the `clsx` package, which is smaller, faster and maintained.

I am still looking for a better alternative to using animations, since the `Transition` component from Headless UI was very useful, but has been broken for a while with no fix in sight. Pity.

## Framework Updates

### Next.js App Router

While the Supabase kits use the new Next.js App Router, the Firebase kit is still using the Pages router. My intention is to update the kit in a whole new kit.

With that said - I am still fighting with way too many bugs in the App Router - so I will wait until Next.js 14 is released to update the Firebase kit.

### The road to Remix 2

As Remix is venturing into version 2 - we will be updating MakerKit to use Remix 2. While we have already migrated some settings to Remix 2, we will be fully migrating to Remix 2 by enabling all the flags and settings.

The most striking difference is its file-system routing changing - which means that we will need to update the way that we handle routing in MakerKit and our folders structure. As you can imagine, this is a big change and not easily merged using Git.

Since the updates may be too hard to merge, I will be creating guides for updating to Remix 2.

## Conclusion

These updates will start to roll out in the next few days. I will be updating the kits one by one, starting with the Firebase kits.

I am excited to bring these changes to MakerKit. I hope that you are too.

If you have any questions, please reach out to us on [Twitter](https://twitter.com/makerkit_dev) or on Discord.

Upcoming changes to Makerkit in Summer 2023

Building a SaaS Boilerplate that ticks all the boxes for a variety of use-cases is a challenge. The original Makerkit template was built with a lot of features in mind, but it was also a bit too much for some use-cases. That's why I decided to build a **smaller, faster and simpler version that the original Makerkit template**.

Makerkit Lite is a lower-cost, lightweight version of the original Makerkit template. It can be yours for only $169, or free if you already have a license for the original Makerkit template.

Contact me for early access, or read on to learn more about Makerkit Lite.

### What is Makerkit Lite?

Makerkit Lite is a **lightweight SaaS Boilerplate built with Next.js and Supabase**. It is a smaller, faster and simpler version that the original Makerkit template, and is better suited for applications that do not require teams/organizations/roles, and only need English as the default language.

Compared to the original Makerkit template, Makerkit Lite removed the complexity of having organizations of users, an initial onboarding, and translation files. This means that Makerkit lite is better suited if your application only needs a single user, and only needs to support English as the default language.

### What features does Makerkit Lite have?

Makerkit Lite has the following features:

- Authentication with email/password, magic links, and social logins (Google, Facebook, Twitter, GitHub)
- User profile with name, email, and profile picture
- Billing and Subscriptions with Stripe (support for Lemon Squeezy will arrive)
- Makerkit pages (landing page, FAQ, pricing)
- Blog engine with MDX support
- Sample Dashboard

It **does not** have:
- Organizations/Teams
- Translations
- Initial onboarding

### When should you use Makerkit lite?

Do you need organizations and translations? If not, then Makerkit Lite is for you. If you do, or planning on adding them later on, then the original Makerkit template is a better fit.

Generally speaking, it is better suited for B2C applications, or B2B applications that do not need organizations/teams/roles.

### What technologies does Makerkit Lite use?

Makerkit Lite is built with Next.js, Supabase, TailwindCSS, and Stripe. I plan on adding support for Lemon Squeezy (just like the full Makerkit template) in the future.

At this time, it will only be available for Next.js and Supabase - but I will evaluate demand and feedback to see if I should add support for other frameworks and databases.

### I have a license for the original Makerkit template, do I get Makerkit Lite for free?

Yes, it is free for full Makerkit template license holders.

### I only want to buy Makerkit Lite, can I do that?

Yes, you can buy Makerkit Lite for $169.

### I want to buy Makerkit Lite, but I also want to upgrade to the full Makerkit template later, can I do that?

Yes, I'll send you a link to upgrade to the full Makerkit template.

Introducing Makerkit Lite: a lightweight Next.js SaaS Boilerplate

I am very excited to announce that Makerkit now supports Lemon Squeezy subscriptions! 🍋

## Why Lemon Squeezy?

Lemon Squeezy is a subscription management platform that allows you to sell subscriptions (and one-off payments) to your customers.

But why use Lemon Squeezy instead of Stripe? Lemon Squeezy is a Merchant of Record (MoR), which means that they are responsible for collecting sales tax for you. Not only this means it's easier for you
to get started with selling subscriptions, but it also means that you don't have to worry about collecting sales tax yourself, which saves time and ultimately plenty of headaches.

Lemon Squeezy charges a 5% + $0.50 fee on all transactions, which is a bit higher than Stripe's 2.9% + $0.30 fee. For payments outside of the US, it will also charge 1.5%. With that said, it can be worth it if you don't want to worry about sales tax.

## Makerkit + Lemon Squeezy = 💖

Lemon Squeezy has been integrated as a different branch on top of the original `main` branch, named `main-ls`. If you'd like to use Lemon Squeezy instead of Stripe, you can use the `main-ls` branch instead of `main` when creating your app.

For more information, please consult the documentation for your kit. At the time of writing, Lemon Squeezy is supported in the following kits:
- Next.js + Firebase
- Next.js + Supabase

Support for the Remix kits will be added soon.

The current integration with Lemon Squeezy will allow your customers to:

- subscribe to a plan
- switch to a different plan
- cancel the current subscription
- resume their subscription

At this time, to support more complex workflows such as trial periods, prorations, etc. you can customize the Lemon Squeezy integration yourself, in fact, the code is fairly concise and easy to understand.

In the future, we may support a basic customer portal and more complex workflows.

Check out the demo below:

<TweetEmbed>
 <blockquote className="twitter-tweet" data-dnt="true" data-theme="dark">
 Announcement ✨<a
 href="https://twitter.com/makerkit_dev?ref_src=twsrc%5Etfw">@makerkit_dev</a> now supports <a
 href="https://twitter.com/lmsqueezy?ref_src=twsrc%5Etfw">@lmsqueezy</a> 🍋 for SaaS subscriptions! 🎉 Adding
 an
 MoR was highly requested 👉 you can now accept payments for your SaaS and never worry about sales tax! 😎<a
 href="https://twitter.com/hashtag/buildinpublic?src=hash&amp;ref_src=twsrc%5Etfw">#buildinpublic</a> <a
 href="https://t.co/qCCvD9QuCu">pic.twitter.com/qCCvD9QuCu</a>
 &mdash; Giancarlo (@gc_psk) <a
 href="https://twitter.com/gc_psk/status/1641410695412563975?ref_src=twsrc%5Etfw">March 30, 2023</a>
 </blockquote>
</TweetEmbed>

## Conclusion

Adding a MoR was one of the most requested features for Makerkit, and I'm very happy to finally be able to deliver it.

I hope you enjoy using Lemon Squeezy with Makerkit! If you have any questions, please feel free to reach out to me on Twitter or Discord.

Announcing: Makerkit now supports Lemon Squeezy subscriptions! 🍋

I'm excited to announce that Makerkit is adding support for Multi-Factor Authentication (MFA) the Supabase kits. This is a sneak peek to our coming feature.

## What is MFA?

Multi-Factor Authentication (MFA) is a method of authentication that requires more than one piece of evidence to verify the user's identity. It is a way to add an extra layer of security for your users' accounts.

## Should you add MFA to your app?

If you're building an app that requires a high level of security, then you should definitely consider adding MFA to your app. For example, if you're building an app that requires users to manage their finances, then you should definitely add MFA to your app.

Your users will feel more secure knowing that their accounts are protected by MFA, and it can be a potential differentiator for your app. I don't see a reason not to offer this functionality to your users.

## How does MFA work?

Supabase allows us to use TOPT (Time-based One-time Password) to generate a one-time password (OTP) that the user can use to login to their account using their second authentication factor.

## Supabase MFA in Practice

### Step 1. Users will enroll an authentication factor (e.g. Google Authenticator)

The first step for your users is to enroll a new authentication factor using an Authenticator app (such as Google Authenticator or Authy).

1. The first thing they are required to do is to specify a name for their new authentication factor: Supabase supports up to 10 factors (more than enough for sure!). This name will be used to identify the authentication factor in the Authenticator app, and will help users remember which factor they are using.
2. Then, they're required to scan the QR code with the authenticator app. This will generate a secret key that will be used to generate the OTP.
3. After confirming the one-time code generated by the authenticator app, the user will be able to use their new authentication factor to login to their account.

<Video src="/assets/images/posts/mfa-setup.mp4" />

### Step 2. Users will login to their account using their email and password

After logging in, we will check if users have enrolled any MFA factor. According to Supabase, this rarely uses the network and it's a very fast check. After logging in using the first authentication factor, the users' assurance level is `aal1`.

If users are required to use MFA, then we will redirect them to the MFA page. This page will prompt them to select a factor: for example, a factor enrolled using a work smartphone. If only one factor is enrolled, then it will be automatically selected.

Then, they will be required to enter the OTP generated by the authenticator app for that factor. If the OTP is correct, then the user will be logged in to their account. Their assurance level is upgraded to `aal2`.

<Video src="/assets/images/posts/mfa-verify.mp4" />

## Conclusion

I'm excited to add this feature to our kits. I think it's a great way to add an extra layer of security to your app. I hope you enjoyed this sneak peek to our coming feature. If you have any questions, feel free to reach out on our Discord server.

Announcing support for Multi-Factor Authentication (MFA) with Supabase

Hi there! Since version 0.4.0, we worked hard on providing improvements to
the overall look and feel of the application, we reduced the bundle's size
by tweaking the Firebase tree-shaking configuration, minor fixes, and added
one of the latest change to Firebase Storage that helped us reduce
complexity in certain parts of the codebase.

## 1) Design Improvements

The biggest design changes affected the authentication pages.

1. The overall background has a darker shade
2. Smaller gap between controls

<Image src='/assets/images/posts/auth-0.5.0.webp' width={"1346"} height=
 {"1596"} />

Furthermore, we updated the `Sidebar` layout to take the full space of the page:

<Image src='/assets/images/posts/sidebar-layout-0.5.0.webp' width={"2738"}
 height={"2056"} />

## 2) Bundle Size reduction

Because of a bug in either Reactfire or Next.js, tree-shaking isn't working
correctly when importing Reactfire.

To work it around, we added a list of externals to the webpack configuration,
which helped us **shave off at least 50kb** from the production bundle!

## 3) Firestore rules in Firebase Storage

Using [Firestore rules in the Firebase storage rules](/blog/tutorials/firestore-storage-rules)
helped us reduce the complexity of the code for handling group security.

In fact, to restrict
users from reading and writing only to the organizations they're part of, we
needed to use custom claims, and update them every time the user changed
organization.

Thanks to the new updated, we were able to clean up a lot of
code and simplify the whole process. Cheers, Firebase team!

v0.5.0: Design Improvements and code-cleanup

The version 0.5.0 adds improvements to the overall design, and adds Firebase Storage security rules backed by Firestore

1) Design Improvements

2) Bundle Size reduction

3) Firestore rules in Firebase Storage

👋 Hi! Would you like to learn how to build an AI SaaS with Next.js, Supabase and Stripe including a fully working SaaS template? Check out our new course!

Read more about Changelog