If you are trying to implement a custom login form in wordpress you will see that you have to options only for login with username. In order to make your login form work with username and email you have to create a custom function where you check what type of data user added in form's input. I will show you an example a little below, but first of all, let's create HTML code for our form.

Implement Wordpress Login With Email

<form id="login_account" method="POST">
              <div class="item">
                <label>Email</label>
                <input type="email" name="email" class="email">
              </div>
              <div class="item">
                <label>Password</label>
                <input type="password" name="password" class="password">
              </div>
              <div class="submit">
                <input type="submit" value="Login">
              </div>
            </form>

As you can see, we have two inputs in our form, one for email and the second one for password. Next step is to create a jQuery function to get all data from our form and send it to the backend (functions.php) where we will create the rest of code.

Your jQuery script should look like the following:

jQuery('#login_account').on('submit', function(e){
    e.preventDefault();
    var email = jQuery(this).find('.email').val(),
      password = jQuery(this).find('.password').val();
      
    jQuery.ajax({
      type:"POST",
      url:ajaxurl,
      data:{
        email:email,
        password:password,
        action:'custom_login_user'
      },
      success:function(result){
        console.log(result);
      },
      error:function(error){
        console.log(error);
      }
    })
  });

In the data object we have "custom_login_user" parameter, this is the function in our functions.php file. Using action paramter wordpress will know where the request should go. 

Here is the code you have to add in functions.php:

add_action('login_init', 'authenticate_username_or_email', 10);
 
function authenticate_username_or_email($username, $password) {
  $user = null;   
    if (filter_var($username, FILTER_VALIDATE_EMAIL)) { //Invalid Email
        $user = get_user_by('email', $username);
    } else {
    	$user = get_user_by('login', $username);
    }
    if ($user && wp_check_password( $password, $user->data->user_pass, $user->ID)) {
        $creds = array('user_login' => $user->data->user_login, 'user_password' => $password);
        $user = wp_signon( $creds, $secure_cookie );
    }
  return $user;
}


add_action('wp_ajax_custom_login_user', 'custom_login_user');
add_action('wp_ajax_nopriv_custom_login_user', 'custom_login_user');
function custom_login_user(){
  $data = $_POST;
  $user = authenticate_username_or_email($data['email'], $data['password']);
  $errors = array();
  
  if(isset($user->errors)){
    foreach($user->errors as $k => $v){
      $errors[$k] = $v;
    }
  }
  
  if(!empty($errors)){
    echo json_encode($errors);
    wp_die();
  }
  
  if(!empty($user)){
    
  }
}

I hope you will find this article helpful, if you have any questions or you need help with this implementation let your ideas in the comments section.