Firebase Auth & Firebase Auth Mit Facebook funktioniert nicht

Question

Hallo, ich versuche, eine Firebase-Auth zu meiner App zu implementieren. aber ich scheint nicht zu arbeiten. Wenn ich das Formular abschicke oder auf den Facebook-Login klicke, tut es nichts. Ich erhalte diesen Fehler:

Uncaught Error: The error you provided does not contain a stack trace.

Vielen Dank im Voraus für Ihre Hilfe.

Import Feuerbasis von 'Feuerbasis'

const loginStyles = { 
    width: "90%", 
    maxWidth: "380px", 
    margin: "20px auto", 
    border: "1px solid #ddd", 
    borderRadius: "5px", 
    padding: "10px" 
} 

const provider = new firebase.auth.FacebookAuthProvider(); 


class Login extends Component { 


    constructor(props){ 
    super(props); 
    this.authWithFacebook= this.authWithFacebook.bind(this); 
    this.authWithEmailPassword= this.authWithEmailPassword.bind(this); 
    this.state = { 
     redirect: false 
    } 
    } 
    authWithFacebook(){ 
    firebase.auth().signInWithPopup(provider) 
     .then((result, error) => { 
     if(error){ 
      console.log(error); 
      this.toaster.show({intend: Intent.DANGER, message: "kann nicht mit Facebook einloggen"}) 
; 
     }else{ 
      this.setState({ 
      redirect: true 
      }) 
     } 
    }) 
    }; 

    authWithEmailPassword(event){ 
    event.preventDefault(); 
    const email = this.emailInput.value; 
    const password = this.passwordInput.value; 
    firebase.auth().fetchProvidersForEmail(email) 
     .then((providers)=>{ 
     if(providers.length === 0){ 
      //Benutzer Account erstellen 
      return firebase.auth.createUserWithEmailAndPassword(email, password) 

     } else if (providers.indexOf("password") === -1){ 
      //Facebook wird schon benutzt 
      this.loginForm.reset() 
      this.toaster.show({intend: Intent.WARNING, message: "versuche es mit einem abderen Login"}) 
     } else { 
      // den Benutzer Einloggen 
      return firebase.auth().signInWithEmailAndPassword(email, password) 
     } 
     }) 
     .then((user => { 
     if(user && user.email){ 
     this.loginForm.reset(); 
     this.setState({ 
      redirect: true 
     }) 
     }})) 
     .catch((error) => { 
     this.toaster.show({intend: Intent.DANGER, message: error.message}) 
     }) 
    } 



    render(){ 
     if (this.state.redirect === true){ 
     return <Redirect to='/' /> 
     } 
     return (

     <div style={loginStyles}> 
     <Toaster ref={(element) => {this.toaster = element}} /> 
      <div > 
      <Col xs={12} md={12}> 
       <Button style={{width: "100%", marginTop: "10px"}} bsStyle="primary" onClick={()=> {this.authWithFacebook() }}> 
       Log-In mit Facebook 
       </Button> 
      </Col> 
      </div> 
      <Col xs={12} md={12}> 
      <hr/> 
      </Col> 
      <Form onSubmit={(event)=> {this.authWithEmailPassword(event)}} ref={(form) =>{this.loginForm = form}}> 
      <FormGroup style={{marginBottom: "20px"}} controlId="formHorizontalEmail"> 
       <Col xs={12} md={12}> 
        <FormControl name="email" inputRef={(ref) => { this.emailInput = ref; }} type="email" placeholder="Email" /> 
       </Col> 
       </FormGroup> 

       <FormGroup controlId="formHorizontalPassword"> 
       <Col xs={12} md={12}> 
        <FormControl name="password" inputRef={(ref) => { this.passwordInput = ref; }} type="password" placeholder="Password" /> 
       </Col> 
       </FormGroup> 



       <FormGroup style={{marginTop : "20px"}} > 
       <Col sm={12}> 
        <Checkbox>Remember me</Checkbox> 
       </Col> 
       </FormGroup> 

       <FormGroup > 
       <Col sm={12}> 
        <Button type="submit"> 
        Einloggen 
        </Button> 
       </Col> 
       </FormGroup> 
      </Form> 
     </div> 
    ) 
    } 
} 
; 

export default Login; 

Answer 1

Für Popup-Anmeldung finden Sie auf der Facebook für Entwickler-Website, erhält die App-ID und ein App Geheimnis für Ihre App. Wenn Sie nicht unter den Code wollen Popup-Check:

firebase.auth().signInWithRedirect(provider); 
 
firebase.auth().getRedirectResult().then(function(result) { 
 
if (result.credential) { 
 
    // This gives you a Facebook Access Token. You can use it to access the Facebook API. 
 
    var token = result.credential.accessToken; 
 
    // ... 
 
    } 
 
    // The signed-in user info. 
 
    var user = result.user; 
 
}).catch(function(error) { 
 
    // Handle Errors here. 
 
    var errorCode = error.code; 
 
    var errorMessage = error.message; 
 
    // The email of the user's account used. 
 
    var email = error.email; 
 
    // The firebase.auth.AuthCredential type that was used. 
 
    var credential = error.credential; 
 
    // ... 
 
});

Answer 2

Dies ist falsch:

firebase.auth().signInWithPopup(provider) 
    .then((result, error) => { 

es sein sollte:

firebase.auth().signInWithPopup(provider) 
    .then((result) => { 
    // Success. 
    }, (error) => { 
    // Error. 
    });