title: Symfony 2 FOS User Bundle Bootstrap modal AJAX Login
body: <p>Has anyone already built a login form inside a Bootstrap modal with Symfony 2 and FOS User Bundle ?</p>
  
  <p>Here is what I have now :</p>
  
  <p><strong>src/Webibli/UserBundle/Resources/config/service.yml</strong> </p>
  
  <pre><code>authentication_handler:
      class:        Webibli\UserBundle\Handler\AuthenticationHandler
      arguments:    [@router, @security.context, @fos_user.user_manager, @service_container]
  </code></pre>
  
  <p><strong>app/config/security.yml</strong></p>
  
  <pre><code>form_login:
      provider: fos_userbundle
      success_handler: authentication_handler
      failure_handler: authentication_handler
  </code></pre>
  
  <p><strong>src/Webibli/UserBundle/Handler/AuthenticationHandler.php</strong></p>
  
  <pre><code>&lt;?php
  
  namespace Webibli\UserBundle\Handler;
  
  use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;
  use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface;
  use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
  use Symfony\Component\Routing\RouterInterface;
  use Symfony\Component\HttpFoundation\Request;
  use Symfony\Component\HttpFoundation\Response;
  use Symfony\Component\HttpFoundation\RedirectResponse;
  use Symfony\Component\Routing\Router;
  use Symfony\Component\Security\Core\SecurityContext;
  use Symfony\Component\Security\Core\Exception\AuthenticationException;
  
  
  class AuthenticationHandler implements AuthenticationSuccessHandlerInterface, AuthenticationFailureHandlerInterface
  {
  
      protected $router;
      protected $security;
      protected $userManager;
      protected $service_container;
  
      public function __construct(RouterInterface $router, SecurityContext $security, $userManager, $service_container)
      {
          $this-&gt;router = $router;
          $this-&gt;security = $security;
          $this-&gt;userManager = $userManager;
          $this-&gt;service_container = $service_container;
  
      }
      public function onAuthenticationSuccess(Request $request, TokenInterface $token) {
          if ($request-&gt;isXmlHttpRequest()) {
              $result = array('success' =&gt; true);
              $response = new Response(json_encode($result));
              $response-&gt;headers-&gt;set('Content-Type', 'application/json');
              return $response;
          }
          else {
              // Create a flash message with the authentication error message
              $request-&gt;getSession()-&gt;getFlashBag()-&gt;set('error', $exception-&gt;getMessage());
              $url = $this-&gt;router-&gt;generate('fos_user_security_login');
  
              return new RedirectResponse($url);
          }
  
          return new RedirectResponse($this-&gt;router-&gt;generate('anag_new')); 
      } 
      public function onAuthenticationFailure(Request $request, AuthenticationException $exception) {
  
          if ($request-&gt;isXmlHttpRequest()) {
              $result = array('success' =&gt; false, 'message' =&gt; $exception-&gt;getMessage());
              $response = new Response(json_encode($result));
              $response-&gt;headers-&gt;set('Content-Type', 'application/json');
              return $response;
          }
          return new Response();
      }
  }
  </code></pre>
  
  <p>And here is the Twig view I am loading into my Bootstrap modal: </p>
  
  <pre><code>{% extends 'UserBundle::layout.html.twig' %}
  {% trans_default_domain 'FOSUserBundle' %}
  {% block user_content %}
  &lt;script&gt;
      $('#_submit').click(function(e){
          e.preventDefault();
          $.ajax({
              type        : $('form').attr( 'method' ),
              url         : $('form').attr( 'action' ),
              data        : $('form').serialize(),
              success     : function(data, status, object) {
                  console.log( status );
                  console.log( object.responseText );
              }
      });
  });
  &lt;/script&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;form action="{{ path("fos_user_security_check") }}" method="post" role="form" data-async data-target="#rating-modal" class="text-left"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;{{ 'layout.login'|trans }}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              {% if error %}
                  &lt;div&gt;{{ error|trans }}&lt;/div&gt;
              {% endif %}
              &lt;input type="hidden" name="_csrf_token" value="{{ csrf_token }}" /&gt;
              &lt;div class="form-group container"&gt;
                  &lt;label for="email"&gt;{{ 'security.login.username_email'|trans }}&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="username" name="_username" value="{{ last_username }}" required="required" placeholder="adresse@email.com"&gt;
              &lt;/div&gt;
              &lt;div class="form-group container"&gt;
                  &lt;label for="password"&gt;{{ 'security.login.password'|trans }}&lt;/label&gt;&lt;br /&gt;
                  &lt;input type="password" id="password" name="_password" required="required" class="form-control" placeholder="********"&gt;
              &lt;/div&gt;
              &lt;div class="form-group container"&gt;
                  &lt;label for="remember_me"&gt;
                      &lt;input type="checkbox" id="remember_me" name="_remember_me" value="on" /&gt;
                      {{ 'security.login.remember_me'|trans }}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" class="btn btn-primary"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>The login form is working perfectly fine without AJAX. I am just trying to get error on my form in the modal if there is a problem, or redirect the user if the login is successful.</p>
  
  <p>Can anyone explain how to achieve that?</p>