Localization

[Cooke]

Nice lib. Any way to localize the components? I'm using this library as an npm module.

[nicolasgarnier]

I think the underlying issue is that the localized versions of firebaseui-web are not distributed via NPM (which is how we import and depend on the library here...).

@bojeil-google any chance the localized versions of firebaseui-web will be distributed in the NPM build/release at some point?

e.g. we'd do something like const firebaseui = require('firebaseui/FR_fr');

[bojeil-google]

Hmm, we don't have any tangible plans at the moment. May come later down the road.

[bodrin]

https://github.com/firebase/firebaseui-web#building-firebaseui does not help? (firebase/firebaseui-web#84)

[garyforsterio]

@nicolasgarnier as there aren't any plans for the files to be distributed via NPM would this be the only alternative currently?

1. Build the firebaseui module in required languages (as @bodrin mentioned)
2. Fork this repository
3. Add the localized files from 1
4. Change this require() statement to import the localized variation.

I think I might just end up integrating the component into my own source code then dynamically loading the localized firebaseui using Webpack's Dynamic Imports. Any thoughts on this? I'll try to see if I can contribute anything back to this repo.

[typeofweb]

How about we delete those 2 lines:

firebaseui-web-react/src/FirebaseAuth.jsx

Line 50 in 814ad75

require('firebaseui/dist/firebaseui.css');

firebaseui-web-react/src/FirebaseAuth.jsx

Line 54 in 814ad75

const firebaseui = require('firebaseui');

And ask users to load firebase-ui from CDN?

[nicolasgarnier]

I think you can clone the https://github.com/firebase/firebaseui-web repo and build it locally in the localised version that you want.
Then use npm link in your project to link your locally-built firebaseui-web package. I haven't tried though and I'm not sure this will work without also cloning firebaseui-web-react, I havenlt tried npm link in that exact scenario yet. Let us know if this works of fail if any of you try this. (If this works I'll add this to the README)

[davemecha]

I don't know how to import the localized firebaseui builds in my webapp. The documentation at https://github.com/firebase/firebaseui-web#localized-widget does not help.

I tried to include a German locale in my app and downloaded it from the CDN to my lib folder. If I now try to import the sideloaded localized version like this:

import * as fbui from 'firebaseui';
import * as fbuide from '../lib/firebase-ui-auth__de';

console.log(fbui, fbuide);

My output is

So firebaseui.auth is undefined and I don't know how to use it properly. If someone can help me out here, It might help others as well. (firebase/firebaseui-web#84 (comment))

---

I would really appreciate firebaseui to be served with different locals in their npm distribution. There are wrappers for angular or React, that don't easy work with sideloaded packages as well.

[gustavopch]

I have a workaround.

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.

[natarajanrodrigues]

I have a workaround.

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.

Can you explain better how did you get this?

[gustavopch]

I have a workaround.
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.

Can you explain better how did you get this?

I don't have the exact steps here because I stopped using this lib, but it goes somewhat along this:
1 - Setup patch-package: https://www.npmjs.com/package/patch-package#set-up
2 - Change the strings you want inside the firebaseui package installed in node_modules and save the changed files.
3 - Follow the instructions to make a patch: https://www.npmjs.com/package/patch-package#making-patches.
4 - It'll create a folder patches in the root of you project. Now, every time you reinstall your packages, it will apply the same changes you have performed in the step 2.

[ScreamZ]

@nicolasgarnier Maybe it would've been easier if we just could pass the translation file as an option on startup… ? Is it hard to do that way ?

[barbalex]

@jhuleatt concerning your proposal to open a new issue in firebaseui-web-react (firebase/firebaseui-web#662 (comment)): It seems to me that this issue is to the point.

Unfortunately there has been no great solution how to achieve localization yet. I tried:

• Using patch-package. Did not work for me (the translated text still appeared in English)
• Downloading https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth__de.js, installing it as local file in package.json and declaring it a (yarn) resolution. Only got errors when building the dev package in GatsbyJS

[barbalex]

I just realized that I can easily build my own ui and use firebase.auth() functions for the good stuff. So that is my solution.

[dszymczuk]

Hi @barbalex
I found another solution. It's not ideal, but better than build my own ui.
I need to translate to polish so I pasted polish texts.
I'm using (S)CSS modules in my project (but it doesn't matter).

I pass className to

<StyledFirebaseAuth className={styles.loginExternalWrapper} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>

And apply these styles:

$hideTextSize: 0;
$showTextSize: 14px;

.loginExternalWrapper {
  :global(.firebaseui-idp-facebook){
    :global(.firebaseui-idp-text-long) {
      font-size: $hideTextSize;
      &:after {
        font-size: $showTextSize;
        content: "Zaloguj się z Facebook";
      }
    }

    :global(.firebaseui-idp-text-short) {
      font-size: $hideTextSize;
      &:after {
        font-size: $showTextSize;
        content: "Facebook";
      }
    }
  }

  :global(.firebaseui-idp-google){
    :global(.firebaseui-idp-text-long) {
      font-size: $hideTextSize;
      &:after {
        font-size: $showTextSize;
        content: "Zaloguj się z Google";
      }
    }

    :global(.firebaseui-idp-text-short) {
      font-size: $hideTextSize;
      &:after {
        font-size: $showTextSize;
        content: "Google";
      }
    }
  }
}

Result

Support other languages

You have to pass different styles to className of StyledFirebaseAuth.

Risks

Firebase UI will change class names.

[RckMrkr]

Just chiming in with another solution as I stumbled upon this issue when searching for the same thing.

What I did was:

• Forked firebaseui
• Built the library in the language I needed.
• Changed the package.json to point to the new built files that have slightly different names.
• Changed gitignore to allow commit of the files in the dist folder.
• Pushed to the forked repository
• Changed package.json in the original project to point directly to my github repository.

Be aware of your node version when npm install-ing in firebaseui as it will not work with a node version >7 due to node-sass.

Here's the commit of the actual file changes:
RckMrkr/firebaseui-web@025169f

Your entry in package.json will need to look something like

"firebaseui": "RckMrkr/firebaseui-web",

Hope this is useful for someone.

[netzwerg]

For anyone else who is struggling with building firebaseui-web (e.g. because the build is broken on Mac/OSX): I created a minimal fork which skips all CSS, SASS, tests etc.

https://github.com/netzwerg/firebaseui-web

The README explains all required steps – hope it helps!

[kaorun343]

I solved this issue by using resolve.alias.
For instance, I'm now using Next.js, so here's my next.config.js.

const merge = require('webpack-merge')

module.exports = {
  webpack(config) {
    return merge(config, {
      resolve: {
        alias: {
          firebaseui: 'firebaseui-ja',
        },
      },
    })
  },
}

https://webpack.js.org/configuration/resolve/#resolvealias

[mikaelgramont]

Hi there, would it be possible to prioritize a way to use this package in apps with dynamic languages?
My app is localized to 7 locales, and I currently don't see any way to use this without resorting to crazy tricks.

Given that this thread here is 2 years old and that its sister thread here is going nowhere, I'm a little worried to use this as well.

[dszymczuk]

@mikaelgramont you can use my trick. Create css class for each language and use it depends on language.

[mikaelgramont]

@mikaelgramont you can use my trick. Create css class for each language and use it depends on language.

@dszymczuk yes I think I'll go with a variation on what you posted before, thanks. That's what I meant by "crazy tricks" :)

