TIL: Google Login Django Allauth

Published on January 29th, 2024

I often find myself needing to implement Google OAuth in Django projects but keep forgetting the exact steps. So, I'm documenting the process here for future reference.

Step 1: Install django-allauth

First, install django-allauth using Docker Compose:

docker compose exec web pipenv install django-allauth

Step 2: Update Django Settings

Modify your settings.py file to include allauth and allauth.socialaccount:

# settings.py

INSTALLED_APPS = [
    ...
    "allauth.socialaccount",
    "allauth.socialaccount.providers.google",
    ...
]

MIDDLEWARE = (
    ...
    "allauth.account.middleware.AccountMiddleware",
)

SOCIALACCOUNT_LOGIN_ON_GET = True
SOCIALACCOUNT_EMAIL_REQUIRED = False
if DEBUG:
    SOCIAL_AUTH_REDIRECT_IS_HTTPS = False
    ACCOUNT_DEFAULT_HTTP_PROTOCOL = "http"
else:
    SOCIAL_AUTH_REDIRECT_IS_HTTPS = True
    ACCOUNT_DEFAULT_HTTP_PROTOCOL = "https"

Step 3: Update URL Patterns

In urls.py, include the allauth URLs:

#urls.py
urlpatterns = [
    ...
    path('accounts/', include('allauth.urls')),
    ...
]

Step 4: Database Migrations

Run migrations to apply the changes:

docker compose exec web python manage.py migrate

Step 5: Set up Google Cloud Credentials

Next, navigate to the Google Cloud Dashboard to create your credentials.

  1. Create a new project.

  2. Click on “Configure consent screen”.

    Google OAuth Consent Screen

    Follow the steps, but avoid adding a logo to bypass Google verifications.

  3. Under Scopes, add:

    • https://www.googleapis.com/auth/userinfo.email
    • https://www.googleapis.com/auth/userinfo.profile

    Continue following the steps.

Creating Credentials

Navigate to Credentials > OAuth 2.0 Client IDs > CREATE CREDENTIALS > OAuth client ID. Enter the following:

  • Authorised JavaScript origins:

    • https://www.yourdomain.com
  • Authorised redirect URIs:

    • https://www.yourdomain.com
    • https://www.yourdomain.com/accounts/google/login/callback/
    • http://localhost:8000/accounts/google/login/callback/

Now, add your keys to settings.py using environment variables:

#settings.py

SOCIALACCOUNT_PROVIDERS = {
    "google": {
        "APP": {
            "client_id": "<your-client-id>",
            "secret": "<your-client-secret>",
            "key": "",
        },
        "SCOPE": [
            "profile",
            "email",
        ],
        "AUTH_PARAMS": {
            "access_type": "online",
        },
    }
}

Testing and Publishing

During testing, you'll see a message until you click in the OAuth consent screen settings.

OAuth Consent Warning

After testing, you can publish your app. Without a logo, the process is instantaneous, and you don’t need to submit it to Google for verification.

Publishing OAuth App

Adding the Login Button

Finally, add the Google login button anywhere in your templates:

{% load socialaccount %}
<a href="{% provider_login_url 'google' %}">Continue with Google</a>

And that's it! You've successfully integrated Google OAuth into your Django project.