How to change language in login for a React SPA?

[AntonioM]

Hello,
following the Auth0 quickstart I created a react spa that uses Auth0, everything work fine, but I did not find any doc explaining how to change language in the login popup, at least not for the React SPA component I am using (Auth0Provider).
Any hint on how to achieve that?
To provide more detail below is the link to an issue I created on the quickstart sample I used as template, there you can find more details and screen captures
Thanks

https://github.com/auth0-samples/auth0-react-samples/issues/183#issuecomment-595362727

[mathiasconradt]

Do you want to set the language to a fixed language (for all users), or shall it depends on something from the user’s context, such as browser/user agent language?

Also, are you using the New ULP or the Classic ULP (ULP = Universal Login Page)?

Because if you’re using the New ULP, then see

Universal Login Internationalization

Note that the Accept-Language header sent by the user’s browser takes a higher priority than the default language you set in the tenant settings globally.
Therefore, in order to enforce a specific language in the New ULP, you should add the ui_locales parameter to the authorize request, like:

Even if you set a default language in the tenant settings, the request header Accept-Language of the user’s browser takes a higher priority, which in my case is en.

So, the way to enforce it is to add this to the authorize request when making the authorization request:

webAuth.authorize({
  ui_locales: 'de'
});

In case you’re using the Classic ULP, I recommend to also use the ui_locales parameter as mentioned above, then customize the login page and add this in the code:

language = config.extraParams.ui_locales;

In the default Lock template, that would be around line 36. Without it, the Accept-Language header will otherwise take precedence.

[AntonioM]

Hi Mathias,

Thanks for your help message.

Please note my question is specific to React development .

I should add that I have included the additional languages I’d like to use in my tenant settings in the dashboard.

I already saw the articles you linked but the problem is they refer to JavaScript libraries and SDKs, I am using a React SPA following the article in your docs at:

Auth0 React SDK Quickstarts: Login

I am using this React component with these parameters:

 <Auth0Provider

domain={config.domain}

client_id={config.clientId}

redirect_uri={window.location.origin}

audience={config.audience}

onRedirectCallback={onRedirectCallback}

>

And then in another part of the App I have this login button:

<button onClick={() => loginWithRedirect({})}>Log in</button>

I don’t have access to the underlying JavaScript functions. I guess the React components I am using choose the classic login by default, but that’s fine for now, I just want to be in control of the language Auth0 uses for the popups.

Should I add the language to loginWithRedirect({}) which is currently with empty parameters? What is the syntax? I couldn’t find doc reference not source on github for this function.

Or is there any way to set the language in the Auth0Provider props?

The language must be used only for the current user and must override any other setting in the browser or anything else. For example, if a German user want to use the app in French or Spanish for whatever reason, he must be able to do so by choosing “FR” or “ES” in the app top navbar.

Thanks again for any further help.

[AntonioM]

UPDATE:
I tried this line of code
<button onClick={() => loginWithRedirect({language: ‘it’})}>Log in

but the login popup remain in English

[mathiasconradt]

The loginWithRedirect() method takes parameters, incl. ui_locales, see https://auth0.github.io/auth0-spa-js/interfaces/redirectloginoptions.html#ui_locales

Try

loginWithRedirect({ui_locales: ‘it’})}

[AntonioM]

Unfortunately it doenst work
The login popup is always in English
I have tried the syntax you suggested
and also this one:

<button onClick={() => loginWithRedirect( 
              {
                options: {
                  ui_locales: 'it-IT'
                }
              }
)}>Log in</button>

I’m sure there is a simple solution, it’s just a matter to guess the right syntax…

[mathiasconradt]

I will test it myself, but can you confirm that if you use the Classic ULP and not New ULP, you also did the change in the Auth0 login page itself via customization, as mentioned above?

In case you’re using the Classic ULP , I recommend to also use the ui_locales parameter as mentioned above, then customize the login page and add this in the code:

language = config.extraParams.ui_locales;

In the default Lock template, that would be around line 36. Without it, the Accept-Language header will otherwise take precedence.

And to confirm, in your React app you tried both:

loginWithRedirect({ui_locales: ‘it’})}

loginWithRedirect({ui_locales: ‘it-IT’})}

[mathiasconradt]

I just tested it myself with our React Quickstarts and it works fine, using:

onClick={() => loginWithRedirect({ui_locales: 'it'})}

Please confirm which ULP you’re using (New or Classic, and that you’ve adjusted the login page in case you’re using Classic).

[AntonioM]

IT WORKS!!!
You are the man!
Thank you
I guess the additional line of code in the custom login was not saved.
The first time worked only in Spanish, Italian caused internal error, after refreshing worked fine also in Italian.

[mathiasconradt]

Great to hear! Have a good weekend!