Django Social Login with Github Example

Hi Dev,

In this tute, we will discuss django-allauth github tutorial. I would like to show you django social login with github example. This tutorial will give you simple example of django allauth social login. I would like to share with you django github authentication using django-allauth. So, let's follow few step to create example of django login with github example.

So, Open Authorization (OAuth) is a service that allows websites or apps to share user information with other websites without being given a users password. Users can log in to multiple websites with the same account without creating other credentials.

As we know OAuth service providers Google, Facebook and GitHub. In this tutorial, we look at registering users in a Django app using Google OAuth.

So if you want to also implement login with github gmail account then i will help you step by step instruction. let's follow tutorial and implement it.

Step 1: Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example

Step 2: Create a App

Now we'll create a single app called polls to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.

python manage.py startapp core

Step 3: Installing Django Allauth

The django-allauth is an integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.

pip install django-allauth

Step 4: Configuring Django Allauth

In this step we need to configuring after installing the package, register django-allauth by adding it to INSTALLED_APPS in settings.py

INSTALLED_APPS = [
    'core',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "django.contrib.sites",  # new

    # 3rd party
    "allauth", # new
    "allauth.account", # new
    "allauth.socialaccount", # new
    # social providers
    "allauth.socialaccount.providers.github", # new
    "allauth.socialaccount.providers.twitter", # new
]

AUTHENTICATION_BACKENDS = (
    "allauth.account.auth_backends.AuthenticationBackend",
)

SITE_ID = 1
ACCOUNT_EMAIL_VERIFICATION = "none"
LOGIN_REDIRECT_URL = "home"
ACCOUNT_LOGOUT_ON_GET = True

Step 5: Create GitHub App

To begin with, we must build an OAuth application and obtain the OAuth keys from GitHub. To establish a new OAuth application, sign in to your GitHub account and go to https://github.com/settings/applications/new

Application name: example
Homepage URL: http://127.0.0.1:8000
Callback URL: http://127.0.0.1:8000/accounts/github/login/callback

Simply select "Register application." Your app will be redirected to you. Note the Client Secret and Client ID:

after create account you can copy client id and secret.

Step 6: Add a social app in Django admin

In this step create a superuser by running the following command in a terminal.

python manage.py createsuperuser

Run the app using:

python manage.py runserver

Here, Open http://127.0.0.1:8000/admin and login to Django Admin. Under Sites click Add and put 127.0.0.1:8000 as both the Domain name and Display name.

Then, under Social Applications click Add and fill in the details as follows:

1. Choose GitHub as the Provider
2. Add a name
3. Add the Client ID and Client Secret (to Secret key) obtained earlier
4. Add example.com as one of the Chosen Sites

Step 7: Creating the Views

In this step, we need to create the views for performing fetch record to the database.Open the core/views.py file and add:

from django.shortcuts import render
from django.views.generic import TemplateView

# Create your views here.

class Home(TemplateView):
    template_name = "home.html"

Step 8: Creating the Templates

Here, in this step we need to create a new folder named core in the templates folder of core.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django Social Login</title>
  </head>
  <body>
    {% block content %} {% endblock content %}
  </body>
</html>

Next, open the core/templates/home.html file and the add:

{% extends '_base.html' %} {% load socialaccount %}

{% block content %}
<style type="text/css">
    body{
        background-color: #f7fcff;
    }
</style>
<div class="container" style="text-align: center; padding-top: 10%;">
  <h1>Django Authentication with Github Example</h1>

  <br /><br />

  {% if user.is_authenticated %}
    <p style="font-size: 30px;">Hello, <strong>{{ user.username }}</strong> !!!</p>
    <br /><br />
    <a href="{% url 'account_logout' %}" class="btn btn-danger">Logout</a>
  {% else %}
    <!-- GitHub button starts here -->
    <a href="{% provider_login_url 'github' %}" class="btn btn-primary">
      <i class="fa fa-github fa-fw"></i>
      <span>Login with GitHub</span>
    </a>
    <!-- GitHub button ends here -->
  {% endif %}
</div>

{% endblock content %}

Step 9: Creating URLs

In this section, we’ll create the urls to access our views.Go to the urls.py core/urls.py file and update it as follows:

from django.urls import path
from .views import Home # new


urlpatterns = [
    path("", Home.as_view(), name="home"), # new
]

Next, we will require the modify the urls.py your root preoject folder lets update the file.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('core.urls')),
    path('accounts/', include('allauth.urls')),
]

Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python manage.py runserver

Next, go to the http://localhost:8000/ address with a web browser.

I Hope It will help you....