Tutorial: Integrate Passkeys into Django (Python)

Introduction

In this guide, we'll walk you through the steps to integrate passkey authentication into a Python Django web application. We'll be utilizing Corbado's passkey-first UI component, which seamlessly connects to a passkey backend (incl. WebAuthn server), making the integration process straightforward and efficient.

Read the full original tutorial here

Django Passkey Project Prerequisites

Before we go into the implementation, ensure you have a basic understanding of Django, Python, HTML, and JavaScript. Familiarity with these technologies will help you follow along more easily.

Setting Up the Django Project

1. Initialize Your Django Project

If Django isn't installed on your machine, you can install it by running the following command:

pip install Django==4.2.7

Next, install the Corbado Python SDK for passkeys:

pip install passkeys

Now, create a new Django project:

django-admin startproject passkeys_demo
cd passkeys_demo

This will generate a passkeys_demo directory containing your Django project files.

2. Configure Environment Variables

Within your project directory, create a .env file to store environment variables. You need a Project ID and API secret that you can obtain from the Corbado developer panel (you need to create a Corbado project in the developer panel):

PROJECT_ID=your_project_id
API_SECRET=your_api_secret

Install the django-environ package to load these variables into your Django settings:

pip install django-environ

In your settings.py, import environ and configure it to read the .env file:

import environ

env = environ.Env()
environ.Env.read_env()

PROJECT_ID = env('PROJECT_ID')
API_SECRET = env('API_SECRET')

3. Create Django Templates with Session Management

Create a templates directory inside your passkeys_demo project. Within this directory, create index.html for the login page and profile.html for the user profile page.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"
    />
    <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>
  </head>
  <body>
    <script>
      (async () => {
        await Corbado.load({
          projectId: "{{ PROJECT_ID }}",
          darkMode: "off",
          setShortSessionCookie: "true",
        });
        const authElement = document.getElementById('corbado-auth');
        Corbado.mountAuthUI(authElement, {
          onLoggedIn: () => {
            window.location.href = '/profile';
          },
        });
      })();
    </script>

    <div id="corbado-auth"></div>
  </body>
</html>
profile.html:
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"
    />
    <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>
  </head>
  <body>
    <h2>Protected Page 🔒</h2>
    <p>User ID: {{ USER_ID }}</p>
    <p>Name: {{ USER_NAME }}</p>
    <p>Email: {{ USER_EMAIL }}</p>
    <div id="passkey-list"></div>
    <button id="logoutButton">Logout</button>

    <script>
      (async () => {
        await Corbado.load({
          projectId: "{{ PROJECT_ID }}",
          darkMode: "off",
        });

        const passkeyListElement = document.getElementById("passkey-list");
        Corbado.mountPasskeyListUI(passkeyListElement);

        const logoutButton = document.getElementById('logoutButton');
        logoutButton.addEventListener('click', function() {
          Corbado.logout()
            .then(() => {
              window.location.replace("/");
            })
            .catch(err => {
              console.error(err);
            });
        });
      })();
    </script>
  </body>
</html>

4. Create Django Views and Configure Routes

In views.py, create the following methods for rendering the login and profile pages:

from django.shortcuts import render, redirect
from django.http import HttpResponse
from corbado_python_sdk import Config, CorbadoSDK, SessionInterface, UserEntity
from corbado_python_sdk.entities.session_validation_result import SessionValidationResult
from corbado_python_sdk.generated.models.identifier import Identifier

from passkeys_demo.settings import API_SECRET, PROJECT_ID

config = Config(api_secret=API_SECRET, project_id=PROJECT_ID)
sdk = CorbadoSDK(config=config)
sessions = sdk.sessions
identifiers = sdk.identifiers

def index(request):
    context = {"PROJECT_ID": PROJECT_ID}
    return render(request, "index.html", context)

def profile(request):
    token = request.COOKIES.get(config.short_session_cookie_name)
    try:
        if not token:
            raise ValueError("No token found")
        validation_result = sessions.get_and_validate_short_session_value(short_session=token)
        if validation_result.authenticated:
            email_identifiers = identifiers.list_all_emails_by_user_id(
                user_id=validation_result.user_id or ""
            )
            user = sessions.get_current_user(short_session=token)
            context = {
                "PROJECT_ID": PROJECT_ID,
                "USER_ID": user.user_id,
                "USER_NAME": user.full_name,
                "USER_EMAIL": email_identifiers[0].value,
            }
            return render(request, "profile.html", context)
        else:
            return HttpResponse("You are not authenticated or have not yet confirmed your email.", status=401)
    except Exception as e:
        print(e)
        return redirect("/")

Configure the routes in urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("profile/", views.profile, name="profile"),
    path('<path:unknown_path>/', lambda request, unknown_path: redirect('/'), name='fallback')
]

Running the Django Application

To start your Django application, use the following command:

python manage.py runserver

Visit http://localhost:8000 in your web browser, and you should see the Corbado UI component integrated seamlessly.

Conclusion

This guide walked you through the process of adding passkey-based authentication to a Django application using Corbado's components. This approach not only enhances security by implementing passwordless authentication but also simplifies session management. For further details on Corbado's session management capabilities, refer to the official documentation.

Blog