# 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.

*Canonical: https://makerkit.dev/docs/next-fire/plugins/cookie-banner*

---

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:

```bash
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](https://github.com/makerkit/cli):

```bash
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:

```bash
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:

```js
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:

```json
"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:

```tsx
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`:

```tsx
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:

```tsx
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:

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