Cookie no set on Safari localhost

[6aKa]

next-intlayer version 8.1.6

I use code like this to set locale in locale switcher (client component):

  const { setLocale } = useLocaleStorage();
  setLocale(localeItem);

1. when I set

routing: {
  storage: ['localStorage', 'header']
}

all good
I see x-intlayer-locale: en header in response and INTLAYER_LOCALE key with value en in localStorage

2. when I set

routing: {
  storage: ['sessionStorage', 'header']
}

all good
I see x-intlayer-locale: en header in response and INTLAYER_LOCALE key with value en in sessionStorage

3. when I set

routing: {
  storage: ['cookie', 'header']
}

not good
I see x-intlayer-locale: en header in response, but no cookie.

I try use const { setLocale } = useLocaleStorage(true); but result is same, no cookie.

[aymericzip]

Hey @6aKa

Thanks for reporting,

I just had a try, and it seems to works as expected.

  storage: ['cookie', 'header']

This config set cookie + header

---

Note that in the chrome dev tool, cookies have to be refreshed to see the change

Can you share a minimal repro ?

[6aKa]

In Chrome all work. Cookie created.

But in Safari doesn't work. Cookie not created.

[6aKa]

You can use default template https://github.com/aymericzip/intlayer-next-16-template.git for reproduce this bug.

[aymericzip]

I got able to reproduce. It seems to be the case to localhost only. Once deployed it seems to work properly

I see how to improve it

[6aKa]

I try this config

    storage: [
      'localStorage',
      {
        type: 'cookie',
        name: 'user-locale',
        secure: false,
        sameSite: 'none',
        httpOnly: false
      }
    ]

In chrome cookie set, but with secure flag

In safari cookie doesn't created

[aymericzip]

@6aKa

I had several tries, and I'm still without solution. I will pass for that issue for now

related files

packages/@intlayer/core/src/getStorageAttributes.ts
packages/@intlayer/core/src/utils/localeStorage.ts

[oliviercperrier]

Cookie not set for me in local on chrome even if i refresh them. Not sure why

[aymericzip]

hey @oliviercperrier

Can i see you intlayer.config file and local switcher ?

[oliviercperrier]

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'
import { intlayer } from 'vite-intlayer'

const config = defineConfig({
  plugins: [
    nitro(),
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    intlayer(),
    tanstackStart({
      router: {
        routeFileIgnorePattern:
          '.content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$',
      },
    }),
    devtools(), // must be after tanstackStart() so virtual modules resolve
    viteReact(),
  ],
})

export default config

  const { locale, setLocale } = useLocale()

<DropdownMenuItem
     render={(props) => (
         <LocalizedLink
              to={pathWithoutLocale as To}
              onClick={() => setLocale(nextLocale)}
              params={{ locale: nextLocale }}
              {...props}
            >
              <Globe className="size-4" />
              {locale === Locales.FRENCH
                  ? content.switchToEnglish
                  : content.switchToFrench}
          </LocalizedLink>
      )}
/>

Also, if i add intLayerProxy it throws an hydration error on the default local. Probably because the cookie is not being set