Symfony 4 - JSON authentication not working

Question

I am trying to build a json authentication mechanism in Symfony basing on this docs: https://symfony.com/doc/current/security/json_login_setup.html

Here is my security.yaml

security:
encoders:
    App\Entity\User:
        algorithm: bcrypt
providers:
    user_provider:
      entity:
        class: App\Entity\User
        property: username
firewalls:
    dev:
      pattern: ^/(_(profiler|wdt)|css|images|js)/
      security: false
    main:
      anonymous: ~
      json_login:
        check_path: login
      provider: user_provider
      logout:
        path: logout

Here is my method login in my security controller

class SecurityController extends Controller
{
    ...
    /**
     * @Route("/login", name="login")
     * @return Response
     */
    public function login()
    {
        return new Response('Lala');
    }
    ...
}

And here is my login form

<form class="form" id="login-nav">
<div class="form-group">
    <label class="sr-only" for="username">Login</label>
    <input id="username" class="form-control" placeholder="Login" required
           name="_username">
</div>
<div class="form-group">
    <label class="sr-only" for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Hasło" required
           name="_password">
    <div class="help-block text-right">
        <a href="">Forgot password?</a>
    </div>
</div>
<div class="form-group">
    <a id="login-submit" class="btn btn-primary btn-block">Sign in</a>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> Remember me
    </label>
</div>

And below you can see my AJAX request which I am sending to controller

$('#login-submit').click(function() {
    let username = $('#username').val();
    let password = $('#password').val();
    let data = JSON.stringify({username: username, password: password});
    $.ajax({
        url: '/login',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            console.log("DATA", data);
        }
    });
});

I am receiving 200 status from server but nothing happens. The security authentication mechanism is not reacting at all. And success method in ajax is not invoking. I don't know why. I was searching over the Internet a lot but there is almost no information about json authentication in Symfony. There is only a brief description on Symfony docs.

Answer 1

I was able to identify the issue. The interception only happens if the request header is set to Content-Type: application/json:

Try this in your console:

curl -X POST -H "Content-Type: application/json" http://localhost:8000/login_check -d '{"username":"philipp","password":"test"}'

In your case, this should solve the problem:

$('#login-submit').click(function() {
    let username = $('#username').val();
    let password = $('#password').val();
    let data = JSON.stringify({username: username, password: password});
    $.ajax({
        url: '/login',
        type: 'POST',
        contentType: "application/json",
        dataType: 'json',
        data: data,
        success: function (data, status) {
            console.log("DATA", data);
        }
    });
});