FOSUserBundle handles powerful and otherwise mundane tasks for us with ease. Out of the box it looks pretty bare, but with some quick styling that can be fixed!
This tutorial requires that you have a working Symfony dev environment. If you need help setting one up start with our other tutorial that shows you how to get up and running with ease.
You will also need to have FOSUserBundle added to the project. We have another tutorial that will help you get that installed.
The code for these tutorials is on my Github you can fork it to your own Github. Each branch is a different tutorial. The completed code for this tutorial is found on the
override-templatesbranch. The branch
initial-setupwould put you right before this tutorial. This will require a more advanced knowledge of Git, but please ask me if you run into issues! :)
There are two ways that you can overide the templates of a bundle.
- In the
app/Resourcesdirectory define a new template
- Create a new bundle that is a child of
This is the easiest way to overide a bundles template, but it is also the most limiting way. Personally I use a child theme. It is usful to know the other options available.
To override the file
vender/friendsofsymfony/user-bundle/Resources/views/Security/login.html.twig you would place your new template at
Using this method will only allow you to overide the template. You cannot change the controller. If you want to be able to have control over the controller also, then you must make a child bundle.
This way is slightly more involved, but offers full control over FOSUserBundle. The first thing that we want to do is make
AppBundle a child of FOSUserBundle. We can achieve that by editing
src/AppBundle/AppBundle.php to look like this:
Now that we have made AppBundle a child of FOSUserBundle we can do the same thing as above, but instead of replacing the filesdd in
app/Resources we will replace them in
src/AppBundle. We are not limited to only overriding things in the
Resources folder! We can also override the controllers or anything else.
As far as I have tried with FOSUserBundle you can copy any file they have in the
vendorfolder and add it to AppBundle by matching the file structure and changing the namespace. Then you can customize as you see fit. Obviously there are some files in FOSUserBundle that should not be overwritten.
Before we can login we must have a user to be able to login with. FOSUserBundle comes with command line arguments that can achieve this. To see all commands available open a terminal window and type
php bin/console. This will show us all available commands, and we can locate the FOSUserBundle commands:
Running the command below will prompt you with a few questions to answer in order to create the new user.
In Symfony we can create a base template which every page can use. On this template it can hold the scaffolding each page requires and also include all the required css and js files. To do this edit the file
app/Resources/views/base.html.twig to say:
block fos_user_content. That is the section where each page will import it’s own html.
Now we are ready to make the login form look the way that we want. First I open the
vendor folder and go into
friendsofsymfony to locate to login form. I need to know the file structure to match it in AppBundle.
In AppBundle make the folders
Resources/views/Security. Copy both
login_content.html.twig from FOSUserBundle and put them in the Security folder that we just made.
Tip: If you are using PHPStorm you can highlight the files and right click them and hit copy. You can then click the desired folder and paste the files there!
I personally do not like how FOSUserBundle has a
login_content.html.twig. So I took the
trans_default_domain 'FOSUserBundle' from it and put it into
login.html.twig. Then I moved the form into the
block fos_user_content section and then deleted
Now we should still see the same login form as before. But now lets change the contents of
login.html.twig to make this login form look awesome:
This will display the formatted login form!
In twig you can get the path to other routes by calling
Now lets test the login form and see if we can login.
Note: When developing in Symfony it’s important to add
/app_dev.phpto every url. If it is not added to the url then Symfony treats it as production and Caches a lot. Thus you don’t see your changes without clearing the cache. It also gives you a handy toolbar at the bottom.
By entering the credentials of the user that we just made and submitting it we are taken to a blank page. That is a good sign that it worked! We can see this by hovering over the bottom toolbar (if you don’t have the bottom toolbar add
/app_dev.php to the url.
To logout add
/logout to the url. This will take us to a blank screen again, but by hovering over the person on the bottom toolbar we see that we are no longer logged in.
It is a personal preference of mine that when not logged in it should redirect us to the login screen. So lets make it do that! We can do that by editing our
app/config/security.yml by adding this line under
This line says that anyone at the root url has to be fully authenticated. Since we have our login provider set to FOSUserBundle it automatically redirects to the login page.
We have now seen how to fully override a FOSUserBundle template and make it our own. We also saw how to create a user and adjust the security settings to fit our needs.
In this application we did not need to override the controller. Doing so is as easy as copying the one in the
vendor folder and moving it to AppBundle in the same spot (you also need to change the namespace in the copied file). Once you have copied it, Symfony will automatically use yours over the one in the
The code for this projec is on Github. If you have any questions please ask me in the comments :)
We are looking for more ideas on tutorials so if there is anything you would like us to do a tutorial on let us know! The material does not have to be Symfony related.