Estoy tratando de habilitar el inicio de sesión en mi sitio con firebaseui. Requiere un firebaseui_auth_container para representar el formulario de inicio de sesión, pero no tengo ese div al inicio, ya que está en una ventana emergente modal. Este es mi código:
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> }El div con la identificación apropiada solo existe después de hacer clic en el botón 'iniciar sesión' en mi encabezado. En este momento, cuando hago clic en él, aparece un cuadro modal vacío. ¿Hay alguna manera de hacer que firebaseui 'espere' por el div, o que el div 'exista' al inicio, para que firebaseui no se queje? (En este momento, obviamente, arroja un error que dice que no puede encontrar el widget).
Inicialice el método firebaseui en el componentDidMount() en lugar del constructor. No veo una declaración de retorno en la función de representación. Si te lo perdiste, modifícalo de la siguiente manera:
render(){ return ( <div> ... contents here </div> ) }