Buttons hiding when rendering two StyledFirebaseAuth components
AlexanderChiclana opened this issue · 1 comments
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
@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
firebaseui-web-react/src/FirebaseAuth.jsx
Line 118 in 49f80b5
firebaseui-web-react/src/FirebaseAuth.jsx
Line 82 in 49f80b5
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.