Firebase error messages in different languages?

Question

Showing the Firebase error messages (error.message) in the view results in english error descriptions (e.g. for Authentication errors, if user credetials contain errors).

How would you display the messages in different languages (best case: in the phone's language)?

Solution 1

This is impossible right now. What I recommend is to use the erros code (error.code) that is a unique error code and with that you can create something to bind this errors code to your own text/language. There is an available page at Firebase documentation that have a list of those errors code that might help you with that. Check out these links: https://firebase.google.com/docs/reference/js/firebase.auth.Auth https://firebase.google.com/docs/reference/js/firebase.auth.Error https://firebase.google.com/docs/auth/admin/errors?hl=en

Edit: To solve this, I have translated it by myself (to PT-BR, my language) and implemented (in TypeScript) with these steps:

I have created an interface to hold the indexed array of string:

    export interface MessagesIndex {
        [index: string]: string;
    }

Then in some UI or Error Service, I've declared this variable as the Interface above:

    params = {
            'invalid-argument': 'Erro: Um argumento inválido foi fornecido.',
            'invalid-disabled-field': 'Erro: O valor fornecido para a 
              propriedade de usuário é inválido.',

             /* ADD HERE THE OTHERs IDs AND THE CORRESPONDING MESSAGEs */

        } as MessagesIndex;

After that, I've created a function to print it by the given code (from Firebase), remember to split because the error.code atribute comes like "auth/error-id" and what we only need here is the "error-id", and if the error code is not found, then you can return some "Unknown error" and print the error.code, if you want:

    public printErrorByCode(code: string): string {
         code = code.split('/')[1];
         if (this.params[code]) {
             return (this.params[code]);
         } else {
             return ('Ocorreu algum erro desconhecido! \n Codigo erro: ' + code);
         }
     }

It's not the best code but I hope it helps!

Solution 2

Firebase's error message are targeted at application developers, so are in English only. While we'd love to provide them in the same languages as we provide our documentation in, that will never cover all the languages of your users.

So you will have to detect the error in your code, log the error to a central system where you can inspect the problem and then show a localized error message to your user.

As far as I know there is no standardized way of doing that in Angular. But if there is, it'll be unrelated to Firebase.

Solution 3

Here's what I did when I had to make the errors shorter:

const firebaseErrors = {
  'auth/user-not-found': 'No user corresponding to this email',
  'auth/email-already-in-use': 'The email address is already in use',
}; // list of firebase error codes to alternate error messages

Then somewhere where you need 'em

catch (error) {
      throw firebaseErrors[error.code] || error.message,
}

Comments

[Kato]

The best answer might be to use the error code as a message id and create translations in the standard way of localizing string/phrase ids.

[Jane Dawson]

@Frank: That means every developer does his/her own "error message translation"? Most errors should be pretty common (e.g. in authentication: "emailaddress doesn't exist", "wrong password", and so on). Wouldn't it make sense to have the translation done once and just be able to use this in several projects?

[Frederiko Cesar]

@theLastNightTrain you can see the list in the Firebase's documentation, like: firebase.google.com/docs/reference/js/firebase.auth.Error