Prototype using HttpRequest component

Author: Archmonger

pyproject.toml

@@ -155,6 +155,7 @@ runserver = [
   "cd tests && python manage.py migrate --noinput",
   "cd tests && python manage.py runserver",
 ]
+makemigrations = ["cd tests && python manage.py makemigrations"]
 
 #######################################
 # >>> Hatch Documentation Scripts <<< #

src/js/src/components.ts

@@ -1,4 +1,4 @@
-import { DjangoFormProps, SetCookieProps } from "./types";
+import { DjangoFormProps, HttpRequestProps } from "./types";
 import React from "react";
 import ReactDOM from "react-dom";
 /**
@@ -63,11 +63,20 @@ export function DjangoForm({
   return null;
 }
 
-export function SetCookie({ cookie, completeCallback }: SetCookieProps) {
+export function HttpRequest({ method, url, body, callback }: HttpRequestProps) {
   React.useEffect(() => {
-    // Set the `sessionid` cookie
-    document.cookie = cookie;
-    completeCallback(true);
+    fetch(url, {
+      method: method,
+      body: body,
+    })
+      .then((response) => {
+        response.text().then((text) => {
+          callback(response.status, text);
+        });
+      })
+      .catch(() => {
+        callback(520, "");
+      });
   }, []);
 
   return null;

src/js/src/types.ts

@@ -24,7 +24,9 @@ export interface DjangoFormProps {
   formId: string;
 }
 
-export interface SetCookieProps {
-  cookie: string;
-  completeCallback: (success: boolean) => void;
+export interface HttpRequestProps {
+  method: string;
+  url: string;
+  body: string;
+  callback: (status: Number, response: string) => void;
 }

src/reactpy_django/auth/components.py

@@ -1,18 +1,13 @@
 from __future__ import annotations
 
-from pathlib import Path
 from typing import TYPE_CHECKING
 
-from reactpy import component, hooks, web
+from reactpy import component, hooks
 
 if TYPE_CHECKING:
     from django.contrib.sessions.backends.base import SessionBase
 
-
-SetCookie = web.export(
-    web.module_from_file("reactpy-django", file=Path(__file__).parent.parent / "static" / "client.js"),
-    ("SetCookie"),
-)
+from reactpy_django.javascript_components import HttpRequest
 
 
 @component
@@ -62,13 +57,23 @@ async def _session_check():
         if new_cookie != session_cookie:
             set_session_cookie(new_cookie)
 
-    def on_complete_callback(success: bool):
+    def http_request_callback(status_code: int, response: str):
         """Remove the cookie from server-side memory if it was successfully set.
-        This will subsequently remove the client-side cookie-setter component from the DOM."""
-        if success:
-            set_session_cookie("")
+        Doing this will subsequently remove the client-side HttpRequest component from the DOM."""
+        set_session_cookie("")
+        # if status_code >= 300:
+        #     print(f"Unexpected status code {status_code} while trying to login user.")
 
     # If a session cookie was generated, send it to the client
     if session_cookie:
-        print("Session Cookie: ", session_cookie)
-        return SetCookie({"sessionCookie": session_cookie}, on_complete_callback)
+        # print("Session Cookie: ", session_cookie)
+        return HttpRequest(
+            {
+                "method": "POST",
+                "url": "",
+                "body": {},
+                "callback": http_request_callback,
+            },
+        )
+
+    return None

src/reactpy_django/config.py

@@ -39,6 +39,11 @@
     "REACTPY_SESSION_MAX_AGE",
     259200,  # Default to 3 days
 )
+REACTPY_AUTH_TIMEOUT: int = getattr(
+    settings,
+    "REACTPY_AUTH_TIMEOUT",
+    30,  # Default to 30 seconds
+)
 REACTPY_CACHE: str = getattr(
     settings,
     "REACTPY_CACHE",

src/reactpy_django/hooks.py

@@ -425,8 +425,10 @@ def use_auth():
 
     async def login(user: AbstractUser):
         await channels_auth.login(scope, user, backend=config.REACTPY_AUTH_BACKEND)
-        session_save_func = getattr(scope["session"], "asave", getattr(scope["session"], "save"))
+        session_save_func = getattr(scope["session"], "asave", scope["session"].save)
         await ensure_async(session_save_func)()
+
+        # TODO: Pick a different method of triggering a login action
         scope["reactpy_login"] = True
 
     async def logout():

src/reactpy_django/http/urls.py

@@ -15,4 +15,9 @@
         views.view_to_iframe,
         name="view_to_iframe",
     ),
+    path(
+        "session/<uuid:uuid>",
+        views.switch_user_session,
+        name="auth",
+    ),
 ]

src/reactpy_django/http/views.py

@@ -1,11 +1,12 @@
 import os
 from urllib.parse import parse_qs
 
+from django.contrib.auth.models import AnonymousUser
 from django.core.exceptions import SuspiciousOperation
 from django.http import FileResponse, HttpRequest, HttpResponse, HttpResponseNotFound
 from reactpy.config import REACTPY_WEB_MODULES_DIR
 
-from reactpy_django.utils import FileAsyncIterator, render_view
+from reactpy_django.utils import FileAsyncIterator, ensure_async, render_view
 
 
 def web_modules_file(request: HttpRequest, file: str) -> FileResponse:
@@ -42,3 +43,40 @@ async def view_to_iframe(request: HttpRequest, dotted_path: str) -> HttpResponse
     # Ensure page can be rendered as an iframe
     response["X-Frame-Options"] = "SAMEORIGIN"
     return response
+
+
+async def switch_user_session(request: HttpRequest, uuid: str) -> HttpResponse:
+    """Switches the client's active session.
+
+    Django's authentication design requires HTTP cookies to persist login via cookies.
+
+    This is problematic since ReactPy is rendered via WebSockets, and browsers do not
+    allow active WebSocket connections to modify HTTP cookies, which necessitates this
+    view to exist."""
+    from reactpy_django.models import AuthSession
+
+    # TODO: Maybe just relogin the user instead of switching sessions?
+
+    # Find out what session we're switching to
+    auth_session = await AuthSession.objects.aget(uuid=uuid)
+
+    # Validate the session
+    if auth_session.expired:
+        msg = "Session expired."
+        raise SuspiciousOperation(msg)
+    if not request.session.exists(auth_session.session_key):
+        msg = "Session does not exist."
+        raise SuspiciousOperation(msg)
+
+    # Delete the existing session
+    flush_method = getattr(request.session, "aflush", request.session.flush)
+    await ensure_async(flush_method)()
+    request.user = AnonymousUser()
+
+    # Switch the client's session
+    request.session = type(request.session)(auth_session.session_key)
+    load_method = getattr(request.session, "aload", request.session.load)
+    await ensure_async(load_method)()
+    await auth_session.adelete()
+
+    return HttpResponse(status=204)

src/reactpy_django/javascript_components.py

@@ -0,0 +1,10 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+from reactpy import web
+
+HttpRequest = web.export(
+    web.module_from_file("reactpy-django", file=Path(__file__).parent / "static" / "client.js"),
+    ("HttpRequest"),
+)

src/reactpy_django/migrations/0007_authsession.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.1.4 on 2024-12-23 04:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('reactpy_django', '0006_userdatamodel'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AuthSession',
+            fields=[
+                ('uuid', models.UUIDField(editable=False, primary_key=True, serialize=False, unique=True)),
+                ('session_key', models.CharField(editable=False, max_length=40)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

src/reactpy_django/models.py

@@ -1,19 +1,43 @@
+from datetime import timedelta
+
 from django.contrib.auth import get_user_model
 from django.db import models
 from django.db.models.signals import pre_delete
 from django.dispatch import receiver
+from django.utils import timezone
 
 from reactpy_django.utils import get_pk
 
 
 class ComponentSession(models.Model):
-    """A model for storing component sessions."""
+    """A model for storing component sessions.
+
+    This is used to store component arguments provided within Django templates.
+    These arguments are retrieved within the layout renderer (WebSocket consumer)."""
 
     uuid = models.UUIDField(primary_key=True, editable=False, unique=True)
     params = models.BinaryField(editable=False)
     last_accessed = models.DateTimeField(auto_now=True)
 
 
+class AuthSession(models.Model):
+    """A model for storing Django authentication sessions, tied to a UUID.
+
+    This is used to switch Django's HTTP session to match the websocket session."""
+
+    # TODO: Add cleanup task for this.
+    uuid = models.UUIDField(primary_key=True, editable=False, unique=True)
+    session_key = models.CharField(max_length=40, editable=False)
+    created_at = models.DateTimeField(auto_now_add=True, editable=False)
+
+    @property
+    def expired(self) -> bool:
+        """Check if the login UUID has expired."""
+        from reactpy_django.config import REACTPY_AUTH_TIMEOUT
+
+        return self.created_at < (timezone.now() - timedelta(seconds=REACTPY_AUTH_TIMEOUT))
+
+
 class Config(models.Model):
     """A singleton model for storing ReactPy configuration."""