Multi language support for login page

[RJJ]

Hi dear community,

I am using @auth0/auth0-spa-js library for Single Page Web application.

However, after reading community posts and guides, I am still unable to add additional login language support other than English. Hope the dear communicty can point some direction to me.

Here are what I have done:

1. update the tennant settings with additional language I want to use, for example zh-CN
2. tried both classic login and new login, and added the following line in customized login script

line 37: language = config.extraParams.ui_locales;
line 55: language: language,
3. in my code:
client.loginWithRedirect({
ui_locales: ‘zh-CN’
})

However the above doesnt work. And which puzzles me is that, even if I force the default the lanaguage setting to be “zh-CN” in tennant setting, the login pop up screen is still English.

Here are some additional logging I found in developer’s console (launch log in screen in chrome):
cdn_utils.js:34 GET https://cdn.auth0.com/js/lock/11.27.2/zh-cn.js net::ERR_ABORTED 403
r @ cdn_utils.js:34
u @ i18n.js:74
syncFn @ i18n.js:35
(anonymous) @ sync.js:56
m @ sync.js:51
(anonymous) @ index.js:29
St @ immutable.js:1971
St @ immutable.js:1980
St @ immutable.js:1980
pt.updateIn @ immutable.js:1278
a @ index.js:29
t.swap @ atom.js:12
i @ index.js:25
(anonymous) @ sync.js:91
setTimeout (async)
(anonymous) @ sync.js:91
(anonymous) @ index.js:11
(anonymous) @ atom.js:38
t._change @ atom.js:38
t.swap @ atom.js:12
i @ index.js:25
r @ actions.js:37
e @ core.js:68
e @ lock.js:6
index.js:435 language does not have property error

Appreciate if someone can share some experience in this particular area.

Thank you!

[stephanie.chamblee]

Hi RJJ!

In the Universal Login > Login HTML editor, I tried hard-coding the language as zh based on the list of supported language codes, and it looks like it renders the login page in the correct language:

If this looks correct for you, I believe changing your code to the following should work:

client.loginWithRedirect({
  ui_locales: ‘zh’
})

Please let me know if that adjustment fixes this for you!

Thanks,

Stephanie

[RJJ]

Hi Stephanie,

Thank you a lot for your response. It worked indeed.

Yes, the ‘zh’ code works for simplified Chinese. However, it was confusing to me why the code ‘zh’ is different from what is in the list here ‘zh-CN’:

Universal Login Internationalization

And is it possible to explain a little bit more the difference between lock internationalisation vs universal login internalisation, and where is it configured?

Hope other people face the same issue as me will also benefit from the explanation.

Many thanks again.

Xiaojia

[stephanie.chamblee]

Glad to hear it is working for you now!

With the New Login Experience, you can toggle off “Customize Login Page” and use the language listed in your tenant settings without changing any Lock configurations. In this case, you would go to your tenant configurations and check Chinese - Simplified (zh-CN) from the language options.

However, if you are customizing the login page (or using the Classic Login Experience), then you will need to use a language code from Lock’s list of supported language codes. In this case, it would be 'zh'.

Hope that helps!