In 5 mins: Set up Google login to sign up users on Django

Here's the setup on adding Google login to your django app

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things.

I work with Python and Django as my tech stacks in building web apps↗️

Today, I want to share about building user registration through Google authentication API.

I will cover the basic setup and keep the context specific to Django app & social login with Gmail. Therefore, this post is ideal for any beginners.

1. How to sign up users on your site ❤️

Users registration is part of the customer onboarding process for tech-based products.

If you’re a beginner in programming, building a custom login might be complex to start.

Luckily, Django comes with a third-party django-allauth package that helps you set up social login in few minutes. 

Google login is fast because it doesn’t require to create a new User account.

Once users access your app via Gmail, you’ll be able to see their email addresses in your backend:

2. Create a django project 😻

Before that happens, let’s create a new directory on desktop and call it “google_login”.

In the new directory, you will need to set up virtual environment, install django, create django project (my_project) and create an app (social_app).

On terminal, use these command lines to proceed:

virtualenv ../Scripts/activate
pip install django
django-admin.py startproject my_project .
python manage.py startapp social_app
python manage.py runserver
python manage.py migrate
python manage.py runserver

To check if your setup works, go to http://127.0.0.1:8000/ in your browser. You should see the default Django page:

3. Install django-allauth 🌲

The django-allauth package will handle authentication that has to do with user’s social account access.

Quit your server with CTRL+C in the terminal to continue next step.

On terminal, use this command to install:

pip install django-allauth

4. Configure settings.py 💎

Next, you’ll need to configure settings.py file in the my_project folder. 

  • First, update the INSTALLED_APPS section:

INSTALLED_APPS = [ 
 ‘django.contrib.admin’,
 ‘django.contrib.auth’, 
 ‘django.contrib.contenttypes’, 
 ‘django.contrib.sessions’, 
 ‘django.contrib.messages’, 
 ‘django.contrib.staticfiles’, 
 ‘django.contrib.sites’,   # <-- 
 ‘social_app’,   # <--  
 ‘allauth’,   # <-- 
 ‘allauth.account’,   # <-- 
 ‘allauth.socialaccount’,   # <--  ‘allauth.socialaccount.providers.google’,   # <--
]
  • At the bottom of settings.py we need to specify the allauth backend:

AUTHENTICATION_BACKENDS = (  ‘django.contrib.auth.backends.ModelBackend’,  ‘allauth.account.auth_backends.AuthenticationBackend’, 
)
  • Continue to add site_id and specify redirect URL upon successful Google login:

SITE_ID = 1
LOGIN_REDIRECT_URL = '/'
  • Finally, enable email scope to receive user’s email addresses after successful social login:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

5. Create templates folder 📂

You’ll need to display a homepage with a link that shows “Sign in with Google”.

  • Set up the Django template folders following the tree level below. You’ll also need to create a new html file index.html:

── social_app
   ── __pycache__
   ── migrations
   ── templates # <-- New Folder
      ── social_app # <-- New Folder
         ── index.html # <-- New File
  • Edit index.html file by adding necessary title, links and tags:

{% load socialaccount %}
<html>
  <head>
    <title>Google Registration</title>
  </head>
  <body>
  <h1>My Google Login Project</h1>
  {% if user.is_authenticated %}
  <p>Welcome, {{ user.username }} !</p>
 
  {% else %}
  <h1>My Google Login Project</h1>
  <a href="{% provider_login_url 'google' %}">Login with Google</a>
  {% endif %}

  </body>
</html>

6. Configure urls.py 🔁

Go to urls.py file of your my_project directory.

  • Add the allauth urls and specify “include” on top of import:

from django.contrib import admin
from django.urls import path, include # <--

urlpatterns = [
 path('admin/', admin.site.urls),
 path('accounts/', include('allauth.urls')), # <--
]
  • Configure Django templates and link to the urls:

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView # <--

urlpatterns = [
 path('', TemplateView.as_view(template_name="social_app/index.html")), # <--
 path('admin/', admin.site.urls),
 path('accounts/', include('allauth.urls')),
]
  • Now, make all the necessary migrations for the changes you’ve made:

(my_project) $ python manage.py makemigrations
(my_project) $ python manage.py migrate

7. Google OAuth setup 🚀

To add Google login on your app, you’ll need to set up OAuth application via Google Developers Console

Getting started

  • Go to Dashboard, create a NEW PROJECT

  • Name your new project, preferably your website or app name. User will be able to see this project name when we redirect them to Google login page. 

  • Click “CREATE” to proceed.

API Library

  • Back to your Dashboard > click “Enable APIs and Services”

  • You’ll see a “Welcome to the API Library” screen. Search for this API “Google+ API”. 

  • Then click “ENABLE” button (mine is MANAGE because I’m using this API).

APIs Credentials

  • Back to Dashboard, go to “Credentials” on left panel. 

  • Create credentials. On the dropdown, choose “OAuth Client ID” option.

OAuth consent screen

  • Make sure you fill out the “OAuth Consent Screen” form. 

  • You’ll only need to provide “Application name”, “Email” and click “SAVE”.

Create OAuth client ID

Obtain OAuth client 

  • Once you click “CREATE”, you will be able to obtain your “client ID” and “client Secret”. 

  • You’ll need this information to proceed the next steps

8. Django admin 👮‍♀️

We’ll need to configure Django admin. To access the admin panel, you’ll need to create a superuser to login. Type this command on terminal:

(my_project) $ python manage.py createsuperuser

You’re required to provide “username”, “email” and “password” in the terminal. Once you’re done, proceed to start the server:

(my_project) $ python manage.py runserver

Go to http://127.0.0.1:8000/admin to access your admin page. Make sure you provide the credentials to login.

After successful login, your admin page should look like this:

Add a site

On the SITES section, click “sites” and fill out the details and click “Save”:

  • Domain name: 127.0.0.1:8000

  • Display name: 127.0.0.1:8000

Add social applications

Back to admin homepage, under “SOCIAL ACCOUNTS” section, click “Social applications” to fill out these settings:

  • Provider: Google

  • Name: Google API

  • Client id: (refer step 7, your OAuth details)

  • Secret key: (refer step 7, your OAuth details)

9. See the result 👏

You’re almost done! Now navigate to http://127.0.0.1:8000/ to see the “Sign in with Google” page.

Try to access the Google login, you should be able to see the redirect screen:

After successfully signed in with Google, you should be able to see your Google account name on the homepage:

Try to sign in with another Google account via http://127.0.0.1:8000/accounts/google/login/, you’ll see the user name changed accordingly:

👉 [1] Share this article with your friends

😍 [2] Find me on Personal Site / TwitterLinkedIn