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

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

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

✅ [3] Subscribe below to get my upcoming toolkit

Close Menu