Wordpress custom login form using Ajax

Question

Description: I would like to create a custom login form: username, password and remember field. This is the code I have:

Problem: /wp-admin/admin-ajax.php 503 ()

What I've tried: PHP:

function normal_login() {
    if( !isset( $_POST ) ) {
        return ;
    }

    $username =  $_POST[ 'username' ];
    $password =  $_POST[ 'pass' ];
    $remember_me = 'on' == $_POST[ 'remember_me' ] ? true : false;

    $credentials = array(
        'user_login'    => $username,
        'user_password' => $password,
        'remember'      => $remember_me
    );

    $user = wp_signon( $credentials, false );

    if ( is_wp_error($user) ) {
        echo $user->get_error_message();
    }
    else {
        if ( !$remember_me ) {
            wp_setcookie( $username, $password, false, '', '', $remember_me );
        }
        wp_redirect( '/' );
    }
    wp_die();
}
add_action( 'wp_ajax_normal_login','normal_login' );
add_action( 'wp_ajax_nopriv_normal_login','normal_login' );

JS:

jQuery(document).ready(function( $ ) {

    $( '#login-form button[type="submit"]' ).on( 'click', function( e ) {
        e.preventDefault();
        var username = $( '#form-field-email-login' ).val();
        var pass = $( '#form-field-password' ).val();
        var remember_me = $( '#form-field-remember_me' ).is( ':checked' );
        $.ajax( {
            url: MY_AJAX_OBJ.MY_AJAX_URL,
            type: 'post',
            data: {
                'action': 'normal_login',
                'username': username,
                'pass': pass,
                'remember_me': remember_me,
            },
            success: function( response ) {
                console.log( response );
            },
            error: function( textStatus ) {
                console.log( textStatus );
            }
        } );
    } );

} );

1. What am I doing wrong? no errors in error_log.
2. Is this way secure? if not, what can I do to make it secure.

Thanks!

Answer 1

A few issues I can see but no guarantee it'll entirely fix the problem(s) - can you ensure WP_DEBUG and WP_DEBUG_LOG are defined as true in your wp-config.php - any errors during runtime should then appear in wp-content/debug.log.

1. You have ! isset( $_POST ) as a conditional to check the request, but this will always be false because the $_POST superglobal is always set - it's just empty unless there is POST'ed data. Instead, use $_SERVER['REQUEST_METHOD'] !== 'POST'
2. I can't see any need for the wp_setcookie call. The function is deprecated and is just a wrapper for wp_set_auth_cookie, which is called & handled by wp_signon anyway.
3. If you send a redirect server-side (i.e. via PHP), the AJAX client (your browser) will silently follow the redirect and then return the response of said redirect for your callback (in your case, the homepage HTML). You would be better to send back JSON & instruct your JavaScript to do the redirect client-side (e.g. window.location = responseData.redirectUrl)