I'm trying to enable logging into my site with firebaseui. It requires a firebaseui_auth_container to render the login form to, but I don't have that div at startup, since it's in a modal popup. This is my code:
constructor() {
...
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(Firebase.auth());
var uiConfig = {
'signInSuccessUrl': 'url.com',
'signInOptions': [
// Leave the lines as is for the providers you want to offer your users.
Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
Firebase.auth.FacebookAuthProvider.PROVIDER_ID,
Firebase.auth.TwitterAuthProvider.PROVIDER_ID,
Firebase.auth.GithubAuthProvider.PROVIDER_ID,
//Firebase.auth.EmailAuthProvider.PROVIDER_ID
],
'signInFlow': 'popup'
};
ui.start('#firebaseui-auth-container', uiConfig)
}
render() {
<div className="my-logo"><button style={{backgroundColor: 'transparent', border: '0px',
font: "inherit", color: "#eee", cursor:"pointer"}}
onClick={this.openLogin.bind(this)}>Login</button><br/></div>
<Modal
aria-labelledby='modal-label'
style={modalStyle}
backdropStyle={backdropStyle}
show={this.state.showLoginModal}
onHide={this.closeLogin.bind(this)}
>
<div id="firebaseui-auth-container" style={dialogStyle()} />
</Modal>
}
The div with the appropriate ID only exists after I click the 'login' button in my header. Right now when I click it I get an empty modal box. Is there a way to make firebaseui 'wait' for the div, or to have the div 'exist' at startup, so that firebaseui doesn't complain? (Right now, obviously, it throws an error saying it can't find the widget).
Initialise the firebaseui in componentDidMount() method instead of constructor
I don't see a return statement in the render function. If you missed it modify as below:
render(){
return (
<div>
... contents here
</div>
)
}