[Firefox] Flash of unstyled content when sending/verifying phone otp #1075
Description
[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;