CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authenticationreact-router
revinda amalia
revinda amalia

Reputation: 15

auth/invalid-email The email address is badly formatted

I'm creating project and using firebase for authentication, so when I ran the program and login there is an error. There is no error on my code, but when I checked on my inspect there is a problem like this. so what should I do? here the error

and I'm already checked on my codes and I dont know what happened.

import React, {Component} from 'react';
import './Login.css';
import fireApp, { database } from '../firebase/firebase'
class Login extends Component {
    state = {
        email:'',
        password:''
    }







    handleChangeText = (e) =>{
        //console.log(e.target.id)
        this.setState({
            [e.target.id]: e.target.value,
        })
    } 

    handleLoginSubmit = () =>{
        const {email,password} = this.state;
        const {history} =  this.props;
        console.log('data before send:',email,password)
        fireApp.app.auth().signInWithEmailAndPassword(email,password)
        .then(res => {
            console.log('success: ', res);
            history.push('/dashboard')
        })
        .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            console.log(errorCode, errorMessage)
        });
    }

    render(){
        return(
            <div  className="auth-container"> 
                <div className="auth-card" >
                    <p className="auth-title" >Login Page</p>
                    <input className="input" id="email" placeholder="Email" type="email" onChange={this.handleLoginSubmit}/>
                    <input className="input" id="password" placeholder="Password" type="password" onChange={this.handleLoginSubmit}/>
                    <button className="btn" onClick={this.handleLoginSubmit}>Login</button>
                </div> 
                {/* <button>Go to Dashboard</button>  */}
            </div>
        )
    }
}

export default Login;

Upvotes: 0

Views: 1383

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317692

There is actually a bug in your code. You are passing an empty string to signInWithEmailAndPassword().

First you're doing this:

state = {
    email:'',
    password:''
}

Then, almost immediately after that, you're doing this:

    const {email,password} = this.state;
    fireApp.app.auth().signInWithEmailAndPassword(email,password)

Your log is even confirming that you have no string for email address - it's printing nothing for email.

You should figure out a way to only call signInWithEmailAndPassword until you have an actual email address to work with.

Upvotes: 2

Related Questions