Nextjs-auth0: Locale not included in `withPageAuthRequired` redirect

Created on 29 Mar 2021  路  4Comments  路  Source: auth0/nextjs-auth0

Describe the problem

I'm using internationalized routing and if I wrap a page in the withPageAuthRequired HOC, the locale isn't included in the redirect. This leads to the problem that if a user enters the page, selects a language (or a language is determined based on the browser locale), visits a protected page and fills the login form, she gets redirected to the correct page, but with the default locale.
For example /de/events/ becomes /events after redirect.

What was the expected behavior?

I expect that after login, the user gets redirected to the page with the locale she was using the website before.

Reproduction

Setup a website that uses internationalized routing and wrap some page in withPageAuthRequired HOC. Then visit the page with some locale that isn't the default locale. After login, you will be directed to the page with the default locale.

Environment

  • Version of this library used: "@auth0/nextjs-auth0": "^1.2.0"
  • Which framework are you using, if applicable: "next": "10.0.9"
  • Other modules/plugins/libraries that might be involved: "i18next": "^20.1.0"
  • Any other relevant information you think would be useful:

The problem seems to be in with-page-auth-required.tsx where the redirect url is built as follows:
returnTo = `${router.basePath ?? ''}${router.asPath}`.

I think this should be changed to something like this:
returnTo = `${router.basePath ? `${router.basePath}/` : ''}${router.locale}${router.asPath}`

This issue is closely related to #351

bug

Most helpful comment

looks like we need to add locale to the CSR side withPageAuthRequired and basePath and locale to the SSR withPageAuthRequired

Since i18n routing can be Domain Routing as well as sub path, prefixing the locale to the path wont work for all cases.

We may have to use window.location.pathname in the CSR one here https://github.com/auth0/nextjs-auth0/blob/main/src/frontend/with-page-auth-required.tsx#L87

I'm not sure what the equivalent is going to be for the SSR one, will raise some work internally to investigate

All 4 comments

Thanks for reporting @davemaier - will investigate

looks like we need to add locale to the CSR side withPageAuthRequired and basePath and locale to the SSR withPageAuthRequired

Since i18n routing can be Domain Routing as well as sub path, prefixing the locale to the path wont work for all cases.

We may have to use window.location.pathname in the CSR one here https://github.com/auth0/nextjs-auth0/blob/main/src/frontend/with-page-auth-required.tsx#L87

I'm not sure what the equivalent is going to be for the SSR one, will raise some work internally to investigate

This has been fixed for CSR withPageAuthRequired in v1.3.1

For SSR withPageAuthRequired, this is non trivial - for now the recommended work around would be to derive the correct return to URL in your application and pass it to withPageAuthRequired at request time, eg something like

export const getServerSideProps = (ctx) => {
  return withPageAuthRequired({ returnTo: `${baseUrl}/${locale}${ctx.req.url}` })(ctx);
};

Closing this, feel free to ping me if you'd like me to reopen

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shansmith01 picture shansmith01  路  4Comments

lkbr picture lkbr  路  4Comments

RyGuyM picture RyGuyM  路  5Comments

shicholas picture shicholas  路  5Comments

pasenidis picture pasenidis  路  4Comments