DEV Community

Serhat Teker
Serhat Teker

Posted on • Originally published at tech.serhatteker.com on

Custom Signup View in django-allauth

django-allauth is a great 3rd party library for Django which is integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.

It comes with great set of views, templates etc. If you want to override their default templates add <projectname>/templates/account/<template_name.html> in your project and write your custom page.

However if you want to change this default templates/account/ $path or add some custom logic in your views, you need more than that.

In this article we will see to use different template and path for Signup.

0 Initials

These are the initials you need before using the article.

0.0 requirements.txt

You installed necessary pip packages:

# requirements.txt
django==3.1
django-allauth==0.42.0
Enter fullscreen mode Exit fullscreen mode

Info
Your versions may differ but I mention versions to point references.

0.1 Project Setup

  1. You created your Django project:

    $ django-admin startproject <projectname> # let it be djauth
    $ ./manage.py startapp apps
    $ ./manage.py startapp users
    

    Your app's name may be different and you don't need users app however
    it is a good convention to manage your users in a different app.

    So your project directory should look like this:

    .
    ├── djauth
    │   ├── apps
    │   │   ├── admin.py
    │   │   ├── apps.py
    │   │   ├── __init__.py
    │   │   ├── migrations
    │   │   │   └── __init__.py
    │   │   ├── models.py
    │   │   ├── tests.py
    │   │   └── views.py
    │   ├── djauth
    │   │   ├── asgi.py
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── __init__.cpython-38.pyc
    │   │   │   └── settings.cpython-38.pyc
    │   │   ├── settings.py
    │   │   ├── urls.py
    │   │   └── wsgi.py
    │   ├── manage.py
    │   ├── requirements.txt
    │   ├── templates
    │   │   ├── apps
    │   │   └── users
    │   └── users
    │       ├── admin.py
    │       ├── apps.py
    │       ├── __init__.py
    │       ├── migrations
    │       │   └── __init__.py
    │       ├── models.py
    │       ├── tests.py
    │       └── views.py
    ├── .gitignore
    ├── Session.vim
    └── tags
    
    10 directories, 26 files
    
  2. You installed and configured django-allauth as detailed here: django-allauth installation

1 The Magic

Now let's code the custom Signup we want:

1.0 Views

First extend/override django-allauth's SignupView:

djauth/users/views.py

from allauth.account.views import SignupView


class AccountSignupView(SignupView):
    # Signup View extended

    # change template's name and path
    template_name = "users/custom_signup.html"

    # You can also override some other methods of SignupView
    # Like below:
    # def form_valid(self, form):
    #     ...
    #
    # def get_context_data(self, **kwargs):
    #     ...


account_signup_view = AccountSignupView.as_view()
Enter fullscreen mode Exit fullscreen mode

1.1 URLs

djauth.users.urls.py file:

from django.urls import include, path
from .views import account_signup_view

urlpatterns = [
    ...
    # override the SignupView of django-allauth
    path("accounts/signup/", view=account_signup_view),
    # this is the default config for django-allauth
    path("accounts/", include("allauth.urls")),
    ...
]
Enter fullscreen mode Exit fullscreen mode

1.2 Template

You can use your own page but I'll give a custom_signup.html` page as an example:

djauth/templates/users/custom_signup.html

{% extends "users/base.html" %}

{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block inner %}
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a href="%7B%7B%20login_url%20%7D%7D">sign in</a>.{% endblocktrans %}</p>

</pre>`
   {% csrf_token %}
   {{ form }}
   {% if redirect_field_value %}`

   {% endif %}
  {% trans "Sign Up" %} »


{% endblock %}
Enter fullscreen mode Exit fullscreen mode

Now you can use different template and path for Signup.

All done!

Top comments (0)