TIL: Google Login Django Allauth

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”.

   

   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.

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.

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.