How to configure nuxtI18n with nuxt-auth

[Amoki]

I'm using nuxtI18n with strategy: 'prefix' and nuxt-auth (latest v5 version) with OpenIDConnect or OAuth2. The lib requires a /login route which may be behind the prefix but doesn't need to. Both protocols need a callback route (/callback) and this route must not be behind a locale prefix (no /en/callback nor /fr/callback).
I tried to disable I18n on this page using nuxtI18n: false but it does nothing.

callback.vue:

<template>
  <div class="container m-t-24 flex items-center justify-center">
    Logging in...
  </div>
</template>

<script>
export default {
  nuxtI18n: false,
};
</script>

<style scoped>
.container {
  min-height: 70vh;
}
</style>

i18n config:

i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    strategy: 'prefix',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      alwaysRedirect: true,
      cookieSecure: true,
      cookieDomain: null,
    },
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: {
          welcome: 'Welcome',
        },
        fr: {
          welcome: 'Bienvenue',
        },
        es: {
          welcome: 'Bienvenido',
        },
      },
    },
  },

How can make these two libs work together?

Thanks!

[rchl]

It works here, no prefixes are added with nuxtI18n: false.

This relies on parsePages module option being enabled but it's enabled by default and I don't see that you've overridden it.

But maybe a better option would be to create that route as a server middleware? Unless you need the user to interact with that callback page...

[Amoki]

I managed to make it work with warnings (I messed up stuff with my many tries).

 WARN  [vue-router] Route with name 'oidc-callback___fr' does not exist                                                                                                                                                                                                 
 WARN  [vue-router] Route with name 'oidc-callback___fr' does not exist                                                                                                                                                                                                 
 WARN  [vue-router] Route with name 'oidc-callback___fr' does not exist                                                                                                                                                                                                 
 WARN  [vue-router] Route with name 'oidc-callback___en' does not exist                                                                                                                                                                                                 
 WARN  [vue-router] Route with name 'oidc-callback___en' does not exist                                                                                                                                                                                                 
 WARN  [vue-router] Route with name 'oidc-callback___en' does not exist                                                                                                                                                                                                
 WARN  [vue-router] Route with name 'oidc-callback___fr' does not exist 

Those are logs for only one login with locale = fr.

I don't think a server middleware could work. Those protocols use stuff in an anchor (URLs with a #) to be sure browsers don't send it to some backends.

I built a small example reproducing the problem: https://github.com/Amoki/nuxt-i18n-auth-example
I can share a .env file if needed.

[rchl]

Warnings are likely expected at this point (until module stores information which routes are disabled).
Though I believe that those warnings shouldn't show up in production.