Cookie Banner Plugin for the Remix Supabase Saas Starter Kit

This plugin adds a cookie banner to your Remix 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/remix-supabase-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.

Using the CLI

If you're using the CLI, you can run the following command to install the plugin:

npx @makerkit/cli plugins install

Follow the instructions to install the plugin.

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/remix-supabase-saas-kit-plugins cookie-banner --squash

Add the paths alias to the TypeScript configuration

To make sure that the TypeScript compiler can find the plugin, you will need to add the following paths alias to your tsconfig.json file, in addition to the other paths aliases that you may have.

If not yet present, add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "paths": {
      "~/plugins/*": [
        "./plugins/*"
      ]
    }
  }
}

You only need to add this once, even if you have multiple plugins.

Add the plugin path to your Tailwind configuration

You can do so by adding the following to your tailwind.config.js file:

content: ['./app/**/*.{ts,tsx,jsx,js}', './plugins/**/*.{ts,tsx,jsx,js}']

This is only needed the first time you install a 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"
  }
}

Importing the Plugin

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

import CookieBanner from '~/plugins/cookie-banner/CookieBanner';
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-supabase-saas-kit-plugins.git cookie-banner --squash