Non english languages not working

[davidyoung77]

I set this up with the following configuration and and everything works except for the language. As you can see I've set the lang to it and it is still in english.

@l0ll098 Did I miss anything? I will work on debugging this locally as I really want this to work.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { ReactiveFormsModule } from '@angular/forms';
import { I18NextModule } from 'angular-i18next';
import { ExtendedFirebaseUIAuthConfig, firebase, firebaseui, FirebaseUIModule } from 'firebaseui-angular-i18n';
import i18next from 'i18next';
import { SharedModule } from 'src/app/shared/shared.module';
import { AuthenticationRoutingModule } from './authentication.routing';
import { TemplateComponent } from './components/template/template.component';
import { DefaultComponent } from './pages/default/default.component';
import { EmailComponent } from './pages/email/email.component';
import { PhoneComponent } from './pages/phone/phone.component';

i18next.on('languageChanged', (language) => {
  console.warn('language', language);
  FirebaseUIModule.forFeature({ language });
});

const language = 'it'; // TODO: set language from i18next

const firebaseUiAuthConfig: ExtendedFirebaseUIAuthConfig = {
  signInOptions: [
    {
      requireDisplayName: false,
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      buttonColor: '#00286a',
    },
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'invisible', // 'invisible' or 'compact'
        badge: 'bottomright', // 'bottomright' or 'inline' applies to invisible.
      },
      buttonColor: '#00286a',
    },
  ],
  // tosUrl: '<your-tos-link>',
  // privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO,

  // Optional. Set it to override the default language (English)
  language: 'it',
};
@NgModule({
  declarations: [DefaultComponent, EmailComponent, PhoneComponent, TemplateComponent],
  imports: [
    AuthenticationRoutingModule,
    CommonModule,
    ReactiveFormsModule,
    SharedModule,
    AngularFireAuthModule,
    I18NextModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ],
})
export class AuthenticationModule {}

[davidyoung77]

if (!this.language) {
    this.firebaseUIService.setLanguage('en');
}

Changing this line in /node_modules/firebaseui-angular-i18n/__ivy_ngcc__/fesm2015/firebaseui-angular-i18n.jsdoes work, so for some reason the language value isn't loading properly

[davidyoung77]

I have found that language was implemented as an input so I can use it like

<firebase-ui
  [language]="language"
  (signInSuccessWithAuthResult)="onFirebaseUiSuccess($event)"
  (signInFailure)="onFirebaseUiError($event)"
></firebase-ui>

I don't think this is the intended behavior though and isn't documented

If we updated the referenced code in the previous comment I believe it would fix the issue

  this.firebaseUIService.setLanguage(this.language || this.firebaseUiConfig.language || 'en');

[davidyoung77]

.forFeature also isn't updating the language

[l0ll098]

Hi @davidyoung77,
can you provide a simple Stackblitz example showing what's wrong? 'cause I've tried it locally once again but it seems to be working fine