[Question] Nuxt i18n - Locale changing after logging in / out

[goela268]

Everytime I login or logout, the currenctly selected Locale (from Nuxt i18n) changes to my configured default Locale.
For example, if my default locale is french, and I selected english, after login, it will be set to french. Same for logout.
There is no other circumstance when this behavior happens, and I'm really not sure how to debug, so I would like to ask if anyone has this behavior aswell. I even checked the code of nuxt-auth-sanctum and I can not really spot anything that could cause this, so apologies if it does not belong here.

Login Code:

const { login } = useSanctumAuth();
const isLoading = ref(false);
const { t } = useI18n();

const errorModal = useErrorMessageModal();
async function doLogin(event: FormSubmitEvent<Schema>) {
  isLoading.value = true;
  await login(event.data)
    .catch((ctx) => {
      let errorMessage = t("common.unknown_error");
      const data = ctx.response?._data;

      if (data && data.error) {
        errorMessage = data.error;
      }

      errorModal.displayError(errorMessage);
    })
    .finally(() => (isLoading.value = false));
}

Logout Code:

logoutLoading.value = true;
 logout().finally(() => {
    logoutLoading.value = false;
});

Sanctum Config:

sanctum: {
    baseUrl: process.env.API_BASE_URL,
    endpoints: {
      csrf: "/backoffice/sanctum/csrf-cookie",
      user: "/my/profile",
      login: "/auth/login",
      logout: "/auth/logout",
    },
    redirect: {
      keepRequestedRoute: true,
      onAuthOnly: "/auth/login",
    },
  },

[manchenkoff]

Hey @goela268! I believe it is not directly related to the module itself, but let's try to find a problem 😄

1. Can you tell me how i18n data is stored? For example, cookies/local storage/session/etc
2. Do you have locale config on Laravel's side as well which might be overwritten once user is logged in?

[goela268]

Hey @goela268! I believe it is not directly related to the module itself, but let's try to find a problem 😄

1. Can you tell me how i18n data is stored? For example, cookies/local storage/session/etc
2. Do you have locale config on Laravel's side as well which might be overwritten once user is logged in?

Hi! Thanks for your reply.

1. My nuxt-i18n config is very basic, I have not set a custom driver, so from what I see its saved using the useState() composable
2. There is no custom locale config on the backend side apart from Laravels default.

My guess is, that because both nuxt-i18n and nuxt-auth-sanctum save state using useState(), maybe the state is reset on login/logout. Very unlikely tho, if no one else can confirm this.

[manchenkoff]

My guess is, that because both nuxt-i18n and nuxt-auth-sanctum save state using useState(), maybe the state is reset on login/logout. Very unlikely tho, if no one else can confirm this.

From what I know, all useState() variables will be reset on page refresh. In my module, there is only one usage of this kind and the key is set from nuxt.config.ts, the default value is sanctum.user.identity. Once you are logged out, this variable will be set to null. However, after that, you will be redirected to the redirect.onLogout route (default is /) with the resetting of the whole current state. Same for login functionality with redirect.onLogin route (default is /).

Have you tried to refresh the page once you selected the custom locale for the user? I assume it should be also reset regardless of authentication.

[goela268]

Thanks for the detailed explanation. I've spent some time with the debugger, and you are right, the locale change happens right after the redirection to redirect.onLogout. Funnily enough, If I set a custom locale and reload the page manually, my custom locale is still set. The value in the cookie is also the one it should be.

It's very odd, but as it has nothing to do with your library indeed, feel free to close this unless you have another idea. Anyway, thank you very much for your attempts at helping me! Much appreciated.

[manchenkoff]

You're welcome! The only suggestion I have in mind is to use some persistent storage for that, for example, cookies or local storage to prevent similar situations in the future.

[goela268]

@manchenkoff Thus it has not directly anything to do with this library, it seems that there is a bug when redirecting using navigateTo in vue-i18n. I have described problem here + reproduction link: nuxt-modules/i18n#3041

What do you think of giving the user the possibility to customize/intercept the path used for redirection on login & logout by providing a function? Not sure how that could look since I only recently migrated to Nuxt 3, from what I see, you can not pass a function within the nuxt config, Maybe there would be a way using hooks? If you would approve for this feature and maybe have an idea how it could look, I could give it a try over the weekend 😄

[manchenkoff]

What do you think of giving the user the possibility to customize/intercept the path used for redirection on login & logout by providing a function?

To be honest, it doesn't seem right for the authentication module 😄 In this case I would suggest disabling automatic redirects (by setting them to false) of the module and writing a custom wrapper for your specific case until the vue-i18n issue is solved.

Not sure how that could look since I only recently migrated to Nuxt 3, from what I see, you can not pass a function within the nuxt config, Maybe there would be a way using hooks?

Hooks are used as event listeners, but not for changing the configuration, so it would be the same as writing custom redirects with disabling defaults.

If you would approve for this feature and maybe have an idea how it could look, I could give it a try over the weekend

There is a way to pass a function via app.config.ts and I already used this approach to support custom request/response interceptors, but I would not do that since it will complicate the module for a very specific case and make it less stable.

If you need any assistance with disabling module-provided redirects and writing your own logic, feel free to post questions here, I will try to help!

[goela268]

In this case I would suggest disabling automatic redirects (by setting them to false) of the module

Wow, I missed that this was possible. In that case I'll simply handle redirection myself. You're right, that's much better than providing interceptors for this specific use case.
Thanks a bunch again for your quick responsiveness, you rock.