Firebaseui-web: Label customization and i18n

[modesty]

any support for customizing UI text? for example, when login with email, the title reads "SIGNIN WITH EMAIL" in capital letters, how to customize it to something like "Please login first".

Besides, any configuration for i18n?

[bojeil-google]

Hey modesty, there is no way to customize the UI text without editing the scripts. All the labels and texts are located in the .soy files in https://github.com/firebase/firebaseui-web/tree/master/soy
Currently we don't provide i18n but we are looking into that.

[gustavopch]

Any news about this issue?

[bojeil-google]

Hey @gustavopch, a solution that will scale will take some time to put together. We are still looking into that. For now, you will have to modify the Soy templates to customize labels and internationalize strings.

[guidobouman]

@bojeil-google Pinging about this, we really need this for a Dutch project.

[bojeil-google]

Hey @guidobouman, we are looking into it. Will update the thread as soon as I have anything tangible.

[channing-google]

I18n was added in FirebaseUI 2.2.1.

See https://github.com/firebase/firebaseui-web#localized-widget for instructions.

[dprentis]

btw, you can do this after calling start, but it's a total hack, of course (eg. for google):

setTimeout(function() {
        var button = document.querySelector('[data-provider-id="google.com"]');
        if (button) {
          button.innerHTML = `Sign up with Google`;
        }
      });
    });

[mkhennoussi]

Thanks for your work ! Unfortunately, the process to add the localized widget is quite confusing for a "real" app, not just a simple html page. Does anyone know how to deal with the CDN localized file and webpack and vuejs for instance ? I tried to load the CDN file, then add the firebaseui as an "externals" in webpack (to use it in a component), but still have some issues when importing firebaseui like for instance : ReferenceError: firebase is not defined

Thanks for your help

[jvmonjo]

I have the same doubts that @mkhennoussi in implementing firebaseui in a vuejs component. I really don't know how to use the localized version of the firebaseui npm module.

[bojeil-google]

We already support localization and we have updated the instructions on how to build the localized modules with npm:
https://github.com/firebase/firebaseui-web#building-firebaseui

For label customization, currently, forking is the only option.

[cpmech]

Thanks for the localized modules.

Since I like to change the language dynamically, I'm using the following code (based on dprentis' comment). I hope it helps someone.

const fireUIsetLang = (lang: string) => {
  let txt1 = `Sign in with Google`;
  let txt2 = `Sign in with Facebook`;
  let txt3 = `Sign in with email`;
  if (lang === 'pt') {
    txt1 = `Entrar via Google`;
    txt2 = `Entrar via Facebook`;
    txt3 = `Entrar com email`;
  }
  const b1 = document.querySelector('[data-provider-id="google.com"]');
  if (b1) {
    b1.innerHTML = `
      <span class="firebaseui-idp-icon-wrapper"><img class="firebaseui-idp-icon" alt="" src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"></span>
      <span class="firebaseui-idp-text firebaseui-idp-text-long"> ${txt1} </span>
    `;
  }
  const b2 = document.querySelector('[data-provider-id="facebook.com"]');
  if (b2) {
    b2.innerHTML = `
      <span class="firebaseui-idp-icon-wrapper"><img class="firebaseui-idp-icon" alt = "" src = "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/facebook.svg"></span>
      <span class="firebaseui-idp-text firebaseui-idp-text-long"> ${txt2} </span>
    `;
  }
  const b3 = document.querySelector('[data-provider-id="password"]');
  if (b3) {
    b3.innerHTML = `
      <span class="firebaseui-idp-icon-wrapper" > <img class="firebaseui-idp-icon" alt = "" src = "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/mail.svg" > </span>
      <span class="firebaseui-idp-text firebaseui-idp-text-long"> ${txt3} </span>
    `;
  }
};

const fireUIstart = (divID: string, showYOLO: boolean, success: IFunction) => {
  setTimeout(() => {
    fireUIsetLang(navigator.language.slice(0, 2));
  }, 100);
  firebaseUI.start('#' + divID, getUIconfig(showYOLO, success));
};

[gustavopch]

I'm using patch-package (https://www.npmjs.com/package/patch-package) to create a local patch of the firebaseui lib with the translated strings in my project. Works great if you don't need dynamic localization.