CODEWITHSUNDEEP
javascriptreactjsfirebase
Susan Brown
Susan Brown

Reputation: 3

React-Redux firebase email address is badly formatted

I'm getting the following error, when logging a user in.

The email address is badly formatted.

However, i can sign up fine.

working demo(that doesn't sign in)

https://stackblitz.com/edit/react-herqe7

Maybe its my firebase config file.

firebaseConfig.js

import React, { Component } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const config = {
    apiKey: "*******",
    authDomain: "*******",
    databaseURL: "*******",
    projectId: "*******",
    storageBucket: "",
    messagingSenderId: "*******"
};


firebase.initializeApp(config);

export const database = firebase.database()
export const auth = firebase.auth()
export const googleProvider = new firebase.auth.GoogleAuthProvider()

Actions.js

export const signIn = (user) => { return (dispatch) => {

    firebaseAuth.signInWithEmailAndPassword(user.email.trim(), user.password)
        .then(()=> {
            dispatch({type: 'SIGNIN_SUCCESS'})
        }).then((response) => {
            history.push('/dashboard');
        }).catch( (err) => {
            dispatch({ type: 'SIGNIN_ERROR', err});
        });
    }

}

Upvotes: 0

Views: 632

Answers (1)

Nick Foden
Nick Foden

Reputation: 1205

I think the issue within SignIn.js is with the handle change and the inputs not having a name="email" name="password". You are setting state with e.target.name, but the input for email doesn't have a name. If you put a console log in your handleChange, you will see that e.target.name is "" not what you want it to be email, password etc

handleChange = e => {
    console.log(e.target.name);
    const { formData } = this.state
    this.setState({
      formData: {
        ...formData,
        [e.target.name]: e.target.value
      }
    });
  };

Add a name="email" to your email input so that e.target.name in handle change will have a key value to setState to. 

   <input
      type="email"
      name="email"
      className="form-control"
      id="exampleInputEmail1"
      onChange={this.handleChange}
      aria-describedby="emailHelp"
      placeholder="Enter email"
    />

also will need one for password: 

<input
   name="password"
   etc

Upvotes: 1

Related Questions