Reinitialise i18next instance after cookie accept banner

Question

I'm working on a website and came upon a strange problem with i18next that I can't seem to solve.

I want i18next to save the current language in a cookie but only when the user has accepted to store cookies (custom cookie banner component)

Currently, I have the following code:

i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    whitelist: ['en', 'fr', 'nl'],
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
    ns: [
      'common',
    ],
    react: {
      wait: true,
    },
    detection: {
      caches: ['cookie'],
      lookupFromPathIndex: 0,
    },
  });

index.js

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

import './i18n';

...

My problem is with the caches: ['cookie'] property. I want it to be include "cookie" but only after the user has clicked on an "I Agree" button somewhere on the website. Is there a way to first load the i18next with an empty caches array and reload the object when the user clicked on "I Agree".

On the next page visit (when the user accepted cookies) i18next should know it can read from the language cookie as well. But I think when I know how to fix the first issue I can solve this issue easily.

Answer 1

So I solved this problem with the following solution. Not sure if it's the cleanest but it seems to be working.

index.tsx

function getCookieValue(a: string) {
  const b = document.cookie.match(`(^|;)\\s*${a}\\s*=\\s*([^;]+)`);
  return b ? b.pop() : '';
}

if (getCookieValue('accepts-cookies') === 'true') {
  initI18n(['cookie']);
} else {
  initI18n([]);
}

ReactDOM.render(
  <YOUR APP>
)

CookieBanner Component

import { useCookies } from 'react-cookie';
import { initI18n, getLanguage } from '../../../i18n';
...

export const CookieBanner = () => {
...
const [cookies, setCookie] = useCookies();

const updateCookie = (name: string, value: boolean | string) => {
  const expires = new Date();
  expires.setFullYear(expires.getFullYear() + 1);
  setCookie(name, value, { path: '/', expires });
};

const onAccept = () => {
  updateCookie('accepts-cookies', true);
  const lng = getLanguage();
  updateCookie('i18next', lng);
};

return (
...
)

}

i18n.tsx

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpApi from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next);

export const initI18n = (caches: string[]): void => {
  i18n.init({
    detection: {
      order: ['querystring', 'cookie', 'path', 'navigator'],
      caches
    },
    <YOUR CONFIG>
  })
};

export const getLanguage = (): string => i18n.language || (typeof window !== 'undefined' && window.localStorage.i18nextLng) || 'nl';

Solution

1. I create the i18next cookie myself when the user accepts the cookie banner. In the OnAccept function in the CookieBanner component, I create the 2 cookies (i18next and accepts-cookies)
2. User is currently viewing the website so no need to refresh the page or set caching to 'cookie' in i18n
3. When the user refreshes or revisits the website, the if statement in index.tsx will check if the cookies are accepted and if so will init i18n with cookie caching.

Remark

The only problem I have now is that when the user changes his language after accepting cookies and before refreshing/reopening the website, the i18n cookie is set but i18n is not initiated with cookie caching so it WILL NOT update the cookie to the new language.

Solution for that is calling i18nInit(['cookie']) in the onAccept function like this

const onAccept = () => {
  updateCookie(acceptCookieName, true);
  updateCookieState(true);
  initI18n(['cookie']);   <-- ADD THIS LINE
  const lng = getLanguage();
  updateCookie(i18CookieName, lng);
};

Initiating i18n a second time feels strange but it seems to be working for me. If someone finds a better solution for this issue, feel free to comment or add another solution.

Answer 2

At the end I have solved it using something like the below snippet. Basically we init i18n with caches:[] so cookies are not set. When cookies are set ( I use Redux for that, that is why I use useSelector), then I create another instance which is passed to I18nextProvider. In this way no refresh is needed and my LanguageManager becomes the wrapper of the application. Everything nested within has access to the instance passed.

const initialLanguageConfiguration = {
  fallbackLng: 'en',
  whitelist: ['en'],
  preload: ['en'],
  load: 'languageOnly',
  ns: namespaces,
  debug: false,
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  detection: {
    order: ['querystring'],
    caches: []
  },
  react: {
    // useSuspense: false,
  }
};

const languageConfigurationWithCookies = {
  fallbackLng: 'en',
  whitelist: ['en'],
  preload: ['en'],
  load: 'languageOnly',
  ns: namespaces,
  debug: false,
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  detection: {
    order: ['querystring', 'cookie', 'localStorage', 'navigator'],
    caches: ['cookie', 'localStorage'],
    lookupQuerystring: 'lng',
    lookupCookie: 'lng',
    lookupLocalStorage: 'lng',
    cookieOptions: { path: '/', sameSite: 'strict', secure: false }
  },
  react: {
    // useSuspense: false,
  }
};

const getInitialLanguageManager = (): typeof i18n => {
  const initialInstance = i18n.createInstance();
  initialInstance
    .use(HttpApi)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(initialLanguageConfiguration as any);
  return initialInstance;
};

const getLanguageManagerWithCookies = (): typeof i18n => {
  const instanceWithCookies = i18n.createInstance();
  instanceWithCookies
    .use(HttpApi)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(languageConfigurationWithCookies as any);
  return instanceWithCookies;
};

const LanguageManager: React.FC = ({ children }): JSX.Element => {
  const { areCookiesSaved } = useSelector(selectCookiesConsent);
  const [languageManagerCurrentInstance, setLanguageManagerCurrentInstance] = useState(
    getInitialLanguageManager()
  );

  useEffect(() => {
    if (areCookiesSaved) {
      setLanguageManagerCurrentInstance(getLanguageManagerWithCookies());
    }
  }, [areCookiesSaved]);

  return <I18nextProvider i18n={languageManagerCurrentInstance}>{children}</I18nextProvider>;
};

export { LanguageManager };