form_login Setup¶

First, enable form_login under your firewall:

Now, when the security system initiates the authentication process, it will redirect the user to the login form /login. Implementing this login form is your job. First, create a new SecurityController inside a bundle:

1
2
3
4
5
6
7
8

// src/Controller/SecurityController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class SecurityController extends AbstractController
{
}

Next, configure the route that you earlier used under your form_login configuration (login):

Great! Next, add the logic to login() that displays the login form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// src/Controller/SecurityController.php
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;

public function login(AuthenticationUtils $authenticationUtils)
{
    // get the login error if there is one
    $error = $authenticationUtils->getLastAuthenticationError();

    // last username entered by the user
    $lastUsername = $authenticationUtils->getLastUsername();

    return $this->render('security/login.html.twig', [
        'last_username' => $lastUsername,
        'error'         => $error,
    ]);
}

Don't let this controller confuse you. As you'll see in a moment, when the user submits the form, the security system automatically handles the form submission for you. If the user submits an invalid username or password, this controller reads the form submission error from the security system, so that it can be displayed back to the user.

In other words, your job is to display the login form and any login errors that may have occurred, but the security system itself takes care of checking the submitted username and password and authenticating the user.

Finally, create the template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{# templates/security/login.html.twig #}
{# ... you will probably extend your base template, like base.html.twig #}

{% if error %}
    <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}

<form action="{{ path('login') }}" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="_username" value="{{ last_username }}"/>

    <label for="password">Password:</label>
    <input type="password" id="password" name="_password"/>

    {#
        If you want to control the URL the user
        is redirected to on success (more details below)
        <input type="hidden" name="_target_path" value="/account"/>
    #}

    <button type="submit">login</button>
</form>

The form can look like anything, but it usually follows some conventions:

• The <form> element sends a POST request to the login route, since that's what you configured under the form_login key in security.yaml;
• The username field has the name _username and the password field has the name _password.

And that's it! When you submit the form, the security system will automatically check the user's credentials and either authenticate the user or send the user back to the login form where the error can be displayed.

To review the whole process:

1. The user tries to access a resource that is protected;
2. The firewall initiates the authentication process by redirecting the user to the login form (/login);
3. The /login page renders login form via the route and controller created in this example;
4. The user submits the login form to /login;
5. The security system intercepts the request, checks the user's submitted credentials, authenticates the user if they are correct, and sends the user back to the login form if they are not.

CSRF Protection in Login Forms¶

Login CSRF attacks can be prevented using the same technique of adding hidden CSRF tokens into the login forms. The Security component already provides CSRF protection, but you need to configure some options before using it.

First, configure the CSRF token provider used by the form login in your security configuration. You can set this to use the default provider available in the security component:

Then, use the csrf_token() function in the Twig template to generate a CSRF token and store it as a hidden field of the form. By default, the HTML field must be called _csrf_token and the string used to generate the value must be authenticate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{# templates/security/login.html.twig #}

{# ... #}
<form action="{{ path('login') }}" method="post">
    {# ... the login fields #}

    <input type="hidden" name="_csrf_token"
        value="{{ csrf_token('authenticate') }}"
    >

    <button type="submit">login</button>
</form>

After this, you have protected your login form against CSRF attacks.

Redirecting after Success¶

By default, the form will redirect to the URL the user requested (i.e. the URL which triggered the login form being shown). For example, if the user requested http://www.example.com/admin/post/18/edit, then after they have successfully logged in, they will be sent back to http://www.example.com/admin/post/18/edit.

This is done by storing the requested URL in the session. If no URL is present in the session (perhaps the user went directly to the login page), then the user is redirected to / (i.e. the homepage). You can change this behavior in several ways.

1

http://example.com/some/path?_target_path=/dashboard

1
2
3
4
5
6
7

{# templates/security/login.html.twig #}
<form action="{{ path('login') }}" method="post">
    {# ... #}

    <input type="hidden" name="_target_path" value="{{ path('account') }}"/>
    <input type="submit" name="login"/>
</form>

Redirecting after Failure¶

After a failed login (e.g. an invalid username or password was submitted), the user is redirected back to the login form itself. Use the failure_path option to define a new target via a relative/absolute URL or a Symfony route name:

This option can also be set via the _failure_path request parameter:

1

http://example.com/some/path?_failure_path=/forgot-password

1
2
3
4
5
6
7

{# templates/security/login.html.twig #}
<form action="{{ path('login') }}" method="post">
    {# ... #}

    <input type="hidden" name="_failure_path" value="{{ path('forgot_password') }}"/>
    <input type="submit" name="login"/>
</form>

Customizing the Target and Failure Request Parameters¶

The name of the request attributes used to define the success and failure login redirects can be customized using the target_path_parameter and failure_path_parameter options of the firewall that defines the login form.

Using the above configuration, the query string parameters and hidden form fields are now fully customized:

1

http://example.com/some/path?go_to=/dashboard&back_to=/forgot-password

1
2
3
4
5
6
7
8

{# templates/security/login.html.twig #}
<form action="{{ path('login') }}" method="post">
    {# ... #}

    <input type="hidden" name="go_to" value="{{ path('dashboard') }}"/>
    <input type="hidden" name="back_to" value="{{ path('forgot_password') }}"/>
    <input type="submit" name="login"/>
</form>