Social account signup and login with allauth in Django

We pick Google and LinkedIn from the dozens of providers that allauth supports. In general allauth needs a client ID and a secret key from each provider, in addition you need to set a valid callback url for your application with each provider. For Google the instructions are here. Just a quick overview here; there are a couple of steps:

you have to register your domain with Google and add that in the Google console; for this you need access to your domain registrar settings
in the Google console you have to create a new project
for this project you have to fill in the OAuth consent screen, with information like application name and logo, the scope of the access you need from Google (only email and profile, which is the default), a link to the home page and the privacy policy
still in the console, in the Credentials tab you have to create new credentials; choose OAuth Client ID, this will create the client ID and the client secret you need

Google's verification process can take 4-6 weeks, so it's a good idea to start this early.

For LinkedIn the instructions are here. Steps:

go to the developers page of LinkedIn and create a new app
besides information like name, logo, link to privacy policy, you have to associate the app with a company that is present on LinkedIn; so if yours isn't yet, you need to do that first
when the app is created it is available on the apps page and the client ID and client secret can be found in the Auth tab

Once everything is set up at Google and LinkedIn, go to your settings file (in our project base.py) and tell Django about the social accounts by putting the following in INSTALLED_APPS:

'allauth.socialaccount.providers.google',
'allauth.socialaccount.providers.linkedin_oauth2',

The client IDs and secret keys need to be filled in via your admin, in social accounts / social applications. Although the docs also mention the possibility of specifying them via an APP parameter in the settings, I did encounter some unexpected behavior with that. Although not strictly necessary we will define SOCIALACCOUNT_PROVIDERS in our settings for the Google and LinkedIn parameters. E.g. for Google the scope is 'profile' and 'email', since we want access to the email address to log in (ACCOUNT_EMAIL_REQUIRED = True in allauth configuration). So put the following in your settings file:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
    },
    'linkedin': {
        'SCOPE': [
            'r_basicprofile',
            'r_emailaddress'
        ],
        'PROFILE_FIELDS': [
            'id',
            'first-name',
            'last-name',
            'email-address',
            'picture-url',
            'public-profile-url',
        ],
    },
}

The default behavior of the social account signup is that allauth tries to log the user in after the connection to the social account has been made. This is something you may not want, when you want the user to fill in some required fields that the social account cannot provide (e.g. display name). In order to change this, put in your settings:

SOCIALACCOUNT_AUTO_SIGNUP = False

This brings up a signup form that the user has to complete before being signed up.

Time to add the links to the providers to our signup and login templates. The logic for this can be copied from allauth's login.html file. Add the following to your login.html:

{% load socialaccount %}

{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
    <br>
    <p>{% blocktrans with site.name as site_name %}or sign in with one of your existing third party accounts:{% endblocktrans %}</p>
    {% include "socialaccount/provider_list.html" with process="login" %}
{% endif %}

This shows a list of social account providers (if any). We also want to give our users the possibility to sign up with social accounts, so also add this snippet to signup.html; change the line or sign in with … to or sign up with …. Now copy the file snippets/provider_list.html from allauth. The url name provider_login_url will take care of the login process. Note that in our login template we have set process = "login", which is for new users.

In provider_list.html the links to provider names are texts: {{ brand.name }} and {{ provider.name }}. Here we'll replace these with images:

<img border="0" alt="{{ brand.name }}" src="{% static 'images/'%}{{ brand.name }}logo" width="40" height="40">
<img border="0" alt="{{ provider.name }}" src="{% static 'images/' %}{{ provider.name }}logo" width="40" height="40">

We have downloaded Google's and LinkedIn's logos and renamed them Googlelogo.png and LinkedInlogo.png. Put them in the images/ subdirectory of your app's static/ directory; create the directory if it is not yet there. Don't forget to register the images/ directory in your settings with (our app is called userauth):

STATICFILES_DIRS = [
    …
    os.path.join(BASE_DIR, 'userauth/static/userauth/'),
]

We can also offer existing users to connect their account to a social account. In a previous tutorial we have made a template update.html. Add the following code to this:

<div>
    <p>{% blocktrans with site.name as site_name %}Connect your account with one of your existing third party accounts:{% endblocktrans %}</p>
    {% include "socialaccount/provider_list.html" with process="connect" %}
</div>

Again we use the template provider_list.html but now with the process connect. After a user with an existing account successfully connects to one of his social accounts, he/she is brought to an overview page socialaccount/connections.html. Copy and restyle this file as well.

Now try out logging in at /accounts/login/, signing up at /accounts/signup/ and connecting a social account to your existing account at the update page; everything should work as expected.

The package allauth can do much more, such as manage multiple email addresses and signaling, but we leave it at this. If you want to have your authentication in multiple languages, read on.