feat: add setting for setting expiration of the cookie that stores locale (#1492)

Author: rchl

docs/content/en/options-reference.md

@@ -131,7 +131,20 @@ Directory that contains translation files to load. Can be used with or without l
 ## `detectBrowserLanguage`
 
 - type: `object`
-- default: `{ alwaysRedirect: false, fallbackLocale: '', redirectOn: 'root', useCookie: true, cookieCrossOrigin: false, cookieDomain: null, cookieKey: 'i18n_redirected', cookieSecure: false }`
+- default:
+  ```js
+  {
+    alwaysRedirect: false,
+    fallbackLocale: '',
+    redirectOn: 'root',
+    useCookie: true,
+    cookieAge: 365,
+    cookieCrossOrigin: false,
+    cookieDomain: null,
+    cookieKey: 'i18n_redirected',
+    cookieSecure: false,
+  }
+  ```
 
 Enables browser language detection to automatically redirect visitors to their preferred locale as they visit your site for the first time.
 
@@ -151,6 +164,7 @@ Supported properties:
   - `root` (recommended for improved SEO) - only detect the browser locale on the root path (`/`) of the site. Only effective when using strategy other than `'no_prefix'`.
   - `no prefix` - a more permissive variant of `root` that will detect the browser locale on the root path (`/`) and also on paths that have no locale prefix (like `/foo`). Only effective when using strategy other than `'no_prefix'`.
 - `useCookie` (default: `true`) - If enabled, a cookie is set once the user has been redirected to browser's preferred locale, to prevent subsequent redirections. Set to `false` to redirect every time.
+- `cookieAge` (default: `365`) - Sets the max age of the cookie in days.
 - `cookieKey` (default: `'i18n_redirected'`) - Cookie name.
 - `cookieDomain` (default: `null`) - Set to override the default domain of the cookie. Defaults to the **host** of the site.
 - `cookieCrossOrigin` (default: `false`) - When `true`, sets the flags `SameSite=None; Secure` on the cookie to allow cross-domain use of the cookie (required when app is embedded in an iframe).

src/helpers/constants.js

@@ -44,6 +44,7 @@ export const DEFAULT_OPTIONS = {
   rootRedirect: null,
   detectBrowserLanguage: {
     alwaysRedirect: false,
+    cookieAge: 365,
     cookieCrossOrigin: false,
     cookieDomain: null,
     cookieKey: 'i18n_redirected',

src/templates/plugin.main.js

@@ -47,6 +47,7 @@ export default async (context) => {
     fallbackLocale,
     redirectOn,
     useCookie,
+    cookieAge,
     cookieKey,
     cookieDomain,
     cookieSecure,
@@ -298,7 +299,7 @@ export default async (context) => {
     i18n.differentDomains = options.differentDomains
     i18n.onBeforeLanguageSwitch = options.onBeforeLanguageSwitch
     i18n.onLanguageSwitched = options.onLanguageSwitched
-    i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieDomain, cookieKey, cookieSecure, cookieCrossOrigin })
+    i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieAge, cookieDomain, cookieKey, cookieSecure, cookieCrossOrigin })
     i18n.getLocaleCookie = () => getLocaleCookie(req, { useCookie, cookieKey, localeCodes: options.localeCodes })
     i18n.setLocale = (locale) => loadAndSetLocale(locale)
     i18n.getBrowserLocale = () => getBrowserLocale()

src/templates/utils-common.js

@@ -1,7 +1,10 @@
 import { parse as cookieParse, serialize as cookieSerialize } from 'cookie'
 import JsCookie from 'js-cookie'
 
-/** @typedef {import('../../types/internal').ResolvedOptions} ResolvedOptions */
+/**
+ * @typedef {import('../../types/internal').ResolvedOptions} ResolvedOptions
+ * @typedef {Required<import('../../types/').DetectBrowserLanguageOptions>} DetectBrowserLanguageOptions
+ */
 
 /**
  * Formats a log message, prefixing module's name to it.
@@ -185,34 +188,36 @@ export function getLocaleCookie (req, { useCookie, cookieKey, localeCodes }) {
 /**
  * @param {string} locale
  * @param {import('http').ServerResponse | undefined} res
- * @param {{ useCookie: boolean, cookieDomain: string | null, cookieKey: string, cookieSecure: boolean, cookieCrossOrigin: boolean}} options
+ * @param {Pick<DetectBrowserLanguageOptions, 'useCookie' | 'cookieAge' | 'cookieDomain' | 'cookieKey' | 'cookieSecure' | 'cookieCrossOrigin'>} options
  */
-export function setLocaleCookie (locale, res, { useCookie, cookieDomain, cookieKey, cookieSecure, cookieCrossOrigin }) {
+export function setLocaleCookie (locale, res, { useCookie, cookieAge, cookieDomain, cookieKey, cookieSecure, cookieCrossOrigin }) {
   if (!useCookie) {
     return
   }
-  const date = new Date()
-  /** @type {import('cookie').CookieSerializeOptions} */
-  const cookieOptions = {
-    expires: new Date(date.setDate(date.getDate() + 365)),
-    path: '/',
-    sameSite: cookieCrossOrigin ? 'none' : 'lax',
-    secure: cookieCrossOrigin || cookieSecure
-  }
-
-  if (cookieDomain) {
-    cookieOptions.domain = cookieDomain
-  }
-
   if (process.client) {
-    // @ts-ignore
+    /** @type {import('js-cookie').CookieAttributes} */
+    const cookieOptions = {
+      expires: cookieAge,
+      path: '/',
+      sameSite: cookieCrossOrigin ? 'none' : 'lax',
+      secure: cookieCrossOrigin || cookieSecure,
+      ...cookieDomain ? { domain: cookieDomain } : {}
+    }
     JsCookie.set(cookieKey, locale, cookieOptions)
   } else if (res) {
     let headers = res.getHeader('Set-Cookie') || []
     if (!Array.isArray(headers)) {
       headers = [String(headers)]
     }
 
+    /** @type {import('cookie').CookieSerializeOptions} */
+    const cookieOptions = {
+      maxAge: cookieAge * 60 * 60 * 24, // in seconds
+      path: '/',
+      sameSite: cookieCrossOrigin ? 'none' : 'lax',
+      secure: cookieCrossOrigin || cookieSecure,
+      ...cookieDomain ? { domain: cookieDomain } : {}
+    }
     const redirectCookie = cookieSerialize(cookieKey, locale, cookieOptions)
     headers = headers.filter(header => {
       const cookie = cookieParse(header)

types/index.d.ts

@@ -18,6 +18,7 @@ export interface LocaleObject extends Record<string, any> {
 
 export interface DetectBrowserLanguageOptions {
   alwaysRedirect?: boolean
+  cookieAge?: number
   cookieCrossOrigin?: boolean
   cookieDomain?: string | null
   cookieKey?: string