Django User Registration with Google

OAuth, short for Open Authorization, is a mechanism that enables websites or applications to exchange user data with other platforms, all without necessitating the disclosure of a user’s password. It empowers users to access multiple websites with a single set of login credentials.

Prominent OAuth service providers include Google, Facebook, and GitHub. In this tutorial, we will explore the process of user registration within a Django application using Google OAuth as our chosen authentication method.

Prerequisites

To follow along with this article, you will need to have the following:

A GitHub account.

Python, pip and Django installed

Visual Studio Code — Integrated Development Environment(IDE)

Step 1 — Create and set up a new Django project

Create a folder(directory) and name it google-Oauth. Inside of this folder create a virtual environment:

python -m venv venv

You can name your virtual environment anything. In this case, I named it ‘venv’.

For Windows OS activate the virtual environment using:

venv\Scripts\activate

For Linux and mac OS use:

source venv/bin/activate

Or:

. venv/bin/activate

On activation, install django:

pip install django

Create a django project:

django-admin createproject auth_project .

Create a django app:

django-admin createapp auth_app

Add ‘auth_app’ to the INSTALLED_APPS array:

Apply and migrate this changes to SQLite:

python manage.py migrate

Step 2 — Install and set up django-allauth

Install the django-allauth

pip install django-allauth

Add it to the INSTALLED_APPS array:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites', //add this line too

    'auth_app',

    //all auth configurations
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google'
]

The last item of this array specifies the django-allauth provider you will use which in this case is google. django-allauth also supports other providers.

Add AUTHENTICATION_BACKENDS to settings.py at the bottom of your page:

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend'
]

Add SOCIALACCOUNT_PROVIDERS configurations array to settings.py:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE' : [
            'profile',
            'email'
        ],
        'APP': {
            'client_id': os.environ['CLIENT_ID'],
            'secret': os.environ['CLIENT_SECRET'],
        },
        'AUTH_PARAMS': {
            'access_type':'online',
        }
    }
}

The SCOPE outlines the required parameters for Google APIs. In the absence of a specified scope, it will default to ‘profile.’ To enable background authentication refresh, configure AUTH_PARAMS[‘access_type’] as ‘offline.’

Add SITE_ID and redirect users to the base route after a successful login or logout.

SITE_ID = 2

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'

Step 3 — Create and configure templates

In this project we will use django templates to view our code. In auth_app, create a folder called ‘templates’. Django has an inbuilt mechanism that will find this templates folder.

Replace this TEMPLATES array in settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

with:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR/'templates'], //updated line
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Inside of ‘templates’ folder in auth_app create an index.html file.

Add the following code to it:

{% load socialaccount %} //make sure to add this
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="text-align: center;"> My google OAuth Project </h1>
    {% if user.is_authenticated %}
    <p>Welcome. You are logged in as {{user.username}} </p>
    {% else %}
    <a href="{% provider_login_url 'google' %}">Login with Google</a>
    {% endif %}
</body>
</html>

Step 4 — Configure Project URLs

Inside of auth_project/urls.py define the urlpatterns:

from django.contrib import admin
from django.urls import path,include
from django.views.generic import TemplateView // useful in displaying index.html template
from django.contrib.auth.views import LogoutView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app/',include('auth_app.urls')), //app_auth urls

    path('', TemplateView.as_view(template_name='index.html')),
    path('accounts/', include('allauth.urls')), // all OAuth operations will be performed under this route
    path('logout', LogoutView.as_view()) // default Django logout view at /logout
]

Step 5— Create and configure a new Google APIs project

Head over to google developer APIs console and navigate to NEW PROJECT under ‘select project’

Set your app name and user support email in the OAuth Consent Screen

Switch to the Credentials tab and configure the following.

Note that its http and not https.

At this point create a .env and a .gitignore file in the root folder (google-Oauth) of your application. We will store our environment variables(secrets) in this file.

In your .gitignore file add the following lines. This will prevent git from pushing this code to GitHub as this folders will be ignored.

venv/
/.env

In your .env add the following:

This will be found in the Credentials tab:

To access the environment variables download load_dotenv from pip

pip install python-dotenv

In settings.py add this

import os
from pathlib import Path
from dotenv import load_dotenv

load_dotenv()

This will make it possible for django to locate the environment variables. In this case:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE' : [
            'profile',
            'email'
        ],
        'APP': {
            'client_id': os.environ['CLIENT_ID'], // in .env file
            'secret': os.environ['CLIENT_SECRET'], // in .env file
        },
        'AUTH_PARAMS': {
            'access_type':'online',
        }
    }
}

Migrate this configurations:

python manage.py migrate

Step 6— Configuring admin site

Create super user:

python manage.py createsuperuser

Follow the prompts to create the superuser.

Run the server

python manage.py runserver

In your browser, open http://127.0.0.1:8000/admin and login with the superuser details and set the domain as well as display names like this.

Select social applications tab and configure it like this:

To test out if the installation was successful, log out on the top right and log in again but with google this time.

Since django already has a pre-made site(example.com) as seen above. The SITE_ID setting in settings.py might bring errors if its value is 1. Makes sure its value is 2.

SITE_ID = 2

On logging out, log in with google, your application will ask you to do so with your google account. This information will be saved in your auth_user table of your database. You can also confirm this by checking http://127.0.0.1:8000/admin/socialaccount/socialaccount/

Conclusion

In this article, you learned how to start and configure a django project as well as adding Google Oauth for auth_users.
You configured your google developer APIs console with the right details.

The code is available on GitHub. I hope this article was beneficial to you. If so, leave a github star.

Happy coding.