Form builder for Symfony login page

Question

How do you create a custom login page built using the form builder and form helper functions to render the view? I finally figured it out! My solution is below.

Why is it needed?

Well I wanted to use the form builder to create the Symfony login page as I wanted to use the form helper functions to render the view. This way my fields would always use the correct template (manually writing the form - as per the Symfony book example - means if the main template was updated the changes to the login form would have to be done manually - and there's a chance of forgetting that!)

Answer 1

You can do it even more simpler and better (with built in error handling) and the solution is right in Symfony :) ... look at this class as an example UserLoginType :

<?php

/*
 * This file is part of the Symfony package.
 *
 * (c) Fabien Potencier <fabien@symfony.com>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Symfony\Bundle\SecurityBundle\Tests\Functional\Bundle\CsrfFormLoginBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormError;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\HttpFoundation\RequestStack;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Security\Core\Security;

/**
 * Form type for use with the Security component's form-based authentication
 * listener.
 *
 * @author Henrik Bjornskov <henrik@bjrnskov.dk>
 * @author Jeremy Mikola <jmikola@gmail.com>
 */
class UserLoginType extends AbstractType
{
    private $requestStack;

    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }

    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('username', 'Symfony\Component\Form\Extension\Core\Type\TextType')
            ->add('password', 'Symfony\Component\Form\Extension\Core\Type\PasswordType')
            ->add('_target_path', 'Symfony\Component\Form\Extension\Core\Type\HiddenType')
        ;

        $request = $this->requestStack->getCurrentRequest();

        /* Note: since the Security component's form login listener intercepts
         * the POST request, this form will never really be bound to the
         * request; however, we can match the expected behavior by checking the
         * session for an authentication error and last username.
         */
        $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) use ($request) {
            if ($request->attributes->has(Security::AUTHENTICATION_ERROR)) {
                $error = $request->attributes->get(Security::AUTHENTICATION_ERROR);
            } else {
                $error = $request->getSession()->get(Security::AUTHENTICATION_ERROR);
            }

            if ($error) {
                $event->getForm()->addError(new FormError($error->getMessage()));
            }

            $event->setData(array_replace((array) $event->getData(), array(
                'username' => $request->getSession()->get(Security::LAST_USERNAME),
            )));
        });
    }

    /**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        /* Note: the form's csrf_token_id must correspond to that for the form login
         * listener in order for the CSRF token to validate successfully.
         */

        $resolver->setDefaults(array(
            'csrf_token_id' => 'authenticate',
        ));
    }
}

Answer 2

I used the createFormBuilder without a class (see Symfony - Using a Form without a Class ) so I could render just the needed fields for login:

/**
 * @Route("/login", name="login")
 */
public function loginAction(Request $request)
{
    if ($this->get('security.authorization_checker')->isGranted('IS_AUTHENTICATED_FULLY')) {
        $this->addFlash('warning', 'You are already fully logged in.');
        return $this->redirectToRoute('my_homepage');
    } else {
        $authenticationUtils = $this->get('security.authentication_utils');
        $defaultData = array('username' => $authenticationUtils->getLastUsername());
        $form = $this->createFormBuilder($defaultData)
            ->add('username', \Symfony\Component\Form\Extension\Core\Type\TextType::class)
            ->add('password', \Symfony\Component\Form\Extension\Core\Type\PasswordType::class)
            ->add('logIn', \Symfony\Component\Form\Extension\Core\Type\SubmitType::class)
            ->getForm();
        if (!is_null($authenticationUtils->getLastAuthenticationError(false))) {
            $form->addError(new \Symfony\Component\Form\FormError(
                $authenticationUtils->getLastAuthenticationError()->getMessageKey()
            ));
        }
        $form->handleRequest($request);
        return $this->render('login.html.twig', array(
                'form' => $form->createView(),
                )
        );
    }
}

Then I rendered the form in the usual way, except I used the full_name form twig variable (see Symfony - Form Variables Reference ) to set the correct field names of _username and _password :

{% extends 'base.html.twig' %}

{% block title %}Log in to {{ app.request.host }}{% endblock %}

{% block body %}
  <h1>Account Log In</h1>

  {{ form_start(form) }}
  {{ form_row(form.username, {'full_name': '_username'}) }}
  {{ form_row(form.password, {'full_name': '_password'}) }}
  {{ form_errors(form) }}
  {{ form_end(form) }}
{% endblock %}

I'm not sure what version this is restricted to - I'm using the current 3.0.

EDIT

In case you're wondering.. yes you can use a FormBuilderInterface to create the form in case you want to use the same form elsewhere (with a different template). That's fairly standard. Just create your LoginType file (or whatever you choose to call it):

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

class LoginType extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
                ->add('username', TextType::class)
                ->add('password', PasswordType::class)
                ->add('logIn', SubmitType::class);
    }

}

And then get your form using createForm() instead:

$form = $this->createForm(\AppBundle\Form\LoginType::class, $defaultData);

Answer 3

If you want to do clean things, I recommend to use a dedicated factory to build your form :

Controller :

public function signInAction(SignInFormFactory $formFactory): Response
{
    $form = $formFactory->createForm();

    return $this->render('Security/SignIn.html.twig', array(
        'form' => $form->createView(),
    ));
}

Form Factory :

<?php

namespace App\Form\Factory;

use App\Form\SignInForm;
use Symfony\Component\Form\FormError;
use Symfony\Component\Form\FormFactoryInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;

class SignInFormFactory
{
    protected $formFactory;
    protected $authenticationUtils;

    public function __construct(FormFactoryInterface $formFactory, AuthenticationUtils $authenticationUtils)
    {
        $this->formFactory = $formFactory;
        $this->authenticationUtils = $authenticationUtils;
    }

    public function createForm(): FormInterface
    {
        $form = $this->formFactory->create(SignInForm::class);
        $form->get('_username')->setData($this->authenticationUtils->getLastUsername());

        if ($error = $this->authenticationUtils->getLastAuthenticationError()) {
            $form->addError(new FormError($error->getMessage()));
        }

        return $form;
    }
}

Form type :

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class SignInForm extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('_username', TextType::class)
            ->add('_password', PasswordType::class)
            ->add('_remember_me', CheckboxType::class, array(
                'required' => false,
                'data' => true,
            ))
            ->add('submit', SubmitType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'csrf_field_name' => '_csrf_token',
            'csrf_token_id' => 'authenticate',
        ));
    }

    public function getBlockPrefix()
    {
        return '';
    }
}

This example works fine with the default configuration of the login form in your security.yaml.