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? (https://github.com/firebase/firebaseui-web/issues/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: https://github.com/firebase/firebaseui-web-react/blob/814ad759dde744d87905d2b9ccea8aba3b267553/src/FirebaseAuth.jsx#L50 https://github.com/firebase/firebaseui-web-react/blob/814ad759dde744d87905d2b9ccea8aba3b267553/src/FirebaseAuth.jsx#L54

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. (https://github.com/firebase/firebaseui-web/issues/84#issuecomment-328223506)

---

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 (https://github.com/firebase/firebaseui-web/issues/662#issuecomment-598463823): 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: https://github.com/RckMrkr/firebaseui-web/commit/025169fd4c85f38e59689e70f31a5ca280814a98

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