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 OAuth. I also vlog this in video↗️

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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 = 1LOGIN_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 API console🚀

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.
Image for post
Image for post

APIs Credentials

  • Back to “Dashboard”, go to “Credentials” on left panel.
  • Create credentials. On the dropdown, choose “OAuth Client ID” option.
Image for post
Image for post

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”.
Image for post
Image for post

Create OAuth client ID

  • Now, you can create your OAuth Client ID by filling out these details;
  • Authorized Javascript origins (http://127.0.0.1:8000)
  • Authorized redirect URL (http://127.0.0.1:8000/accounts/google/login/callback/)
Image for post
Image for post

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
Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

10. Where to find me? 👉

[1] If you love this article & feeling generous, send me a coffee? ☕

[2] Find me on Personal Site / Twitter / LinkedIn 🔥

[3] In case you miss out, I can send my upcoming resources to your inbox — Click here to join my newsletter ↗️

🚀Built “I Lazy To Read” Product Hunt #1, Lifehacker + tech blogs in 7 countries. Product & community consulting US/APAC startups. 👉About me: whizzoe.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store