Change Firebaseui template language

Question

I need help changing the Firebaseui login template in Angular to English.

Content from: user-signin.component.ts

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';

@Component({
  selector: 'app-user-signin',
  templateUrl: './user-signin.component.html',
  styleUrls: ['./user-signin.component.scss']
})
export class UserSigninComponent implements OnInit, OnDestroy {
  constructor(public afAuth: AngularFireAuth, private router: Router) {}
  ui: firebaseui.auth.AuthUI;
  ngOnDestroy(): void {
    this.ui.delete();
  }

  ngOnInit(): void {
    // FirebaseUI config.
    const uiConfig = {
      signInSuccessUrl: '/home',
        defaultConfig: {
          // ...
          resConfigs: 'pt_br', // And any other languages you support
          defaultCountry: 'pt_br'
      },
        signInOptions: [
          {
            provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            recaptchaParameters: {
              type: 'image', // 'audio'
              size: 'normal', // 'invisible' or 'compact'
              badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
            },
            defaultCountry: 'BR'
          }, 
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ],
        tosUrl: '<your-tos-url>',
        // Privacy policy url/callback.
        privacyPolicyUrl: function() {
          window.location.assign('<your-privacy-policy-url>');
        }
    };

    this.ui = new firebaseui.auth.AuthUI(firebase.auth());
    this.ui.start('#firebaseui-auth-container', uiConfig);
  }
}

Contents of: user-signin.component.html

<div id="firebaseui-auth-container"></div>

I tried to follow these documentations but did not succeed: https://firebase.google.com/docs/auth/web/firebaseui#oauth_providers_google_facebook_twitter_and_github https://github.com/firebase/firebaseui-web/blob/master/LANGUAGES.md

I appreciate any suggestion.

Answer 1

I got translated following these steps:

I cloned the repository

git clone https://github.com/firebase/firebaseui-web

within the firebaseui-web directory ran

npm install
npm run build build-js-pt-BR
npm run build build-npm-pt-BR

In the firebaseui-web/dist folder created, I copied the files "firebaseui__pt_br.js" and "npm__pt_br.js" into my project’s node_modules/firebaseui/dist

In my project name.component.ts replaces the standard firebase import by:

import * as firebaseui from 'firebaseui/dist/npm__pt_br' 

More details are on these links:

https://github.com/firebase/firebaseui-web#building

https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/42