Buttons hiding when rendering two StyledFirebaseAuth components

[AlexanderChiclana]

I am using two StyledFirebaseAuth components, one for signing up and the other inside a modal for signing in. When the modal renders, the buttons in the modal (sign in with google, ms, email) disappear and render in the other StyledFirebaseAuth instead. When the modal closes, the buttons that had rendered behind the modal disappear.

Independently both these components work fine when they are not rendered simultaneously.

Are there known issues related to this?

I am wondering if I would be best off finding a way to stop rendering one component entirely when the other is being used

[jhuleatt]

@AlexanderChiclana I think this is because this library uses a hard-coded id for the element it renders firebaseui into:

firebaseui-web-react/src/FirebaseAuth.jsx

Line 21 in 49f80b5

const ELEMENT_ID = 'firebaseui_container';

firebaseui-web-react/src/FirebaseAuth.jsx

Line 118 in 49f80b5

<div className={this.className} id={ELEMENT_ID}/>

firebaseui-web-react/src/FirebaseAuth.jsx

Line 82 in 49f80b5

this.firebaseUiWidget.start('#' + ELEMENT_ID, this.uiConfig);

Since the container always has the same id, it will likely cause issues if you render multiple at the same time. We should probably fix this in the library by using useRef instead of a hard-coded id.