Using Third Party Django Admins¶

Django has a great ecosystem, and many third-party apps are available to completely replace the default UI for Django Admin. We are trying to make Django Google SSO compatible as much as possible with these third-party apps. We can divide these apps broadly into two categories: apps which use the original Django Admin login template and apps with custom login templates.

How can I know if the third app has a custom login template?

Check if the app code contains the templates/admin/login.html file. If the file exists, the app has a custom login template.

For these apps, Django Google SSO will work out of the box. You don't need to do anything special to make it work.

Some examples:

For these apps, you will need to create your own admin/login.html template to add both HTML from the custom login.html from the custom package and from this library, using this basic guideline:

Create a custom `templates/admin/login.html` template¶

Suppose the templates/admin/login.html from the 3^rd party app is using this structure:

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

{% block my_form %}
    <form method="post" action="{% url 'admin:login' %}">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Log in">
{% endblock %}

Please add on your project the templates/admin/login.html template:

{% extends "admin/login.html" %}

{% block my_form %} {# Use the name of the block from the third-party app #}
    {{ block.super }} {# this will include the 3rd party app login.html content #}
    {% include "google_sso/login_sso.html" %} {# this will include the Google SSO login button #}
{% endblock %}

Now, let's add support to the SSO_SHOW_FORM_ON_ADMIN_PAGE option. To do this, update the code to include our show_form tag:

{% extends "admin/login.html" %}
{% load show_form %}

{% block my_form %} {# Use the name of the block from the third-party app #}
    {% define_show_form as show_form %}
        {% if show_form %}
            {{ block.super }} {# this will include the 3rd party app login.html content #}
        {% endif %}
    {% include "google_sso/login_sso.html" %} {# this will include the Google SSO login button #}
{% endblock %}

This is a basic example.

In real cases, you will need to understand how to find the correct elements to hide, and/or how to correct positioning the SSO buttons on the 3^rd party app layout. Use the real life example from django-unfold described below.

Also, make sure you understand how Django works with Template inheritance and How to override templates.

To this date, Django Google SSO provides support out of the box for these apps with custom login templates:

Django Unfold

For the Django Unfold this is the code used on our login template:

{% extends "admin/login.html" %}
{% load static %}
{% load sso_tags %}
{% load show_form %}
{% load i18n %}

{% block extrastyle %}
    {{ block.super }}
    {% define_sso_providers as sso_providers %}
    {% for provider in sso_providers %}
        <link rel="stylesheet" href="{{ provider.css_url }}">
    {% endfor %}
{% endblock %}

{# Default Django Admin Block #}
{% block content %}
    {% define_show_form as show_form %}
    {% if show_form %}
        {{ block.super }}
    {% endif %}
    {% include 'google_sso/login_sso.html' %}
{% endblock %}

{# Django Unfold Admin Block #}
{% block base %}
    {{ block.super }}  {# Process HTML login elements from Django Unfold #}
    {% include 'google_sso/login_sso.html' %} {# Add Google SSO HTML elements #}
    <script>
        {% define_show_form as show_form %}
        {% if show_form %}
            $(document).ready(function() {
                $(".login-box").insertAfter("#login-form");
            });
        {% else %}
            $("#login-form").remove();
            $(document).ready(function() {
                $(".login-box").insertAfter(".font-semibold.mb-10");
            });
        {% endif %}
    </script>
{% endblock %}

And this is the CSS you can use to customize your login button (you will need to create your custom static/django_google_sso/google_button.css/ to work):

/*

  Please rename this file to google_button.css to override works.
  This CSS is compatible with Django Unfold CSS

  login-btn
  ---------------------------------
  | --------------                 |
  | | btn-logo   |    btn-label    |
  | --------------                 |
  ----------------------------------
*/

/* Login Button Area */
.login-btn-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 382px;
}

/* Goggle Login Button */
.google-login-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #9233e7;
    border-radius: 6px;
    padding: 2px;
    margin-bottom: 20px;
    width: 100%;
    height: 38px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* Google Login Button Hover */
.google-login-btn:hover {
    background-color: #254f89;
}

/* Google Login Button Remove Decoration */
.google-login-btn a {
    text-decoration: none;
}

/* Google Login Button Logo Area */
.google-btn-logo {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 4px;
}


/* Google Login Button Label Area */
.google-btn-label {
    color: #ffffff;
    margin-top: -1px;
    width: 100%;
    text-align: center;
    padding: 0 10px;
}

Using Third Party Django Admins¶

Apps with use original Django Admin login template¶

Apps with custom login template¶

Create a custom templates/admin/login.html template¶

Current Custom Login Apps support¶

Create a custom `templates/admin/login.html` template¶