Django AllAuth Chapter 3 - Social login with Django AllAuth

Django AllAuth also simplifies the integration with a lot -really, A LOT- of third party authentication platforms, like Google, Facebook, Microsoft, Github, etc. Let's see how to integrate Google login in our demo application.

List of chapters

• Chapter 1 - The All-in-one solution for Auth in Django
• Chapter 2 - How to install and configure Django AllAuth
• Chapter 3 - Social login with Django AllAuth ←This one!
• Chapter 4 - Customizing Django AllAuth UI
• Chapter 5 - Extending Django AllAuth user model with custom fields

Configuring an OAuth application on Google

First, we need to configure an OAuth (Open Authorization) application in Google cloud servers. All the process is explained in detail in https://developers.google.com/identity/protocols/oauth2, and involves the following steps:

• Log into you Google Developer account at https://console.cloud.google.com/apis/dashboard

• Create a new application or select an existent one

• Select "credentials" on the sidebar and create a new "OAuth client ID" selecting "Web application" as it type. Fill with the correct URLs (the return url "/accounts/google/login/callback/" is an internal AllAuth managed URL) and annotate the client ID and secret.

• Then, select "OAuth consent screen on the sidebar and configure the app name as shown to the users, and select a logo. Also, configure the e-mails allowed for testing in the development phase.

With these simple steps, after a while our OAuth Google Authentication will be ready to be integrated in our AllAuth application.

Integrating the Google authentication with AllAuth

Now, open the Django app main settings file (settings.py) and add a new block, writing the ClientID and secret obtained from Google before:

# Provider specific settings
SOCIALACCOUNT_PROVIDERS = {
   'google': {
       'APP': {
           'client_id': 'xxxxxxxxxxxx.apps.googleusercontent.com',
           'secret': 'GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx',
           'key': ''
       }
   }
}

Also, add the AllAuth social modules to active apps if not already configured:

INSTALLED_APPS = [
   (...)

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

   'demo'
]

And add a bunch of extra settings to configure the behavior of AllAuth at the end of the settings file:

# AllAuth settings
SITE_ID = 1         

ACCOUNT_LOGIN_REDIRECT_URL ="/"
ACCOUNT_LOGOUT_REDIRECT_URL ="/"

ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = False
ACCOUNT_PASSWORD_MIN_LENGTH = 8
ACCOUNT_DEFAULT_HTTP_PROTOCOL='https'
ACCOUNT_LOGOUT_ON_GET = True

SOCIALACCOUNT_EMAIL_REQUIRED = True
SOCIALACCOUNT_EMAIL_VERIFICATION = False
SOCIALACCOUNT_EMAIL_AUTHENTICATION = True
SOCIALACCOUNT_LOGIN_ON_GET=True
SOCIALACCOUNT_AUTO_SIGNUP = True

And that's all! Awesome!

Testing the social login

Open the preview of the app on IDX and navigate to /accounts/login/:

Click on the "Google" social login, we will be redirected to the well known Google login page, yay! Select your google account and click on "login" button to finalize the social login.

Google will redirect the user to the internal AllAuth login page that will finalize the process and redirect the user to the internal protected page.

The process is simple and works great, but the default interface is intentionally simple and ugly. In the next chapter we will learn how to customize it.

About the list

Among the Python and Docker posts, I will also write about other related topics (always tech and programming topics, I promise... with the fingers crossed), like:

• Software architecture
• Programming environments
• Linux operating system
• Etc.

If you found some interesting technology, programming language or whatever, please, let me know! I'm always open to learning something new!

About the author

I'm Andrés, a full-stack software developer based in Palma, on a personal journey to improve my coding skills. I'm also a self-published fantasy writer with four published novels to my name. Feel free to ask me anything!