首页 > 解决方案 > Firebase UI stops changing language in React app

问题描述

I'm trying to change firebase language dynamically, meaning that I have a button on the page that allows me to switch language which triggers the handling below:

useEffect(() => {
  if (!firebase) return;

  // This sets up firebaseui
  let localizedFirebaseui;

  switch (langCode) {
    case 'hu':
      localizedFirebaseui = require('../intl/firebaseui/npm__hu.js');
      break;
    case 'pl':
      localizedFirebaseui = require('../intl/firebaseui/npm__pl.js');
      break;
    default:
      localizedFirebaseui = require('../intl/firebaseui/npm__en.js');
      break;
  }

  // Configure FirebaseUI.
  const uiConfig = {
    // Popup sign-in flow rather than redirect flow.
    signInFlow: 'popup',
    // We will display Google and Facebook as auth providers.
    signInOptions: [
      originalFirebase.auth.EmailAuthProvider.PROVIDER_ID,
      originalFirebase.auth.GoogleAuthProvider.PROVIDER_ID,
      originalFirebase.auth.FacebookAuthProvider.PROVIDER_ID,
    ],
    signInSuccessUrl: ROUTE_PATH_TYPEWRITER,
    tosUrl: ROUTE_PATH_TERMS_OF_USE,
    privacyPolicyUrl: ROUTE_PATH_PRIVACY_POLICY,
  };

  const authUi = new localizedFirebaseui.auth.AuthUI(originalFirebase.auth());
  firebaseuiRef.current && authUi.start(firebaseuiRef.current, uiConfig);

  return () => {
    authUi && authUi.delete();
  };
}, [firebase]);

firebase is an initialized instance in this case, basically on every render of the page useEffect is called which allows me to load localized data and start the UI, and then I delete the instance to be able to reinitialize it again with a different set of translations.

The problem is that the language switch works until I'm choosing every language for the first time, for instance, if I start with en, switch to pl, I'm not able to go back to en, but loading hu will work properly.

Language change itself is fine because the rest of the app is switching without an issue. Any ideas on how to fix it? Or maybe it's not even possible, or there is a better solution than deleting and starting the UI over and over? I'm having a hard time finding anything related to the topic, I don't know why, is it some trivial error that no one faced before?

标签: reactjsfirebase-authenticationfirebaseui

解决方案


推荐阅读