Secure document platform frontend - Microsoft OAuth SSO, paired with SQL Server Dynamic Data Masking at the data layer, and a custom encryption + compression envelope for point-to-point payloads.
Document workflows that span confidential fields, audited delivery, and institutional identity need (a) single sign-on against the existing Microsoft tenant, (b) a payload boundary the operator can reason about, and (c) a rich editor that doesn't leak content through naive serialization. The frontend's job is to talk to the backend through the shared envelope and keep the editing/signing surface ergonomic for non-technical operators.
- Microsoft OAuth at the edge. Identity is delegated to the Office 365 tenant; the frontend stores only the issued session token.
- Shared point-to-point envelope. Outgoing/incoming payloads are encoded with a Huffman tree + framing protocol that matches the backend (
devjaes/securis-api). The frontend tree (VITE_HUFFMAN_TREE_FRONT) and the backend tree are independent - payload visibility on the wire depends on holding both. - TipTap-based document editor. Rich-text composition for oficios and memorandos, with structured tables and headings - output flows through the envelope, never through plain JSON dumps.
- Signed-PDF rendering.
vue-pdf-embed+qrcoderender the signed artifact in-app for verification.
The envelope sits inside a layered model: MS OAuth at the edge + the Huffman-coded envelope on the wire + SQL Server Dynamic Data Masking at the database + a redacting logging interceptor on the backend.
| Layer | Tech |
|---|---|
| Build | Vite 7 |
| Framework | Vue 3.5 |
| Language | TypeScript 5.9 |
| State | Pinia |
| Routing | Vue Router 4 |
| UI | Tailwind 4 + radix-vue (shadcn-vue) + lucide-vue-next |
| Editor | TipTap 3 (tables, text-align, underline, starter-kit) |
vue-pdf-embed + qrcode |
|
| HTTP | Axios |
| Auth | Microsoft OAuth (Office 365) |
| API | devjaes/securis-api |
- Microsoft OAuth single sign-on
- Custom point-to-point payload envelope (Huffman + framing) shared with the API
- TipTap-based rich document editor for oficios and memorandos
- QR-signed PDF rendering surface
- Tailwind 4 + radix-vue component layer
pnpm install
cp .env.example .env # MS OAuth keys, VITE_API_URL, VITE_HUFFMAN_TREE_FRONT
pnpm dev # http://localhost:5173- University capstone project. Single-tenant (one institutional Microsoft tenant).
- No public demo (institutional auth required).
- Default branch is
develop(active integration).mainis held back for releases.
- My role: Lead Architect - system design, the four-layer security model, MS OAuth integration, project leadership.
- Contributors: Pablo Martinez (
@SrPabvliss), Daniel Zhu (@Chu2409). - Backend repo: devjaes/securis-api