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 ?