How to set the language in Lock using universal Login

[david.casillas]

I’m using universal login with Lock in a React application. I’m following help pages on internacionalization but don’t see how I can send the language option to the Lock widget.

Here https://auth0.com/docs/libraries/lock/v11/i18n it says you can pass an options object to the Lock constructor, but I’m not calling the constructor by myself. In universal login you just call auth0.authorize() method.

How do you pass this option so the Lock widget is displayed in the user language?

Lock widget does not pick the browser language either which will serve my needs.

[konrad.sopala]

Hey @david.casillas!

That is correct. Lock doesn’t pick the browser language itself. Universal Login itself uses Lock and by customizing it, you can use language-parameter to a certain extend.

You need to do it by initializing options variable where you’ll specify the language and then once instantiating Lock, you’ll pass it as a parameter.

[david.casillas]

Hi thanks, but can you be more clear on where and how to?

You need to do it by initializing options variable where you’ll specify the language and then once instantiating Lock, you’ll pass it as a parameter

Right now I’m just invoking the login widget with:

auth0.authorize();

With auth0 being an auth0.WebAuth instance with this params:

  auth0 = new auth0.WebAuth({
    domain: 'xxxxxx',
    audience: 'xxxxxx',
    clientID: 'xxxxxx',
    redirectUri: 'xxxxxx',
    responseType: 'token id_token',
    scope: 'openid profile email'
  });

Can I pass some options to the authorize() call or to the WebAuth constructor with the language? I have tried but didn’t work.

[konrad.sopala]

Hey @david.casillas

Yes you can pass some options to authorize() method invoked on your auth0 object but unfortunately not the language params. Here’s the list of parameters you can use with ```authorize()``:

https://auth0.com/docs/libraries/auth0js/v9#webauth-authorize-

Here you’ve got parameters that can be used fo WebAuth:

https://auth0.com/docs/libraries/auth0js/v9#available-parameters

Here’s how to add the language support:

// Select a supported language you're interested in
var options = {
  language: 'es'
};

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  options
);

Let me know if that helps!

[david.casillas]

Just to clarify,

• if I use Universal Login I can not set the language of the login form dynamically, since the method of calling the form does not support the language param. This method uses autorize() method of WebAuth class.
• if I use the Lock embedded login form then I can change the language, but then I have to manage the login form myself using the Lock widget for Web

This is an incovenience, the docs recomend using Universal Login as its the easiest and most powerful method available of authentication:

Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features. This guide will use it to provide a way for your users to log in to your React application.

You can also embed the login dialog directly in your application using the Lock widget. If you use this method, some features, such as single sign-on, will not be accessible. To learn how to embed the Lock widget in your application, follow the Embedded Login sample.

Not being able to change the language makes Universal Login useless for people out of english language countries (a big part of the world for sure).

Did I really understand my options?

[david.casillas]

I get a working response from a support ticket, so I copy it here to be available to everybody:

Detect the user language in your app. When you are calling the webauth.authorize(), pass the language to the hosted login page as an extra parameter.

const params = {
    language: "mylanguage"
};
this.auth0.authorize(params);

And here is the key point, in the hosted login page, you can get the access to the language parameter like following.

config.extraParams.language

After that, you should be able to choose the appropriate language for lock based on the configuration pass from your application.

I hope this solution was documented in the docs, but couldn’t find it.