Login with Phone Number in WordPress

You may have placed a front-end login form on your WordPress website. And you want to allow users to login with their phone number or using username/email. Basically, you are allowing users to enter any of the one entry out of Username/Email/Phone and a password.

Please take note, this tutorial does not intend to show login with OTP. Instead, I am going to add one more option of phone number along with username and email. So your users can choose any one option which is convenient for them. You probably saw this option on Amazon. Amazon allows us to log in with either email or mobile number.

I am going to create a simple login form. On the form submit, we will write a code that checks credentials in the background for all 3 options(Username/Email/Phone) and a password.

In order to add a phone number on a login form, you should insert a phone number of a user in the ‘wp_usermeta’ table. You can do it at the time of user registration. The below code can be used to add a phone number of a user.

<?php
$user_id = 1;
$phone_number = 9999999999;
add_user_meta( $user_id, 'user_phone', $phone_number);

Once you have meta_key ‘user_phone’ along with its value in the database, you are able to add login with the phone number option in a sign-in form. Let’s put the following login form on your login page.

<?php
$return = log_the_user_in();
if( is_wp_error( $return ) ) {
    echo $return->get_error_message();
}
?>
<form method="post">
    <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p>
    <p><input type="password" name="user_password" placeholder="Password" required /></p>
    <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" />
    <input type="submit" name="login_the_user" value="Submit" />
</form>

In the above code, we are checking for errors and printing them. We will write code for handling errors in the next steps. Plus, we added a nonce in the form which is the recommended way of processing forms in WordPress.

Login with Phone Number in WordPress

When a user fills credentials and hits a submit button, we will take the credentials and verify them against the database. If credentials are correct, then we will log the user in and redirect it to the home page. In case of wrong credentials, errors are logged with WP_Error class.

So write the code below in the functions.php file which processes the login form.

<?php
add_action( 'init', 'log_the_user_in' );
function log_the_user_in() {
    if ( isset( $_POST['login_the_user'] ) && wp_verify_nonce( $_REQUEST['login_nonce'], 'login_nonce' ) ) {
 
        if ( ! empty( $_POST['user_login'] ) && ! empty( $_POST['user_password'] ) ) {
 
            if ( is_email( $_POST['user_login'] ) ) {
                // check user by email
                $user = get_user_by( 'email', $_POST['user_login'] );
            } elseif ( is_numeric( $_POST['user_login'] ) ) {
                // check user by phone number
                global $wpdb;
                $tbl_usermeta = $wpdb->prefix.'usermeta';
                $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) );
 
                $user = get_user_by( 'ID', $user_id );
            } else {
                // check user by username
                $user = get_user_by( 'login', $_POST['user_login'] );
            }
 
            if ( ! $user ) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            // check the user's login with their password.
            if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            wp_clear_auth_cookie();
            wp_set_current_user($user->ID);
            wp_set_auth_cookie($user->ID);
 
            wp_redirect(get_bloginfo('url'));
            exit;
        } else {
            return new WP_Error('empty', 'Both fields are required.');
        }
    }
}

Here, we first verified the nonce to protect our form from certain types of misuse, malicious code, and CSRF attacks. Next, based on is_email() or is_numeric() method, it checks for valid email and phone number. If the entered value is not an email or phone then we go for username. If credentials are satisfied, users log into the system and redirect to the home page. In your case, you can redirect users to another page as per your flow.

I hope you understand how to integrate login with a phone number in WordPress. Please share your thoughts and suggestions in the comment section below.