[selbekk]

How about exposing a localization object where we can pass in all texts?

[AggelosM]

Just chiming in with another solution as I stumbled upon this issue when searching for the same thing.

What I did was:

* Forked [firebaseui](https://github.com/firebase/firebaseui-web)

* Built the library in the language I needed.

* Changed the package.json to point to the new built files that have slightly different names.

* Changed gitignore to allow commit of the files in the dist folder.

* Pushed to the forked repository

* Changed `package.json` in the original project to point directly to my github repository.

Hey @RckMrkr , after these steps do I just run npm install and npm run build? Because that's what I did and after replacing StyledFirebaseAuth.js from /dist/ to my project it stills shows up in English. Did I miss any step?

EDIT: Nevermind I figured it out, see below.

[barbalex]

I love the usefulness of firebase auth. It is unfortunate that this google team however does not seem to care much about that part of the world that does not speak English natively.

[selbekk]

Being abusive in the comments won't help push this feature along.

[AggelosM]

Ok here's how I did it (I use el for Greek in this case).

1. Forked firebaseui-web and built for the Greek language with npm run build build-js-el && npm run build build-npm-el && npm run build build-esm-el

2. Updated package.json with the newly-built files and pushed the repo (edit .gitignore so you can also push /dist)

3. Forked firebaseui-web-react@update-deps and changed the files below:

• package.json (replace AggelosM with your repository)
• webpack.config.js line#32
• example/package.json

4. run the commands

cd firebaseui-web-react
npm install
npm run build
cd example
npm install
firebase use --add
npm run build
npm run serve

[AggelosM]

I also found https://github.com/greg-schrammel/react-firebaseui-localized but that was after I figure it out by myself so didn't bother looking at it.

[hellocaio]

@selbekk, you might be right but I hardly believe this feature will ever be pushed.

It's way easier to homebrew your own firebase ui auth and build it in any language you want. That's what I did and it only took me a few hours without much of the dependencies this library requires. Just gotta read the Firebase Auth Doc, it's very straight forward. If I find time and motivation one of these days I will build a package for everyone to use with all the customization needed.

[selbekk]

If the feature won't be pushed, then this library will lose many of its users, and somebody (perhaps you?) will create another alternative with localization support.

In most cases, this ready-made UI is best used for PoCs anyway, so perhaps it doesn't matter as much :)

[hellocaio]

@selbekk well, it's been two years... that's all i'm saying. But yeah, a ready-to-go UI is nice. I only did Facebook, Google and Phone auth. Phone auth was the more painful one with recaptcha and different forms it requires. If all the other auth methods are like Google and Facebook's, it's just copy and paste.

To do this:

// firebase.auth().languageCode = "it";
// To apply the default browser preference instead of explicitly setting it.
firebase.auth().useDeviceLanguage(); 

After finishing this project and relaxing away from the computer I might just create an alternative package for this. Anyway... good talk, back to work. ;)

