DEV Community

Cover image for Django OAuth for Github - Datta Able (free product)
Sm0ke
Sm0ke

Posted on • Originally published at appseed.us

Django OAuth for Github - Datta Able (free product)

Hello coders!

This article mentions the latest features added to Datta Able, an open-source seed project powered by Django. The project has been updated to provide OAuth sign-in using Github, a persistent dark mode (UI improvement), and faster execution in Docker. For newcomers, Django is a powerful backend framework used to code secure and powerful full-stack apps in no time. Thanks for reading!

Adding OAuth sign-in to an existing web app improves the security, and might bootstrap the registration process.

The latest evolutions are visually presented in this short video, published on Youtube.


✨ How to use the product

Being an open-source starter, the fastest way to use or play with the code is to access the public repository (available on GitHub) or use GIT command-line tool to clone the sources. Once the sources are downloaded, Django Datta Able can be started via Docker (using a single line) or using the classic manual build.

This time, the Docker setup will be used, as presented in the project README.

👉 Step 1 - Download the code from the GH repository (using GIT)

$ git clone https://github.com/app-generator/django-datta-able.git
$ cd django-datta-able
Enter fullscreen mode Exit fullscreen mode

👉 Step 2 - Start the APP in Docker

$ docker-compose up --build 
Enter fullscreen mode Exit fullscreen mode

Once the above command is finished, we should be able to access the app in the browser:

Django OAuth via GitHub - Widgets Page (free template)


✨ OAuth for GitHub

This feature is automatically enabled on the login page if the Github secrets (GITHUB_ID, GITHUB_SECRET) are provided in the .env file. If the secrets are valid, the login page exposes a GitHub Icon on the login card to inform users that this sign-in option is available.

# Sample '.env' file (truncated content)

# True for development, False for production
DEBUG=True

...

# If present, the SignIN exposes the Github Login Button
GITHUB_ID= SOME_GH_ID_HERE
GITHUB_SECRET= SOME_GH_SECRET_HERE
Enter fullscreen mode Exit fullscreen mode

The effect in the UI is highlighted below:

Django OAuth via GitHub - Option enable.


✨ How to add OAuth to a Django project

In case anyone finds this feature useful and wants to update an existing app, here are the steps:

👉 Step #1 - Update dependencies to include Django-AllAuth

$ pip install django-allauth
Enter fullscreen mode Exit fullscreen mode

For persistence, the module should be also included in the requirements.txt file.

👉 Step #2 - Update project settings to include allauth modules

# core/settings.py (truncated content)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', 
    'allauth',                                 # OAuth new
    'allauth.account',                         # OAuth new
    'allauth.socialaccount',                   # OAuth new 
    'allauth.socialaccount.providers.github',  # OAuth new 
    'allauth.socialaccount.providers.twitter'  # OAuth new  
]
Enter fullscreen mode Exit fullscreen mode

👉 Step #3 - Added related settings (bottom of the file)

# core/settings.py (truncated content)

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

SITE_ID = 1 
Enter fullscreen mode Exit fullscreen mode

All these settings are required by the AllAuth library.

👉 Step #4 - Include routing provided by AppAuth

For Django Datta Able this update was made in the authentication/urls.py :

# apps/authentication/urls.py (truncated content)

urlpatterns = [
    path('login/', login_view, name="login"),
    path('register/', register_user, name="register"),
    path("logout/", LogoutView.as_view(), name="logout"),
    path('social_login/', include('allauth.urls')),       # OAuth new
]
Enter fullscreen mode Exit fullscreen mode

👉 Step #5 - Update app settings to read Github secrets from .env

# core/settings.py (truncated content)

GITHUB_ID     = os.getenv('GITHUB_ID', None)
GITHUB_SECRET = os.getenv('GITHUB_SECRET', None)
GITHUB_AUTH   = GITHUB_SECRET is not None and GITHUB_ID is not None
Enter fullscreen mode Exit fullscreen mode

👉 Step #6 - Update the sign-in page

{% if GITHUB_AUTH %}
<div class="mx-2">
    <form method="post" action="/social_login/github/login/?next=%2F">
        {% csrf_token %}
        <button class="btn btn-light" type="submit" >
            <i class="feather icon-github auth-icon"></i></button>
    </form>
    <span class="mx-1">Sign IN with GitHub</span>
</div>                   
{% endif %}  
Enter fullscreen mode Exit fullscreen mode

At this point, the last step is to migrate the database the test the OAuth flow (registration, logout).


Thanks for reading! For more resources and support, please access:

Datta Able Django - Free starter provided by AppSeed.

Top comments (4)

Collapse
 
crearesite profile image
WebsiteMarket

this is cool. ty

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀

Collapse
 
uithemes profile image
ui-themes

Django is so old school. I love it

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