Headlo Client Examples

Client-side integration examples for Headlo — auth, PROP components, and PROP services across different frameworks.

Examples

| Folder | Framework | Auth | PROP Components | PROP Services | |---|---|---|---|---| | react-app/ | React 19 + Vite | HeadloProvider + useHeadloAuth | useComponent + PropPreload | createService | | angular-app/ | Angular 18 | — | bundleUrl() + dynamic import | createService | | vanilla-app/ | Vanilla JS + Vite | — | Two <script> tags | createService |

Quick start

Each folder is a self-contained project. Pick your framework:

# React
cd react-app && npm install && cp .env.example .env && npm run dev

# Angular
cd angular-app && npm install && cp .env.example .env && ng serve

# Vanilla JS
cd vanilla-app && npm install && cp .env.example .env && npm run dev

Environment variables

All examples share the same keys — copy .env.example in the relevant folder and fill in your values from the Headlo dashboard.

| Variable | Purpose | |---|---| | VITE_HEADLO_AUTH_ISSUER | Headlo Auth issuer URL (React only) | | VITE_HEADLO_AUTH_KEY | Headlo Auth publishable key (React only) | | VITE_HEADLO_PROP_KEY | PROP publishable key (pk_live_xxx) | | VITE_HEADLO_API_URL | Your PROP server URL (https://prop.yoursite.com) |

License

Elastic License 2.0 — © Headlo Team

Source available. Free for internal use and self-hosting. You may not offer this software as a competing hosted or managed service.