Front end login form with ajax

Question

Im trying to get a front end login form to work over ajax and running into issues, it seems to always pass back success and not sure how to actual make sure the cookie gets created and the user is logged in?

here is the gist of what i have right now: https://gist.github.com/keithmancuso/29e8446ec5fa66fb2b01

Answer 1

If you’re getting the {success: true} response, then the user is getting logged in successfully, and the cookie would have actually been created by that response.

Answer 2

I had a same problem and I will try to give you more detailed explanation.

Craft thinks you submitted a classic login form and Users controller tries to redirect you after successful login. In case you send AJAX request Craft will return success:true. So, you should add dataType: "json" in your AJAX request and you will be logged in with response success:true.

All in all, your code should be:

$('#loginForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();

        $.ajax({
            url: '/',
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            type:'POST',
            data: formData,
            success: function(result) {
                console.log(result);
            }
        });
 });