ERO Product Docs

Appearance

Directive 25: Auth Inner Loop vs Outer Loop Implementation ​

Objective ​

Implement authentication across the Astro PWA (app/) and Cloudflare Worker (api/). Support both an offline-friendly local Inner Loop (http://localhost:4321) and a live Cloud Outer Loop (https://ero-dev.synkronyx.cloud).

Execution Steps ​

1. Astro PWA Authentication Setup (app/src/lib/auth.ts) ​

  • Install @azure/msal-browser: npm install @azure/msal-browser --legacy-peer-deps inside app/.
  • Create app/src/lib/auth.ts:
    • Initialize MSAL instance reading from import.meta.env.PUBLIC_SKNX_ERO_CLIENT_ID and PUBLIC_SKNX_ERO_TENANT_ID.
    • If PUBLIC_SKNX_ERO_AUTH_MOCK === 'true', return a mock authenticated user session with a dummy local JWT for fast offline local dev.
    • Implement login(), logout(), and getToken() methods.

2. Cloudflare Worker Middleware (api/src/auth.ts) ​

  • Create api/src/auth.ts:
    • Intercept incoming requests with Bearer tokens in headers (Authorization: Bearer <token>).
    • If ENVIRONMENT === 'dev' and header is Bearer local-dev-token, accept as mock developer identity (user_id: dev-user-1).
    • In non-mock mode, extract token header and verify JWT signature against Entra's public JWKS keys (https://<tenant>.ciamlogin.com/<tenant-id>/discovery/v2.0/keys).

3. Update App Page & Navbar Component ​

  • Add a simple "Login / Logout" UI component to app/src/pages/index.astro.
  • Show current auth status and display user display name or email.

┌─────────────────────────────────────────────────────────────────────────────┐ │ INNER LOOP (Local DX) │ │ │ │ Laptop Browser (http://localhost:4321) │ │ ├── Auth Mode: Local Mock JWT / Dev Entra App │ │ └── API Target: http://127.0.0.1:8787 (Local Wrangler Worker) │ │ └── Auth Middleware: Local Mock JWKS / Dev Token Bypass Mode │ └─────────────────────────────────────────────────────────────────────────────┘ │ │ Git Push / ADO Pipeline ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ OUTER LOOP (Cloud Dev) │ │ │ │ Browser Target: https://ero-dev.synkronyx.cloud │ │ ├── Identity: Entra CIAM Tenant (sknx-ero-dev.onmicrosoft.com) │ │ │ └── IdPs: Google, Facebook, Email OTP │ │ └── Edge API: Cloudflare Worker Dev Endpoint │ │ └── Auth Middleware: Strict Live JWKS Signature Verification │ └─────────────────────────────────────────────────────────────────────────────┘