In this video you will learn how to configure your FOSUserBundle installation to allow your users to log in with either their Username or the Email Address they used to sign up with.

Truthfully, this is not very difficult at all. In fact, it's probably one of the easiest tweaks you can make:

# app/config/security.yml
            id: fos_user.user_provider.username


# app/config/security.yml
            id: fos_user.user_provider.username_email

This is described in the FOSUserBundle documentation.

FOSUserBundle and Bootstrap 3 Login Template

At the end of the previous video I demonstrated how we can customise our FOSUserBundle templates to use Bootstrap 3 styling.

Most likely you would like to use the Bootstrap 3 Sign-in Page example template, which is the one I have used for this video.

Of course you are completely free to use whatever styling you like for your login page, but here is the Bootstrap 3 sign-in example for reference:

<!-- app/Resources/FOSUserBundle/views/Security/login.html.twig -->

{% extends "FOSUserBundle::layout.html.twig" %}

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Please Sign In{% endblock %}

{% block fos_user_content %}
{% if error %}
    <div class="alert alert-danger" role="alert">
        {{ error.messageKey|trans(error.messageData, 'security') }}
{% endif %}

    <form action="{{ path("fos_user_security_check") }}" method="post" class="form-signin">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />

        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="username" class="sr-only">{{ 'security.login.username'|trans }}</label>
        <input type="text" id="username" name="_username" value="{{ last_username }}" placeholder="Email address" class="form-control" required autofocus />
        <label for="password" class="sr-only">{{ 'security.login.password'|trans }}</label>
        <input type="password" id="password" name="_password" class="form-control" placeholder="Password" required />
        <div class="checkbox">
                <input type="checkbox"
                       value="on" /> {{ 'security.login.remember_me'|trans }}
        <input type="submit"
               class="btn btn-lg btn-primary btn-block"
               value="{{ 'security.login.submit'|trans }}" />

{% endblock fos_user_content %}

{% block stylesheets %}
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #eee;

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;

        .form-signin .checkbox {
            font-weight: normal;

        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;

        .form-signin .form-control:focus {
            z-index: 2;

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
{% endblock %}%

Ideally you would extract the CSS into your own CSS system, whether you are using SASS or LESS, or whatever other system you have in place. It's best not to leave the styles in the template, but I have done so for purposes of this demonstration only.

One thing to note when customising - be sure to use the right name property for your username, password, and remember me fields. This is very important as these are the fields that FOSUserBundle will look for on your submitted form for the relevant bits of data.

This being Symfony, you are of course completely free to change these fields to whatever you wish.

To do so, you need to update your security.yml file with the new username_parameter and / or password_parameter values.

# /config/security.yml


    # other stuff here

                # field names for the username and password fields
                username_parameter: _username
                password_parameter: _password

If you do change these values, be sure to update the field names in your login template accordingly.

Share This Episode

If you have found this video helpful, please consider sharing. I really appreciate it.

Episodes in this series

# Title Duration
1 Getting Started with FOSUserBundle 06:53
2 Your Fully Functioning User Management System 05:13
3 FOSUserBundle and Bootstrap 3 Template Customisation 05:50
4 Login with Username or Email Address 03:04
5 FOSUserBundle with Bootstrap 3 Sign In Form 05:08
6 Adding Remember Me Functionality to FOSUserBundle 07:32
7 FOSUserBundle and the Bootstrap Navbar 09:11
7 Email Management and Template Customisation 09:32
8 Impersonating a Different User 05:15
9 Translations and Internationalisation in FOSUserBundle 08:22
10 How to Redirect a User After Login or Registration 07:20
11 UX Improvements - Part 1 - Redirect /login when Logged In 08:31
12 UX Improvements - Part 2 - Redirect Using an Event Listener 15:06
13 How to Disable Registation in FOSUserBundle 09:31
14 Mailchimp Integration with FOSUserBundle Events 15:09