Always resetting the cookie when a PWA is installed

[maiconsanson]

Description

Based on the docs, the main strategy to detect the locale is:

1. A locale prefix is present in the pathname (e.g. /de/about)
2. A cookie is present that contains a previously detected locale
3. The accept-language header is matched against the available locales
4. The defaultLocale is used

This happens very well when accessing a browser by URL.

But the strategy fails if I access my app, which is a PWA, from installed on mobile.
The NEXT_LOCALE cookie is resetting when the app opens based on the accept-language header, even if I have this cookie value already.

Debugging my phone
If I access the root URL /, the previous NEXT_LOCALE is ignored. The locale is always en because I'm using it as the default language on my phone.

There is no problem with the app, only the NEXT LOCALE cookie is resetting. Other cookies are preserved and retrieved. In case I change my cellphone locale to Portuguese, the cookie is always pt no matter what.

Important

• "next": "14.1.0"
• "next-intl": "3.5.1"
• "@serwist/next': '8.4.3"
• '@serwist/sw': '8.4.3'
• It was tested with 2 Android phones with Chrome with the same result.
• Before some next-intl update (I don't know which version) it did not happen.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/maiconsanson/next-intl-pwa-ignoring-cookie

Reproduction description

Steps to reproduce:

1. Configure your mobile device to the English locale en.
2. Install the PWA (mobile) on Chrome.
3. Open the app and change the locale by clicking on the link "Mude para Português".
4. Close the PWA.
5. Open the app again and notice that the locale is en, not the previous pt selected.

Repeat these steps directly on the browser and you seed that works normally.

Here is the production link to see in action:
https://intl-unable-find-locale.vercel.app/

Expected behaviour

The expected behavior is that the saved NEXT_LOCALE cookie value be used to define language when the PWA is installed.

[remcomulders]

I've had the same issue. I see you change locales using the <Link>. What worked for me was adding prefetch={false} on the <Link> component. The cookie gets changed while prefetching the different locales.

[maiconsanson]

I've had the same issue. I see you change locales using the <Link>. What worked for me was adding prefetch={false} on the <Link> component. The cookie gets changed while prefetching the different locales.

@remcomulders Thanks for the reply! But even if setting prefetch to false, it doesn't work as expected when the PWA is installed on mobile. The cookie locale is always overridden by my system language on the first load.

https://github.com/maiconsanson/next-intl-pwa-ignoring-cookie/blob/main/src/app/components/Link/index.js

[github-actions]

Thank you for your report!

From the currently available context in this issue, it's unclear wether the erroneous behavior is caused by Next.js, next-intl or a 3rd party library that you're using. Please isolate the issue further to be sure that the issue is caused by next-intl. When in doubt, please search on the Next.js issue tracker or related resources of 3rd party libraries you might be using.

If you're able to isolate the issue to next-intl, please provide a minimal reproduction that ideally doesn't involve any 3rd party libraries or alternatively demonstrates that next-intl is causing the issue.

Thank you for your understanding!

[amannn]

Also make sure to upgrade to the latest version, e.g. 3.4.5 included a fix in regard to cookies.

[maiconsanson]

Also make sure to upgrade to the latest version, e.g. 3.4.5 included a fix in regard to cookies.

I've upgraded all the packages to the latest, and I'm still facing the issue that only happens with the NEXT_LOCALE.

I think that is because of the SameSite='Strict' cookie value.
Once the PWA is installed, it may not be able to get that cookie the first time due to the strict policy and the context in which it opens... I'll look into it.

I can set a different cookie with the same value (and SameSite='Lax') and see both behaviors.

If so, would it be ok to change the SameSite cookie value?

Thanks for the brilliant package.

[maiconsanson]

@amannn I can confirm. It's because of the SameSite='Strict' restriction.

Any hit of the app that starts outside of it will not be able to load the cookie for the first time by using strict.

That's why any installed PWA won't get the cookie value loaded and always is reset.

The solution is to change from SameSite='Strict' to SameSite='Lax'.

At the following URL, you will see that I settled two more cookies: FAKE_LOCALE_STRICT and FAKE_LOCALE_LAX.
The only cookie that loads at the first hit is the settled with SameSite='Lax' (FAKE_LOCALE_LAX).
The behavior is noticed by clicking on this link (and after updating the page to get the values) or installing the PWA:

https://intl-unable-find-locale.vercel.app/en

Mystery solved.

[amannn]

You're absolutely right @maiconsanson, thanks for investigating! #817 will address this, a fix should be out shortly.

[civilgoody]

Thank you so much for putting this solution out here 🙏🏾.