Prototype using cookie setter component

Author: Archmonger

src/js/src/components.ts

@@ -1,4 +1,4 @@
-import { DjangoFormProps } from "./types";
+import { DjangoFormProps, SetCookieProps } from "./types";
 import React from "react";
 import ReactDOM from "react-dom";
 /**
@@ -62,3 +62,13 @@ export function DjangoForm({
 
   return null;
 }
+
+export function SetCookie({ cookie, completeCallback }: SetCookieProps) {
+  React.useEffect(() => {
+    // Set the `sessionid` cookie
+    document.cookie = cookie;
+    completeCallback(true);
+  }, []);
+
+  return null;
+}

src/js/src/types.ts

@@ -23,3 +23,8 @@ export interface DjangoFormProps {
   onSubmitCallback: (data: Object) => void;
   formId: string;
 }
+
+export interface SetCookieProps {
+  cookie: string;
+  completeCallback: (success: boolean) => void;
+}

src/reactpy_django/auth/__init__.py

@@ -0,0 +1,74 @@
+from __future__ import annotations
+
+from pathlib import Path
+from typing import TYPE_CHECKING
+
+from reactpy import component, hooks, web
+
+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"),
+)
+
+
+@component
+def auth_manager():
+    session_cookie, set_session_cookie = hooks.use_state("")
+    scope = hooks.use_connection().scope
+
+    @hooks.use_effect(dependencies=None)
+    async def _session_check():
+        """Generate a session cookie if `login` was called in a user's component."""
+        from django.conf import settings
+
+        session: SessionBase | None = scope.get("session")
+        login_required: bool = scope.get("reactpy-login", False)
+        if not login_required or not session or not session.session_key:
+            return
+
+        # Begin generating a cookie string
+        key = session.session_key
+        domain: str | None = settings.SESSION_COOKIE_DOMAIN
+        httponly: bool = settings.SESSION_COOKIE_HTTPONLY
+        name: str = settings.SESSION_COOKIE_NAME
+        path: str = settings.SESSION_COOKIE_PATH
+        samesite: str | bool = settings.SESSION_COOKIE_SAMESITE
+        secure: bool = settings.SESSION_COOKIE_SECURE
+        new_cookie = f"{name}={key}"
+        if domain:
+            new_cookie += f"; Domain={domain}"
+        if httponly:
+            new_cookie += "; HttpOnly"
+        if isinstance(path, str):
+            new_cookie += f"; Path={path}"
+        if samesite:
+            new_cookie += f"; SameSite={samesite}"
+        if secure:
+            new_cookie += "; Secure"
+        if not session.get_expire_at_browser_close():
+            session_max_age: int = session.get_expiry_age()
+            session_expiration: str = session.get_expiry_date().strftime("%a, %d-%b-%Y %H:%M:%S GMT")
+            if session_expiration:
+                new_cookie += f"; Expires={session_expiration}"
+            if isinstance(session_max_age, int):
+                new_cookie += f"; Max-Age={session_max_age}"
+
+        # Save the cookie within this component's state so that the client-side component can ingest it
+        scope.pop("reactpy-login")
+        if new_cookie != session_cookie:
+            set_session_cookie(new_cookie)
+
+    def on_complete_callback(success: bool):
+        """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("")
+
+    # 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)

src/reactpy_django/auth/components.py

@@ -15,6 +15,7 @@
 
 import orjson
 from channels import DEFAULT_CHANNEL_LAYER
+from channels import auth as channels_auth
 from channels.layers import InMemoryChannelLayer, get_channel_layer
 from reactpy import use_callback, use_effect, use_memo, use_ref, use_state
 from reactpy import use_connection as _use_connection
@@ -416,6 +417,24 @@ def use_root_id() -> str:
     return scope["reactpy"]["id"]
 
 
+def use_auth():
+    """Provides the ability to login/logout a user using Django's standard authentication framework."""
+    from reactpy_django import config
+
+    scope = use_scope()
+
+    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"))
+        await ensure_async(session_save_func)()
+        scope["reactpy_login"] = True
+
+    async def logout():
+        await channels_auth.logout(scope)
+
+    return login, logout
+
+
 async def _get_user_data(user: AbstractUser, default_data: None | dict, save_default_data: bool) -> dict | None:
     """The mutation function for `use_user_data`"""
     from reactpy_django.models import UserDataModel