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)?

Kinnie

Answer 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!

Monochromatic

Answer 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.

Parapsychology

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. – Granduncle

@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? – Kinnie

@Kato: I'm afraid I can't follow you - sorry for that. What do you mean by " create translations in the standard way of localizing string/phrase ids"? Thank you both! – Kinnie

Your answer sounds more complicated then to create a self hosted authentication service which will support i18n. @Granduncle and how you know all the messages you can expect to receive from firebase? and what if one day firebase will change one word/letter in that message? – Eventempered

Do you happen to have a list of codes and reasons available, at least for auth? That way we stand a chance of doing our own localised error lookups. – Ticktack

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

Answer 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,
}

Francescafrancesco

Answer 4

This library does the job

https://github.com/JebBarbas/firebase-error-translator

    import { setLanguage, getTranslation } from 'firebase-error-translator'

    setLanguage('es')
    
    (async ()=>{
        try{
            await firebaseOperation()
        }
        catch(err){
            handleError(getTranslation(err.code))
        }
    })()

Cassella