How to override the templates of `django-two-factor-auth` for Django Admin?

Question

How to override the templates of `django-two-factor-auth` for Django Admin?

374 Views Asked by Super Kai - Kazuya Ito At 05 April 2025 at 16:24

I'm trying to override the templates of django-two-factor-auth for Django Admin but I don't know how to do it. *I don't have frontend with Django. Instead, I have frontend with Next.js and backend with Django.

This is my django project:

django-project
 |-core
 |  |-settings.py
 |  └-urls.py
 |-my_app1
 |  |-models.py
 |  |-admin.py
 |  └-urls.py
 └-templates

And, how I set django-two-factor-auth following the doc is first, I installed django-two-factor-auth[phonenumbers]:

pip install django-two-factor-auth[phonenumbers]

Then, set these apps below to INSTALLED_APPS, OTPMiddleware to MIDDLEWARE, LOGIN_URL and LOGIN_REDIRECT_URL in core/settings.py as shown below:

# "core/settings.py"

INSTALLED_APPS = [
    ...
    'django_otp', # Here
    'django_otp.plugins.otp_static', # Here
    'django_otp.plugins.otp_totp', # Here
    'two_factor' # Here
]

...

MIDDLEWARE = [
    ...
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django_otp.middleware.OTPMiddleware', # Here
    ...
]

LOGIN_URL = 'two_factor:login' # Here

# this one is optional
LOGIN_REDIRECT_URL = 'admin:index' # Here

...

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates',
        ],
        ...
    },
]

Then, set the path below to core/urls.py:

# "core/urls.py"

...
from two_factor.urls import urlpatterns as tf_urls

urlpatterns = [
   ...
   path('', include(tf_urls)) # Here
]

Finally, migrate:

python manage.py migrate

And, this is Login page:

http://localhost:8000/account/login/

My questions:

How can I override the templates of django-two-factor-auth for Django Admin?
Are there any recommended customizations for the templates of django-two-factor-auth for Django Admin?

Original Q&A

There are 1 best solutions below

**Super Kai - Kazuya Ito** · Answer 1

You can override the templates of django-two-factor-auth for Django Admin by copying two_factor folder from two_factor/templates/two_factor/ in your virtual environment to templates folder as shown below:

django-project
 |-core
 |  |-settings.py
 |  └-urls.py
 |-my_app1
 |  |-models.py
 |  |-admin.py
 |  └-urls.py
 └-templates
    └-two_factor # Here
       |-core
       |  |-backup_tokens.html
       |  |-login.html
       |  |-otp_required.html
       |  |-phone_register.html
       |  |-setup_complete.html
       |  └-setup.html
       |-profile
       |  |-disable.html
       |  └-profile.html
       |-twilio
       |  |-press_a_key.xml
       |  |-sms_message.html
       |  └-token.xml
       |-_base_focus.html
       |-_base.html
       |-_wizard_actions.html
       └-_wizard_forms.html

Finally, set BASE_DIR / 'templates' to DIRS in TEMPLATES in settings.py as shown below. *My answer explains how to set Django Templates:

# "settings.py"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            BASE_DIR / 'templates', # Here 
        ],
        ...
    },
]

In addition, I recommend to modify _base.html as shown below to remove Provide a template named ... message and to add Home button to go to Home page in Django Admin:

{% "templates/two_factor/_base.html" %}

{% load i18n %} {% <- Add %}

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body> {% ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Remove ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ %}
  {% comment %} <div class="alert alert-success"><p class="container">Provide a template named
    <code>two_factor/_base.html</code> to style this page and remove this message.</p></div> {% endcomment %}
       {% ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Remove ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ %}
  {% block content_wrapper %}
    <div class="container">
      {% block content %}{% endblock %}
    </div>
  {% endblock %}
  {% ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Add ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ %}
  {% if request.user.is_authenticated and request.user.is_staff %}
    <hr>
    <div class="container">
      <div class="row">
        <div class="col text-center">
          <a class="btn btn-success col-3" href="{% url 'admin:index' %}">{% trans "Home" %}</a>
        </div>
      </div>
    </div>
  {% endif %}
  {% ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Add ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ %}
</body>
</html>

And, I recommend to modify login.html as shown below to automatically redirect to Home page in Django Admin if authenticated and the user is staff and to add Go to normal login page and Go to two factor setup page buttons:

{% "templates/two_factor/core/login.html" %}

{% extends "two_factor/_base_focus.html" %}
{% load i18n %}
{% load two_factor_tags %}

{% block extra_media %}
{% ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Add ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ %}
<script>
{% if request.user.is_authenticated and request.user.is_staff %}
location = "{% url 'admin:index' %}";
{% endif %}
</script>
{% ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Add ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ %}
  {{ form.media }}
{% endblock %}

...

       </div>
    {% endif %}
  {% endblock %}
  {% ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Add ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ %}
  <hr>
  {% if request.GET.next == "/account/two_factor/setup/" %}
    <a class="btn btn-block btn-success" href="{% url 'two_factor:login' %}">{% trans "Go to normal login page" %}</a>
  {% else %}
    <a class="btn btn-block btn-success" href="{% url 'two_factor:setup' %}">{% trans "Go to two factor setup page" %}</a>
  {% endif %}
  {% ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Add ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ %}
{% endblock %}

Now, this is Login page:

http://localhost:8000/account/login/

http://localhost:8000/account/login/?next=/account/two_factor/setup/

And, this is Account Security page:

http://localhost:8000/account/two_factor/

How to override the templates of `django-two-factor-auth` for Django Admin?

There are 1 best solutions below

Related Questions in PYTHON

Related Questions in DJANGO

Related Questions in DJANGO-TEMPLATES

Related Questions in DJANGO-ADMIN

Related Questions in DJANGO-TWO-FACTOR-AUTH

Trending Questions

Popular # Hahtags

Popular Questions