Django Social Auth using django-allauth

Adding social authentication in your web app can be challenging. But using django-allauth, one of the most commonly used Django package, this becomes straightforward.

djago-allauth provides extensive official documentation but a user trying it for the first time can feel a little lost as it contains a lot of providers and optional configurations.

By following this guide you should be able to add a social auth button on your website in less than 15 minutes (if you already have the social provider credentials). This guide uses Google login as an example but the process is similar for all other providers.

Let’s get started.

Go to your project’s root directory.

Install django-allauth.

pip install "django-allauth[socialaccount]"

Go to settings.py.

Add the following apps to INSTALLED_APPS.

'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',

You need to change the last app depending on the provider you want to integrate. django-allauth supports a lot of providers. For example, for Facebook it will be allauth.socialaccount.providers.facebook.

Add the following to MIDDLEWARE

"allauth.account.middleware.AccountMiddleware",

Add the following so that the email ids of users are also captured.

ACCOUNT_EMAIL_REQUIRED = True

Run migrations.

python manage.py makemigrations
python manage.py migrate

You should now see 4 new tables in your admin panel - Email addresses, Social accounts, Social application tokens, Social applications

To configure a social provider, you first need to register on their website and get the credentials. This page in django-allauth documentation provides you with all the information on how to register and get these credentials for any provider.

Once you have the credentials, you have two options. You can either add them in the Social applications table in your admin panel. Or you can add them in the settings.py file, like so.

SOCIALACCOUNT_PROVIDERS = {
    "google": {
        "APP": {
            "client_id": os.environ["GOOGLE_AUTH_CLIENT_ID"],
            "secret": os.environ["GOOGLE_AUTH_SECRET"],
        }
    }
}

These configurations might vary slightly, depending on the provider. The url shared above contains all this information.

Add the following path to the urlpatterns in urls.py.

path("accounts/", include("allauth.urls")),

Basic configuration is done, now let’s add the login button.

Add this tag to the template where you want to show the Login button.

{% load socialaccount %}

Add the following to the same template.

<a href="{% provider_login_url "google" action="reauthenticate" %}">Sign in using Google</a>

On clicking this button, you are taken to the /accounts/google/login url. And then, on clicking continue, you get the Sign in with Google screen. If you get an error, make sure that the redirect url is configured properly on the provider website where you registered to get the credentials.

For Google, the redirect url looks like this (if your server is running on localhost:8000)

http://localhost:8000/accounts/google/login/callback/

If you want to skip the /accounts/google/login page and want to login directly by clicking on the login button that you just added, add the following to settings.py.

SOCIALACCOUNT_LOGIN_ON_GET = True

This is False by default because of the security considerations. This is what the official documentation says

It controls whether or not the endpoints for initiating a social login (for example, “/accounts/google/login/”) require a POST request to initiate the handshake. For security considerations, it is strongly recommended to require POST requests.

Set the url where you want to redirect the user after successful login, by adding the following in settings.py.

LOGIN_REDIRECT_URL = "view_name"

Replace view_name with the name of the url defined in urls.py.

Now add the following in the template where you want to show the Logout option.

<a href="{% url "account_logout" %}">Logout</a>

You will notice that just like in the login flow, on clicking Logout, you are first taken to /accounts/logout/ and then on clicking Sign Out, you are logged out.

To remove the confirmation step, add the following in settings.py

ACCOUNT_LOGOUT_ON_GET = True

This is also False by default because of the security considerations just like SOCIALACCOUNT_LOGIN_ON_GET.

The integration is complete. Now you should be able to login and logout using social auth.

Django Social Auth using django-allauth

Configure a social provider