As a very short introduction for those who are not familiar with Django, its a powerful Python web application framework. It provides a well defined MVC structure for web applications in Python and support many things that you need. From Djnago’s website:

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

Django uses a application driven method to provide modularity and promote development of reusable applications as components of an application. This promoted development of numerous packages that you can use in your project.

Allauth is a Djang user authentication/registration package that supports login/signup and many related features additional to social authentication features for different websites such as Google, Facebook, Linkedin, Twitter and etc using the OAuth 1.0 and 2.0 protocols.

Django-allauth app is a significant help if you know how to use it, however, its not well documented at all. There are some few nice tutorials that I found and I’m sharing them here. But, still you can’t find detailed instructions for it. Here I will explain how one can customize a LoginView of this plugin to obtain both signup and signin at the same time.

Here, I’m assuming that you have some knowledge about Django and are trying to use Django-allauth so you what it is and how it works. The first thing that you need is to copy the templates from the source code on their Github repository here to be able to change them. copy the template files in your template directory. Make sure that you copy the folders directly into your templates directory. DO NOT CREATE A ALLAUTH DIRECTORY AT ALL. If you are not familiar with creating templates directory on Django read here.

Now from account directory open login.html and signup.html template files. The login.html template is the one you need to change. What I will explain in the next few paragraphs is the way you can bring the signup template codes to this file. The design and css codes are not explained in this tutorial. I recommend using the bootstrap platform.

Copy the signup.html template codes into login.html. Your login.html should look like this:

If you notice I have simply just copied the code from signup.html to login.html and wrapped both into separate div tags. If you now try this you will see that it will work but will show the login form twice. The problem is that the form variable in

has the login form in both cases. One when we are displaying the login form and once when we are displaying the signup form. To solve this, we will have to pass on a new variable/parameter to the template for the signup form. But, this is done in the LoginView implemented within the allauth app. To solve this we have to implement a new LoginView class which inherits all of the LoginView features and adds on to it. Create a new JointLoginSignupView class in your app’s views.py file.

This new class is extending the LoginView, which is also extending the abstract FormView in Django. FormView uses variables defined in the returned dictionary from get_content_data function as parameters which are pass to the template. Therefore, we have to add a new singupform parameter which holds the signup form and fix our template accordingly. The new template will look like:

Here you go. Have fun customizing the allauth app for yourself.