Users - AllAuth

Django AllAuth

Installation and setup

To learn how to install and set up AllAuth see the Installation section.

Allauth url mappings

{% url 'account_signup' %}
{% url 'account_login' %}
{% url 'account_logout' %}
{% url 'account_reset_password' %}
{% url 'account_email' %}

Display user email

As the email used by allauth for authentication can be different than the user email stored in the User model, instead of using user.email use this code:

{{ user.emailaddress_set.first.email }}

Customize AllAuth templates

Step 1: Copy Allauth Templates

Navigate to the folder one level above your project root folder.
Go to virt\Lib\site-packages\allauth\templates and copy the entire account folder.
Paste the copied account folder to ROOT\templates.

Step 2: Update TEMPLATES in settings.py

In your project's settings.py file, scroll down to the TEMPLATES section.
Add the following line to the DIRS list: os.path.join(BASE_DIR, 'templates', 'allauth').
Your TEMPLATES section should look something like this:

TEMPLATES = [
  {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'templates', 'allauth')],
      ...
  },
]

Step 3: Add Bootstrap to the Allauth Base Template

Navigate to the Bootstrap website and obtain the current CSS and JS links.
Open ROOT\templates\account\base.html in your code editor.
Paste the CSS and JS links you obtained from the Bootstrap website inside the head section of the template.

Step 4: Customize Allauth Templates

Open the Allauth templates located in ROOT\templates\account
Edit the templates as desired to fit the design and layout of your website.

Our example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
  </head>
  <body>
    <div class="container mt-5" style="width: 35rem;">
      {% block body %}

        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          {% endfor %}
        {% endif %}
        
        <div class="card">
          <div class="card-header text-center">
            {% if user.is_authenticated %}
              <a class="btn btn-sm btn-outline-primary" href="{% url 'account_email' %}">Change E-mail</a>
              <a class="btn btn-sm btn-outline-primary" href="{% url 'account_logout' %}">Sign Out</a>
            {% else %}
              <a class="btn btn-sm btn-outline-primary" href="{% url 'account_login' %}">Sign In</a>
              <a class="btn btn-sm btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
            {% endif %}
          </div>
          <div class="card-body">
            {% block content %}
            {% endblock %}

            {% endblock %}
            {% block extra_body %}
          </div>
        </div>
        
      {% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>