Auth0 Home Blog Docs

Internationalization in Auth0 rules

lock
auth0
rules

#1

I have multiple rules in Auth0 dashboard and I am returning errors in English. But the users on my app are from different countries e,g England, Denmark, Sweden etc. So I want to translate the errors in user regional language.

According to my research, it’s impossible to get user locale in rules. So is there any way to achieve this in Auth0 lock (login page)


How to handle custom errors returned from rules in lock?
How to get user's browser language in rules?
#2

Have you checked into Lock Internationalization mentioned in Docs?


#3

Thanks for the reply, but I am returning custom errors (my own written). So how can I translate them?


#4

So there is one way you could do this, and that’s via the following at the bottom of the Doc I shared above:

Furthermore, the languageBaseUrl option, which takes a string value (a URL), overrides the language source url for Auth0’s provided translations. By default it uses to Auth0’s CDN URL https://cdn.auth0.com because that is where the provided language translations are stored. By providing another value, you can use your own source for the language translations as needed for your applications.

For an example of available languageDictionary property names, and of how to structure a language file, see the English dictionary file for Lock. And for more information on how to configure Lock, check out the api reference or the full reference of configuration options that are available.


#5

I think, my explanation was not good enough on this question so I have created another topic How to handle custom errors returned from rules in lock? that best describes my problem. I have also add code snippet in that question. Can you look in that?


#6

I am following this link (https://auth0.com/docs/libraries/lock/v11/customizing-error-messages) to handle custom errors returned from rules in lock. But every time my rule throw any error instead of getting dictionary error defined in lock it will throw error to my app.
Here is the code:

function (user, context, callback) {
  if (user.email === "some@email.com") {
   return callback(new ValidationError('custom_error','Access to this application has been temporarily revoked'));
  }
  callback(null, user, context);
}

And here is the dictionary code in lock (hosted page)
   var  languageDictionary = { 
        title: config.dict.signin.title,
        error: {
          login: {
            "lock.unauthorized": "Custom message about a failure of permissions",
            "custom_error": "Custom error message"
          }
        }  
      };

Now I am expecting to get the error “Custom error message” but I am getting this “'Access to this application has been temporarily revoked”. What am i doing wrong?
PS: It’s working fine for custom errors in custom database script


#7

No need to create another topic - instead I merged these and will see what we can do to assist.


#10

:wave: @jah Rules are executed during the redirect I believe so any errors thrown there are unable to be passed back to Lock - so this is where you see the error message from your Rule. If I understand correctly what you are trying to achieve then the best way for us to show your custom error messages in Lock would be available through the flashMessage object. In our application callback we can handle the error query string parameter - so if error, redirect back to the login page with the error in query string param, and display Lock with the error using flashMessage .

A rough example might look something like :

var params = (new URL(location)).searchParams;
var error = params.get('error');  // Get value of 'error' query string param. 

if(error !== null){
  //Show Lock with error flashMessage
  lock.show({
    flashMessage:{
      type: error, // error or success 
      text: 'custom message here' // this is the actual error message 
    }
  });
} else {
  //Show default Lock
  lock.show();
}

Would this be what you are looking to do?


#11

Sure, thanks. I hope now you can understand my problem better

Is there any way to get user browser language in rules? I know we can get it on login page (lock) using navigator.language but I want to use it in rules. So is there way to directly get user’s language in rules or somehow pass navigator.language to rules from lock?
PS: context param of rules contains geoip object but that doesn’t include language


#13

Thanks for the explanation but my problem is that I don’t have the access to application callback. I am just providing support to some apps and I only have access to the dashboard. That’s why I want to handle the custom messages in dashboard (hosted page)


#14

we may be able to store the users language in the user_metadata and based on that information set the language to be used. I will double check, but would this help solve what you want to do?


#15

@jah with the help of my team I have a solution for you to accomplish what you need! the application that initiates the authorization request can pass the ui_locales (https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest) as a query string param to the /authorize request and then in a Rule we can get that value via context.request.query.ui_locales.


#16

Thanks for your answer but I am facing one issue in passing ui_locales as a query string param. I am trying to pass ui_locales as the following:

 params: Object.assign(config.internalOptions, {
           ui_locales: navigator.language 
        })

Now I have put console.log after lock.show() and it’s showing me ui_locales inside params object but I can’t find it in the query string of the login screen, Also I can’t find it in context argument in rules and context.request.query.ui_locales is returning “undefined”


#17

how is your Rule setup? and are you trying to set the language for the application or for the Lock widget ? how are you using the ui_locales parameter?


#18

@jah were you able to solve your issue?