Changing language in login for Next.js app is not work (nextjs-auth0/New Experience)

Help
, , ,
1
  • Which SDK this is regarding:@auth0/nextjs-auth0
  • SDK Version: 1.9.1

Hello
I’m trying to change language in Universal Login page(New Experience).
According to document, It need to do below

  • select the language(in my case ‘ja’) as default in Tenant Setting.
  • send ui_locales parameter to the Authorization Request endpoint

I set the language, and built sample application according to docs.
And to pass ui_locales parameter, create below api route(/api/auth/login.ts)

import type { NextApiRequest, NextApiResponse } from 'next';
import { handleLogin } from '@auth0/nextjs-auth0';

export default async function login(req: NextApiRequest, res: NextApiResponse) {

  await handleLogin(req, res, {
    authorizationParams: {
      ui_locales: 'ja',
    },
  });
}

I thought it would work,however english(not default lang) login page was displayed.
Is additional setting needed ,or are there any mistakes?

1 Like
3

Hi @yskstdev,

Welcome to the Auth0 Community!

I understand you are looking to change the language on your login page.

As you have found, you will need to select your preferred language in your Tenant Settings and pass the ui_locales query parameter in your Authorize Request.

It should look something like the following:

https://YOUR_DOMAIN/authorize?
    response_type=code&
    client_id=YOUR_CLIENT_ID&
    redirect_uri=https://YOUR_APP/callback&
    scope=SCOPE&
    audience=API_AUDIENCE&
    state=STATE&
    ui_locales=ja

Alternatively, if you know you will use only one language, you could deselect all languages in your Tenant Settings except for your preferred language. This way, it defaults to that language, and you will not need to pass the ui_locales query parameter.

Please let me know how this works for you or if you have any questions.

Thank you.

4

@rueben.tiow
thank you for answer!

I tried to deselect all languages in my Tenant Settings except for my preferred language as you told,
but It did not work…(English page was displayed).

Paste the image below.

Do you have any idea what the cause of the problem is?

1 Like
5

Hi @yskstdev,

Thank you for your response and update.

After inspecting your screenshot, it appears that you are currently using the Classic Universal Login experience.

Because of that, could you please check that you have selected the New Universal Login experience in your Auth0 Dashboard?

Screen Shot 2022-07-19 at 11.01.44 AM
Screen Shot 2022-07-19 at 11.01.44 AM2078×878 118 KB

And, could you please check that you have disabled the Customize Login Page toggle?

image
image2158×758 75 KB

After doing so, you will be using the New Universal Login Experience, and you will be able to see the correct language settings displayed.

Please let me know how it goes.

Thank you.

1 Like
6

@rueben.tiow

Thank you! it works!

In my settings,
I have already selected the New Universal Login experience,
but the Customize Login Page toggle have been enabled.
I toggled it disable, so everything went well!
Thank you very much!!

2 Likes