Cookie Banner Plugin for the Next.js Firebase Saas Starter Kit

This plugin adds a cookie banner to your Next.js application. It's a simple component that will store the user's consent in a cookie. This banner will stop appearing once the user has given their consent - or rejected it.

Using the Plugin

Installation

To install the plugin, you can use git subtrees from your original repository:

git subtree add --prefix plugins/cookie-banner git@github.com:makerkit/next-firebase-saas-kit-plugins.git cookie-banner --squash

After running this command, you will have the plugin in your repository at plugins/cookie-banner. Once pulled, you can apply any customization you need.

Alternatively, you can use the Makerkit CLI:

npx @makerkit/cli@latest plugin add cookie-banner

If the installation fails

Some users are not able to install using the GitHub SSH URL. If you're having issues with that:

1. properly set up SSH access to GitHub with your SSH key
2. use the HTTPS URL instead of the SSH URL

To use the HTTPS URL, you can run the following command:

git subtree add --prefix plugins/cookie-banner https://github.com/makerkit/next-firebase-saas-kit-plugins cookie-banner --squash

Update TailwindCSS configuration

To make sure that the plugin's styles are applied, you will need to update your TailwindCSS configuration.

Add the plugins path to the content array of your tailwind.config.js file:

module.exports = {
  // ...
  content: [
    // ...
    './plugins/**/*.tsx',
  ],
  // ...
}

This is only needed the first time you install any plugin.

Translations

Add the translations to your public/locales/en/common.json file:

"cookieBanner": {
  "title": "Hi, we use cookies.",
  "description": "This website uses cookies to ensure you get the best
experience on our website.",
  "reject": "Reject",
  "accept": "Accept"
}

Feel free to update the translations to your liking, this is just an example.

Importing the Plugin

You can import the CookieBanner component from the plugin in your _app. tsx file and add it to your application:

import dynamic from 'next/dynamic';
const CookieBanner = dynamic(
    () => import('~/plugins/cookie-banner/CookieBanner'),
    {
        ssr: false,
    },
);
export default function App() {
  return (
    <>
      <CookieBanner />
      {/* ... */}
    </>
  );
}

API

To retrieve the current consent status, you can use the useCookieConsent:

import { useCookieConsent } from 'plugins/cookie-banner';
function MyComponent() {
    const consent = useCookieConsent();
    // ...
}

You can use this hook to decide whether to load third-party scripts or not. For example, you can use it to load Google Analytics only if the user has consented:

import { useCookieConsent } from 'plugins/cookie-banner';
function MyAnalyticsScript() {
  const consent = useCookieConsent();
  if (consent === 'accepted') {
    return (
      <script
        async
        src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"
      />
    );
  }
  return null;
}

Keeping the plugin up to date

To keep the plugin up to date, you can use git subtrees again:

git subtree pull --prefix plugins/cookie-banner git@github.com:makerkit/next-firebase-saas-kit-plugins.git cookie-banner --squash