django-allauth is a Django package that lets you build an authentication system for your Django apps quickly and easily. It has built-in templates to let you focus on other important parts of your app.
Although the built-in templates are helpful, you will want to change them because they don’t have the best UI.
How to Install and Configure django-allauth
By following a few straightforward steps, you’re able to seamlessly install django-allauth into your Django project.
If you do the above configurations correctly, you should see a template like this when you navigate tohttp://127.0.0.1:8000/accounts/signup/:
You can see the list of available URLs by navigating tohttp://127.0.0.1:8000/accounts/withDEBUG=Truein your settings file.
How to Override the Login Template in django-allauth
First, you need to configure yourtemplatesfolder if you have not done so. Open your settings file and navigate to theTEMPLATESlist. Inside it, locate theDIRSlist, and modify it like this:
Ensure you have atemplatesfolder in the root directory of your project. You can override the default login template in django-allauth by following these next steps.
Step 1: Create Your Template Files
In yourtemplatesfolder, create a new folder calledaccountto hold the templates related to django-allauth.
The registration and login templates should besignup.htmlandlogin.htmlrespectively. You can determine the correct template name by opening yourPython virtual environmentand navigating toLib > site-packages > allauth > templates > accountfolder to find the templates. You should go through the code to understand how the templates work. For instance, the login template has this code in it:
Step 2: Add HTML Code to Your Template Files
After creating your files, you should add the custom HTML code for your template. For instance, to override the login template above, you might want to copy everything from the{% else %}block, which contains the form and submission button, and add it to your custom template. Here’s an example:
The code above usesDjango’s template inheritanceto inherit features from thebase.htmltemplate. Ensure you remove unnecessary tags such as the{% blocktrans %}tag. If you have done this, your login page should be similar to this:
The header and footer in the above image will be different from yours.
Step 3: Add Custom Styles to Your Form
In the previous step, the login form is rendered as a paragraph using the{{ form.as_p }}tag. To add styles to your form, you need to know the value of thenameattribute associated with each input field.
You can inspect your page to get the values you need.
The image above shows the name attribute associated with theemailfield of the form.
Now, you can add the form fields individually in your project. For instance, you can add the email field like this:
You canuse Bootstrap with your Django projectto easily style your form. Here’s an example:
The above code adds Bootstrap form classes to the form. Now, you can add the other fields you need and style them to your preference. If you don’t enjoy using Bootstrap for styling,django-crispy-forms is an alternative to styling your forms. The example below uses Bootstrap for styling.
The code block above will produce output similar to the following image:
You can learn more about forms in django-allauth by reading theofficial documentation.
Override Any Template in django-allauth
django-allauth contains many default templates that you can override. With the steps in this guide, you can override any template in django-allauth. You should consider using this package to handle your authentication system, so you can focus on building the other important features of your application.