[muccurly]

@selbekk well, it's been two years... that's all i'm saying. But yeah, a ready-to-go UI is nice. I only did Facebook, Google and Phone auth. Phone auth was the more painful one with recaptcha and different forms it requires. If all the other auth methods are like Google and Facebook's, it's just copy and paste.

For the auth localization it is even easier, that's what got me aggravated in the first place. I felt bad afterwards though, i deleted the comment.

All it need to be done was:

// firebase.auth().languageCode = "it";
// To apply the default browser preference instead of explicitly setting it.
firebase.auth().useDeviceLanguage(); 

After finishing this project and relaxing away from the computer I might just create an alternative package for this. Anyway... good talk, back to work. ;)

Hey I thought in phone auth has problem with recaptcha, but it is only on emulator in real device recaptcha is worked good

[tiagobbraga]

Works like a charm

For anyone else who is struggling with building firebaseui-web (e.g. because the build is broken on Mac/OSX): I created a minimal fork which skips all CSS, SASS, tests etc.

https://github.com/netzwerg/firebaseui-web

The README explains all required steps – hope it helps!

[dohomi]

I am curious why there isn't any easier way to localise the login-flow especially setting the locale dynamically. I hope this will get some attention as it shows already quite a reasonable amount of +1

[landsman]

What? This is really overkilled to do a simple configuration of the localization.
Contributors, please look at it and provide there simple configuration via prop of the component 🙏

We are providing an app where is multilingual support so, definitely has to be dynamically changeable via state.

EDIT: So I had idea to do a patch for this library and end here: 🥵

Really bad idea to compile the whole thing to raw HTML. There should be dynamic loading of JSON.

[bezysoftware]

Hi @barbalex I found another solution. It's not ideal, but better than build my own ui. I need to translate to polish so I pasted polish texts. I'm using (S)CSS modules in my project (but it doesn't matter).
...

This works and can be quite nicely automated with a little bit of scripting and SCSS. The script can pull all firebase localizations (I used the android strings files, e.g. https://raw.githubusercontent.com/firebase/FirebaseUI-Android/master/auth/src/main/res/values/strings.xml ), generate SCSS variables file containing a list with each language and then @include this list in your styles.scss, iterate over the list and generate a set of CSS classes for each language.

i.e.

Great thing is language can be toggled by users, however I didn't find a solution for placeholder replacements (%s %d etc) so I have those untranslated..

[landsman]

@firebase please do something with this.

[landsman]

Guys @jhuleatt @jamesdaniels, can you tell us the potential future of this?
Can we help somehow? I think if you manage "project vision" with public steps, the community can easily help 🙏

It's nonsense that I have to build my own web UI because of this.

For example, https://lingui.js.org is really great tool for managing, implementation of localization and we have a lot of experience with that, so can help.

[rhyek]

Isn't the whole idea with firebase auth that it's supposed to be easy for people to implement authentication for their apps? This library is part of the whole solution and so far seems very easy to use and I commend the contributors for that.

But apparently having to build the entire library per language required for a project is something that's fine and feasible for every one to do every time. This comment from someone above is pretty regrettable:

It's way easier to homebrew your own firebase ui auth and build it in any language you want. That's what I did and it only took me a few hours without much of the dependencies this library requires.

Sounds like satire.

[rhyek]

In case this helps anyone, this is a small extract of what I have working on my project. This was inspired by react-firebaseui-localized. What this will do is dynamically load whatever localized UMD module for firebaseui from google's CDN you specify, but the benefit here is I am keeping compatibility with the npm module versions of firebase in the same application (I am not using the UMD version of firebase).

I am also referencing the npm version of firebaseui just so that I have access to the typescript type definitions, but that can be skipped.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import firebaseui from 'firebaseui';
import useScript from 'react-use-scripts';
import { app } from '../my-firebase-app';
...

const firebaseUiConfig: firebaseui.auth.Config = {
  ...
};

export const SignIn = () => {
  const firebaseuiElement = useRef<HTMLDivElement | null>(null);
  const languageCode = 'es'; // get from somewhere

  const { ready } = useScript({
    src: `https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth__${languageCode}.js`,
  });

  useLayoutEffect(() => {
    if (ready && firebaseuiElement.current) {
      (window as any).firebase = firebase;
      const auth = firebase.auth(app);
      const firebaseuiUMD: typeof firebaseui = (window as any).firebaseui;
      const ui = new firebaseuiUMD.auth.AuthUI(auth);
      ui.start(firebaseuiElement.current, firebaseUiConfig);
    }
  }, [ready, firebaseUiConfig]);

  return (
    <div ref={firebaseuiElement} />
  );
}

Just be aware that if you change languageCode, you will need to reload the app.

[landsman]

Seriously?

[zackarydev]

+1, using multiple packages per language isn't great.

[Joonel]

Hey, the build section of readme.md is broken and it's still not clear how to use localized npm in my project :(

[landsman]

@google is really do not care about it anymore.