Firebase Auth & Firebase Auth With Facebook not working

Question

Hello i'm trying to implement an firebase auth to my app. but i does not seem to work. When i Submit the Form or click the Facebook Login it does nothing. I get this error:

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

Thank you in advance for helping me.

import firebase from 'firebase'

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;

mhnpd mhnpd · Accepted Answer · 2017-11-10T13:28:03

For popup sign-in visit the Facebook for Developers site, get the App ID and an App Secret for your app. If you don't want popup Check the code below:

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;
  // ...
});

Firebase Auth & Firebase Auth With Facebook not working

2 Answers