Translate common errors in Auth0 Custom Login Page

Help
, ,
1

Hello everyone!

I wonder if it’s possible to translate common errors like the one on the screenshot to other language?
How can I approach that?

Common Error
Common Error686×638 14.3 KB

I use Custom Login Page configuration in Auth0. So the function which displays the errors is default and implemented like this:

    function login(e) {
    e.preventDefault();
    var username = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    webAuth.login({
      realm: databaseConnection,
      username: username,
      password: password
    }, function(err) {
      if (err) displayError(err);
    });
  }

  function displayError(err) {
    var errorMessage = document.getElementById('error-message');
    errorMessage.innerHTML = err.description;
    errorMessage.style.display = 'block';
  }

I was thinking of verifying the English message in try-catch block / function(err) and translating it right there but it seems like a lot of work and I might be able to cover all of the cases.

Can I do that with Auth0 configuration?

Fenio

2

I think I found the solution: Universal Login Internationalization

1 Like
3

Perfect! Glad to hear that and thanks for sharing the solution with the rest of community!

4

@konrad.sopala I read that this is only applicable for Lock where I have Custom Login Page.
Is there any other solution to translate errors?

5

So far I’ve done something like this:

function translate(err) {
    if (err.description === null) {
      return 'Aanmelden mislukt';
    }

    switch (err.code) {
      case 'invalid_user_password':
        return 'Gebruiker of wachtwoord is niet correct.';
      case 'password_change_required':
        return 'U moet uw wachtwoord aanpassen omdat dit de eerste keer is dat u inlogt of omdat uw wachtwoord is verlopen.';
      case 'password_leaked':
        return 'Deze login is geblokkeerd omdat uw wachtwoord is gelekt op een andere website. We hebben een e-mail verstuurd met instructies voor het deblokkeren.';
      case 'too_many_attempts':
        return 'Uw account is geblokkeerd als gevolg van herhaalde pogingen om in te loggen.';
      case 'session_missing':
        return 'Kan uw authenticatie verzoek niet voltooien. Probeer opnieuw na het sluiten van alle geopende vensters';
      case 'too_many_requests':
        return 'Het spijt ons. Er zijn op dit moment te veel aanvragen. Laad de pagina opnieuw en probeer het opnieuw. Als dit probleem aanhoudt, probeert u het later opnieuw.';
      case 'invalid_password':
        return 'Wachtwoord is ongeldig.';
      case 'password_dictionary_error':
        return 'Wachtwoord is een te bekend woord.';
      case 'password_no_user_info_error':
        return 'Wachtwoord is gebaseerd op gebruikers informatie.';
      case 'password_strength_error':
        return 'Wachtwoord is niet sterk genoeg.';
      case 'user_exists':
        return 'Gebruiker bestaat al.';
      case 'username_exists':
        return 'Gebruikersnaam bestaat al.';
      case 'social_signup_needs_terms_acception':
        return 'Ga akkoord met de onderstaande Servicevoorwaarden om door te gaan.';
      case 'String (password) is too short (0 chars), minimum 1':
        return 'Het wachtwoord voldoet niet aan het wachtwoordbeleid';
      default:
        return err.description;
    }
  }

The code I use in switch statements are already part of Auth0. So are the translations (I just copied them from nl.js file). Is there anyway I can include them without switch statement?

7

Let me research that a bit and get back to you shortly!

1 Like
8

@konrad.sopala Any luck? :slight_smile:

9

Hey there!

Terribly sorry for the delay! We’re doing our best in providing you with the best developer support experience out there but sometimes the number of incoming questions is just too big and we have temporary hiccups with bandwidth. Once more sorry for the inconvenience!

I managed to discuss it with the team and unfortunately as of now there is no way to translate those errors. I would encourage you to place product feedback regarding that so we can have such option in the future. Here is the link to our product feedback form: