Login with Username or Email Address

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
security:
    providers:
        fos_userbundle:
            id: fos_user.user_provider.username

to

# app/config/security.yml
security:
    providers:
        fos_userbundle:
            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') }}
    </div>
{% 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">
            <label>
                <input type="checkbox"
                       id="remember_me"
                       name="_remember_me"
                       value="on" /> {{ 'security.login.remember_me'|trans }}
            </label>
        </div>
        <input type="submit"
               class="btn btn-lg btn-primary btn-block"
               id="_submit"
               name="_submit"
               value="{{ 'security.login.submit'|trans }}" />
    </form>

{% endblock fos_user_content %}

{% block stylesheets %}
    <style>
        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;
        }
    </style>
{% 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

security:

    # other stuff here

    firewalls: 
        your_firewall_here:
            form_login:
                # 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.