Skip to content
SisterShield

Key Application Flows

This page documents the major application flows using Mermaid sequence diagrams. Each flow traces the path from user action through the system to the final result.

1. Authentication Flow

User signs in with email and password. NextAuth verifies credentials against the database, issues a JWT, and stores it in a cookie. Subsequent requests include the JWT for session verification.

Session lifespan: JWT tokens expire after 30 days (maxAge: 30 * 24 * 60 * 60). The JWT payload includes id, role, and preferredLocale.

2. Course Creation Flow (AI Generation)

A Teacher generates a course using the LLM. The system creates Twee source, validates it, compiles to HTML, injects tracking, and stores the result.

3. Course Play Flow

A Student loads a published course. The Twine HTML is loaded into an iframe. The TwinePlayer component communicates with the iframe via postMessage to track passage visits and quiz answers.

4. Submission Review Flow

A Student uploads a Twine HTML file, creates a submission, and submits it for review. A Teacher reviews the submission and approves or rejects it. Approved submissions can optionally be published as courses.

5. Quick Exit Flow

The Quick Exit is a safety mechanism for users who may be in a dangerous situation. It immediately clears sensitive session data and redirects to an innocuous website.

Implementation details:

  • The Escape key handler checks for open overlays ([data-state="open"][role="dialog"], role="menu", role="listbox") and does not trigger if a dialog or dropdown is open.
  • window.location.replace() is used instead of assign() so the SisterShield URL does not appear in browser history.
  • The component renders with safety-themed styling (border-safety-exit-border, text-safety-exit) and includes accessible labels.