[Firefox] Flash of unstyled content when sending/verifying phone otp

[docentdr]

trafficstars

[REQUIRED] Describe your environment

• Operating System version: macOS 12.5
• Browser version: Firefox 123.0.1
• Firebase UI version: 6.1.0

[REQUIRED] Describe the problem

Steps to reproduce:

I am only using phone sign-in method. After I click on "verify" button and after I click on "Continue" button, a white modal appears. From my investigation, the first modal (that displays after verify) is for saying "Code Sent" - I was not able to identify what the modal is for after I click on Continue.

Relevant Code:

import React, { useEffect, useState } from "react";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";
import { useNavigate } from "react-router-dom";
import { checkUserExists } from "../services/api";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
  firebase
    .auth()
    .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    .catch((error) => {
      console.log(error);
    });
} else {
  firebase.app();
}

const Auth = () => {
  const [ui, setUi] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    if (!ui) {
      firebase
        .auth()
        .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
        .then(() => {
          const uiInstance =
            firebaseui.auth.AuthUI.getInstance() ||
            new firebaseui.auth.AuthUI(firebase.auth());
          setUi(uiInstance);
        })
        .catch((error) => {
          console.log(error);
        });
    }

    const uiConfig = {
      signInOptions: [
        {
          provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
        },
      ],
      callbacks: {
        signInSuccessWithAuthResult: (authResult) => {
          handleSignInSuccess(authResult.user);
          return false;
        },
      },
    };

    if (ui) {
      ui.start("#firebaseui-auth-container", uiConfig);
    }

    return () => {
      if (ui) {
        ui.delete().then(() => setUi(null));
      }
    };
  }, [ui, navigate]);

  const handleSignInSuccess = async (user) => {
    try {
      const currentUser = await checkUserExists();
      if (currentUser.exists) {
        navigate("/admin");
      } else {
        navigate("/signup", { state: { phoneNumber: user.phoneNumber } });
      }
    } catch (error) {
      console.error("An error occurred:", error);
    }
  };

  return (
    <>
      <div id="firebaseui-auth-container"></div>
    </>
  );
};

export default Auth;

[jhuleatt]

Hi @docentdr, does this occur in your browser if you run the demo?

If not, I wonder if this is a React issue. You may need to declare a ref for the FirebaseUI container with useRef to avoid React cleaning up and re-creating FirebaseUI

[docentdr]

Hey @jhuleatt - yes the behavior occurs when I run the demo application as well