Support i18n redirect routes

[zangab]

My nuxt project uses i18n with the prefix strategy, meaning all routes include a locale like /en/login. A default route like /login is not generated. The problem is, the /login page is returning a 404 and if I prefix the redirect url with a default language /en/profile the user's locale gets reset. Example: I login from /fr/login and end up on /en/profile although I would want the french version of this page. This is BAD!

Describe the solution you'd like to see

It would be nice to provide an object like { route: 'login' } and this will be resolved to the current locale. Or just use an option flag like i18nRedirects. The result should be that the auth-module uses localePath() helper in the redirects. I can adapt the OAuth2 Schema for the redirectURI and the logoutRedirectURI but I cannot change the redirect('home', true) in my custom Schema, it's just too much of a hassle tbh.

Describe alternatives you've considered

Providing my own custom Schema.

[Tcharlyson]

Hi there, you can use a plugin like that :

import { NuxtApp } from '@nuxt/types/app'
import { Auth } from '@nuxtjs/auth-next'

export default function ({ app, $auth }: { app: NuxtApp; $auth: Auth }) {
  $auth.onRedirect((to) => {
    let redirect = null
    switch (to) {
      case '/login':
        redirect = app.localePath('/')
        break
      case '/logout':
        redirect = app.localePath('/')
        break
      default:
        redirect = to
        break
    }
    return redirect
  })
}

this way you can override the default behavior of redirections. Don't forget to reference your plugin like that :

plugins: ['@/plugins/auth'],

Good luck !

[zangab]

@Tcharlyson
N-O-P-E, it seems you got me wrong here.
I have no index page, that's the problem here. I could quickfix it by pushing a pseudo index.html file in to the dist folder that does nothing and is just there to properly handle the redirect.

if a user gets on your page, the locale is stored in the cookie like /fr/salut -> french
now, if I want to login, I can not use / as a redirect, as I use the prefix strategy, so it's either /en/ or /fr/. I have set it to /en/. back to the example: user is on /fr/salut, wants to login, he now is on /en/profile because the redirect to /en/ resets the language-cookie to english -> that's the issue here.

this plugin does not support a prefix only strategy. the onRedirect hook is useless here.

[jakecausier]

Couldn't you simply do the following?

export default ({ app, $auth }) => {
  $auth.onRedirect((to) => {
    return app.localePath(to)
  })
}

With this, navigating to /fr/profile will redirect to /fr/login, and vice-versa with the /en/ prefix too.

[zangab]

no, as described, i cant.

[mrleblanc101]

This will not work when using OAuth Scheme, how to send the correct redirect_uri to our OAuth provider in a i18n context.

[mrleblanc101]

Instead of using path, nuxt-auth should use route name.
Then when the name need to be resolved, have a fonction that user $router.resolve (if nuxt-i18n is not installer) or this.localePath (if nuxt-i18n is installed) to resolve the path in the app current language.
I ended up creating a new Scheme that overwrite the redirectURI and logoutRedirectURI methods from the OAuth scheme

[zangab]

that's what i'm saying 👍
a flag that indicates if the redirect route should be resolved by name would also be enough

[zangab]

so just that everyone is on the same page.

// nuxt.config.js
export default {
  // ...
    i18n: {
    strategy: 'prefix', // THAT IS IMPORTANT HERE !
    locales: [
      { code: 'en', iso: 'en', file: 'en-US.js', fallbackFile: 'en-US.js', name: 'English', path: '/en' },
      { code: 'fr-fr', iso: 'fr-FR', file: 'fr-FR.js', fallbackFile: 'fr-FR.js', name: 'Francais', path: '/fr-fr' },
      { code: 'de-at', iso: 'de-AT', file: 'de-AT.js', fallbackFile: 'de-AT.js', name: 'Deutsch', path: '/de-at' },
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
  },
  
  auth: {
    strategies: {
      keycloak: {
        scheme: '~/schemes/keycloak.js', // changes logout & fetch-user stuff
        endpoints: {
          // ...
        },
        grantType: 'authorization_code',
        responseType: 'code',
        scope: ['openid', 'profile', 'email'],
        codeChallengeMethod: 'plain',
        audience: '',
        logoutRedirectURI: '/',
      },
    },
    redirect: {
      login: '/login', // issue with i18n-strategy
      logout: '/',
      callback: '/login',
      home: '/profile', // issue with i18n-strategy
    },
    plugins: ['@/plugins/auth.js'], // that's the "redirect" plugin from docs, but it does NOT work, bc NO index page is there.
  },
  // ...
}

[zangab]

so the default page is something like: https://www.my-domain.com/en
the login is something like: https://www.my-domain.com/en/login
BUT the redirect can't handle ANY LOCALE !!!
so if the redirect url to home would just be /profile -> it's a 404 (bc i18n prefix strategy, route does not exist)

if I use /en/profile as a redirect route to the profile although the user tries to login from .../fr/login, he will be redirected to the english version, bc this locale is hardcoded in the route.
the redirect handler via the plugin does not work here, as the route overrides the cookie, therefore this hook here:

$auth.onRedirect((to) => {
  return app.localePath(to)
})

is useless