How to Customize and Override Django-AllAuth Template Forms?

AllAuth is one of the best and widely used Python Django libraries used for authentication. It supports username and password-based authentications as well as using social media accounts.

If you are started using it, you might have realized that default Django forms are simple HTML and without styling.

You also might want to apply your project base template so that it will look inclined to your project design.

The best option is to override the default allauth form templates and customize them based on our requirements.

What you can achieve by overriding allauth templates?

• Applying your own style css. (If you don’t want to create your own styling, you can also use Django crispy forms.)
• Adding more user reliabel features. For example, you can allow user to hide/show password on login form with simple JavaScript.
• Extending your project base template so that your project’s header and footer will be intact on login/signup form.
• Addiing new fields or modifing text on the authentication form.
• You can also show the proper message on form submit.
• Internally allauth uses underline default Django user model. So you can also custimize form using default Django User model fields.

Override Django-AllAuth Template Forms (Login/Signup)

Instead of writing your own templates, just copy-paste the allauth templates in your project directory templates and edit them as you want.

1. Copy all the files/directories from allauth templates.

\<virtual-environment>\lib\python3.6\site-packages\allauth\templates\

1. Paste them in your project directory.

\<project-name>\<app-name>\templates\

Now you can edit newly copied templates. DOn’t touch the original one. There are mainly two template sets.

1. account template forms for username-password-based authentication

Here are the HTML templates.

account_inactive.html 
email_confirm.html 
logout.html 
password_change.html 
password_reset_done.html 
password_reset_from_key_done.html 
signup.html 
verified_email_required.html
base.html 
email.html 
login.html
password_reset.html
password_reset_from_key.html
password_set.html
signup_closed.html
verification_sent.html

2. socialaccount template forms for social-media-based authentication.

Here are the HTML templates.

authentication_error.html
base.html
connections.html
login.html
login_cancelled.html
signup.html

These template names are self-explanatory. Be mindful while editing these templates.

Note: There are many alternatives to implement social media Django authentication like social-auth-app-django. But, my choice goes with AllAuth. There are many reasons. This is out of scope now.

Any further questions on how to override Django-AllAuth template? Let me know in the comment. I keep sharing more Django tutorials so stay tuned and best wishes!