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.
- Copy all the files/directories from
allauth
templates.
\<virtual-environment>\lib\python3.6\site-packages\allauth\templates\
- 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.
-
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
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!