vdelitzIntroduction
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.
