fix: overwrite or unset unknown cookie locale

specs/browser_language_detection/no_prefix.spec.ts

@@ -59,6 +59,41 @@ test('detection with cookie', async () => {
   expect(await ctx.cookies()).toMatchObject([{ name: 'my_custom_cookie_name', value: 'en' }])
 })
 
+test('detection with cookie - overwrite unknown locale', async () => {
+  await startServerWithRuntimeConfig({
+    public: {
+      i18n: {
+        detectBrowserLanguage: {
+          useCookie: true,
+          cookieKey: 'my_custom_cookie_name',
+          redirectOn: 'root',
+          cookieCrossOrigin: true,
+          cookieSecure: true
+        }
+      }
+    }
+  })
+  const { page } = await renderPage('/', { locale: 'en' })
+  const ctx = page.context()
+  await page.locator('#set-locale-link-fr').click()
+
+  const localeCookie = (await ctx.cookies()).find(x => x.name === 'my_custom_cookie_name')
+  expect([localeCookie]).toMatchObject([{ name: 'my_custom_cookie_name', value: 'fr', secure: true, sameSite: 'None' }])
+
+  // update locale cookie to non-existent locale
+  localeCookie!.value = 'unknown_locale'
+  await ctx.addCookies([localeCookie!])
+  expect(await ctx.cookies()).toMatchObject([
+    { name: 'my_custom_cookie_name', value: 'unknown_locale', secure: true, sameSite: 'None' }
+  ])
+
+  // unknown locale cookie is overwritten to default locale
+  await gotoPath(page, '/')
+  expect(await ctx.cookies()).toMatchObject([
+    { name: 'my_custom_cookie_name', value: 'en', secure: true, sameSite: 'None' }
+  ])
+})
+
 // browser
 test('detection with browser', async () => {
   await startServerWithRuntimeConfig({

src/runtime/internal.ts

@@ -108,7 +108,8 @@ export function getI18nCookie() {
 
 export function getLocaleCookie(
   cookieRef: CookieRef<string | undefined>,
-  detect: false | DetectBrowserLanguageOptions
+  detect: false | DetectBrowserLanguageOptions,
+  defaultLocale: string
 ): string | undefined {
   __DEBUG__ &&
     console.log('getLocaleCookie', {
@@ -122,16 +123,29 @@ export function getLocaleCookie(
   }
 
   const localeCode: string | undefined = cookieRef.value ?? undefined
+  const env = process.client ? 'client' : 'server'
   if (localeCode == null) {
-    __DEBUG__ && console.log(`getLocaleCookie (${process.client ? 'client' : 'server'}) - none`)
+    __DEBUG__ && console.log(`getLocaleCookie (${env}) - none`)
     return
   }
 
   if (localeCodes.includes(localeCode)) {
-    __DEBUG__ &&
-      console.log(`getLocaleCookie (${process.client ? 'client' : 'server'}) - locale from cookie: `, localeCode)
+    __DEBUG__ && console.log(`getLocaleCookie (${env}) - locale from cookie: `, localeCode)
     return localeCode
   }
+
+  if (defaultLocale) {
+    __DEBUG__ &&
+      console.log(
+        `getLocaleCookie (${env}) - unknown locale cookie (${localeCode}), setting to defaultLocale (${defaultLocale})`
+      )
+    cookieRef.value = defaultLocale
+    return defaultLocale
+  }
+
+  __DEBUG__ && console.log(`getLocaleCookie (${env}) - unknown locale cookie (${localeCode}), unsetting cookie`)
+  cookieRef.value = undefined
+  return
 }
 
 export function setLocaleCookie(
@@ -166,7 +180,7 @@ export type DetectLocaleContext = {
   ssg: DetectLocaleForSSGStatus
   callType: DetectLocaleCallType
   firstAccess: boolean
-  localeCookie: CookieRef<string | undefined>
+  localeCookie: string | undefined
 }
 
 export const DefaultDetectBrowserLanguageFromResult: DetectBrowserLanguageFromResult = {
@@ -230,7 +244,7 @@ export function detectBrowserLanguage(
 
   // get preferred language from cookie if present and enabled
   if (useCookie) {
-    matchedLocale = cookieLocale = localeCookie.value
+    matchedLocale = cookieLocale = localeCookie
     localeFrom = 'cookie'
     __DEBUG__ && console.log('detectBrowserLanguage: cookieLocale', cookieLocale)
   }

src/runtime/plugins/i18n.ts

@@ -82,7 +82,7 @@ export default defineNuxtPlugin({
         ssg: isSSG && runtimeI18n.strategy === 'no_prefix' ? 'ssg_ignore' : 'normal',
         callType: 'setup',
         firstAccess: true,
-        localeCookie
+        localeCookie: _getLocaleCookie(localeCookie, _detectBrowserLanguage, runtimeI18n.defaultLocale)
       },
       runtimeI18n
     )
@@ -130,7 +130,12 @@ export default defineNuxtPlugin({
           ? detectBrowserLanguage(
               route,
               vueI18nOptions.locale,
-              { ssg: 'ssg_setup', callType: 'setup', firstAccess: true, localeCookie },
+              {
+                ssg: 'ssg_setup',
+                callType: 'setup',
+                firstAccess: true,
+                localeCookie: _getLocaleCookie(localeCookie, _detectBrowserLanguage, runtimeI18n.defaultLocale)
+              },
               initialLocale
             )
           : DefaultDetectBrowserLanguageFromResult
@@ -198,7 +203,8 @@ export default defineNuxtPlugin({
           composer.differentDomains = runtimeI18n.differentDomains
           composer.defaultLocale = runtimeI18n.defaultLocale
           composer.getBrowserLocale = () => _getBrowserLocale()
-          composer.getLocaleCookie = () => _getLocaleCookie(localeCookie, _detectBrowserLanguage)
+          composer.getLocaleCookie = () =>
+            _getLocaleCookie(localeCookie, _detectBrowserLanguage, runtimeI18n.defaultLocale)
           composer.setLocaleCookie = (locale: string) => _setLocaleCookie(localeCookie, locale, _detectBrowserLanguage)
 
           composer.onBeforeLanguageSwitch = (oldLocale, newLocale, initialSetup, context) =>
@@ -435,7 +441,7 @@ export default defineNuxtPlugin({
             ssg: isSSGModeInitialSetup() && runtimeI18n.strategy === 'no_prefix' ? 'ssg_ignore' : 'normal',
             callType: 'routing',
             firstAccess: routeChangeCount === 0,
-            localeCookie
+            localeCookie: _getLocaleCookie(localeCookie, _detectBrowserLanguage, runtimeI18n.defaultLocale)
           },
           runtimeI18n
         )

src/runtime/utils.ts

@@ -233,7 +233,7 @@ export function detectLocale(
       _detectBrowserLanguage
     )
   if (!finalLocale && _detectBrowserLanguage && _detectBrowserLanguage.useCookie) {
-    finalLocale = localeCookie.value || ''
+    finalLocale = localeCookie || ''
   }
 
   __DEBUG__ && console.log('detectLocale: finalLocale last (finalLocale, defaultLocale) -', finalLocale, defaultLocale)