@clearly-hub/browser 0.3.0 → 0.4.0

package/README.md

@@ -2,7 +2,8 @@
 
 Connect your web app to Clearly.HUB with a script, some config and one server handler. You get
 "Sign in with Clearly.HUB", the hosted screens (choose a plan, pick data, save a result, choose a
-hub) and each hub's subscription to your app. Tokens stay on your server.
+hub) and each hub's subscription to your app. The refresh token stays on your server; the page gets
+the access token only when it asks, for protected data.
 
 > **Preview (0.x).** The API may still change between minor versions. Proprietary: see
 > [LICENSE](LICENSE).
@@ -51,7 +52,9 @@ Hono, Bun or Deno. Mount it at `/clearly-hub/*`.
 
 <script type="module">
   const session = await clearlyHub.session(); // { signedIn, user }
-  window.addEventListener('clearly-hub-answer', (event) => console.log(event.detail));
+  window.addEventListener('clearly-hub-answer', (event) =>
+    console.log(event.detail),
+  );
 </script>
 ```
 
@@ -65,6 +68,7 @@ Or `npm install @clearly-hub/browser` and `import { clearlyHub } from '@clearly-
 | `clearlyHub.signIn()`, `signOut()`               | Go through Clearly.HUB and come back to this page                                                                                                          |
 | `clearlyHub.open(action, { data, display })`     | Opens a hosted screen; resolves with its checked answer. Call it from a click: browsers only allow popups there                                            |
 | `clearlyHub.result()`                            | After a redirect screen: its answer, on the page it came back to                                                                                           |
+| `clearlyHub.getToken()`                          | The person's key for protected and paid data, or `null` when signed out. See [Protected data](#protected-data)                                             |
 | `clearlyHub.onAnswer(callback)`                  | Every answer, once each, from a popup or after a redirect; also when you start listening after it arrived (React). Returns a function that stops listening |
 | `<clearly-hub-button action display data label>` | Branded button for `sign-in`, `sign-out` and each screen                                                                                                   |
 | `clearly-hub-answer` event                       | Every answer, from a popup or after a redirect                                                                                                             |
@@ -94,15 +98,33 @@ blocked popup falls back to a redirect.
 | `REGISTER_RESOURCE`   | `{ url, format }` of your result, at a public https URL | `activeHub`, `dataset`, `resource`                                                             |
 | `SELECT_HUB`          |                                                         | `hub` (`_id`, `name`)                                                                          |
 
+## Protected data
+
+A protected or paid resource from `DATA_PICKER` (`requiresToken: true`) has a `url` on Clearly.HUB,
+which checks the person's key on every request. Send it as the `Authorization` header. In the page:
+
+```js
+const response = await fetch(resource.url, {
+  headers: { Authorization: await clearlyHub.getToken() },
+});
+```
+
+Map layers (WMS, WMTS, tiles) load many URLs themselves: use a Leaflet, OpenLayers or Cesium option
+or plugin that adds headers to each request. The key lasts an hour; `getToken()` gets a new one in
+time, so call it again rather than keeping the value. On your server, `hub.fetchAsUser(req, url)`
+does the same.
+
+The key is the person's own Clearly.HUB key: keep scripts you don't trust off pages that use it.
+
 ## The Node package
 
 |                                                        |                                                                                                                                                                                        |
 | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `hub.express()`, `hub.handler`                         | The routes: `/sign-in`, `/callback`, `/sign-out`, `/session`, `/open`, `/answer`, `/result`                                                                                            |
+| `hub.express()`, `hub.handler`                         | The routes: `/sign-in`, `/callback`, `/sign-out`, `/session`, `/open`, `/answer`, `/result`, `/token`                                                                                  |
 | `onSignIn(person, { request, req })`                   | Called after each sign-in. Return your own user id to keep it in the session, or `{ appUserId, redirectTo }` to also choose the next page                                              |
 | `onAnswer(result, { user, data, request, req })`       | Called with each checked answer before it reaches the browser, for example to set up a workspace. `data` is what the screen was sent; what you return reaches the page as `result.app` |
 | `hub.getUser(req)`                                     | Who's signed in, in your own routes                                                                                                                                                    |
-| `hub.fetchAsUser(req, url)`                            | Fetch protected or paid data (from `DATA_PICKER`) with the person's key                                                                                                                |
+| `hub.fetchAsUser(req, url)`                            | Fetch protected or paid data (from `DATA_PICKER`) on your server, with the person's key                                                                                                |
 | `hub.getSubscription(hubId)`, `getSubscriptions()`     | A hub's subscription to your app, or all of them                                                                                                                                       |
 | `hub.reportUsage({ request or sub, hubId, quantity })` | Report billable use; Clearly.HUB bills the hub. Pass `sub` for a Clearly.HUB account you stored, without a live sign-in                                                                |
 | `hub.getUserToken(req)`, `getAppToken()`               | The person's key and your app's key, for calls of your own                                                                                                                             |
@@ -132,7 +154,10 @@ store; it's split over several cookies because tokens are large.
 
 - Setting up your own workspaces or tenants: do it by hand, with plans that need approval, or in
   `onAnswer` for `SELECT_SUBSCRIPTION`.
-- Other server languages: follow the Build checklist.
+- Other server languages (.NET, Python, ...): the browser package works with any
+  backend that answers the same routes. Contact us at
+  [support@futureinsight.nl](mailto:support@futureinsight.nl) and we'll help
+  you with yours.
 
 ## Working on this repo
 

package/dist/clearly-hub.js

@@ -1,4 +1,4 @@
-"use strict";(()=>{var C=Object.defineProperty;var T=(r,t,n)=>t in r?C(r,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[t]=n;var a=(r,t,n)=>T(r,typeof t!="symbol"?t+"":t,n);var x=["SELECT_SUBSCRIPTION","DATA_PICKER","REGISTER_RESOURCE","SELECT_HUB"];function E(r){return x.includes(r)}function S(r,t){if(r!=="REGISTER_RESOURCE")return;let{url:n,format:i}=t??{};if(typeof n!="string"||!n||typeof i!="string"||!i)return'REGISTER_RESOURCE needs data with a url and a format, for example { url, format: "geojson" }';let o;try{o=new URL(n).hostname}catch{return`REGISTER_RESOURCE: "${n}" is not a URL`}if(!o.includes("."))return"REGISTER_RESOURCE needs a url with a domain Clearly.HUB accepts, not localhost"}var R="/clearly-hub";var c={signIn:"/sign-in",callback:"/callback",signOut:"/sign-out",session:"/session",open:"/open",answer:"/answer",result:"/result"},b="clearly-hub-answers";var u="clearly-hub-answer",y=480,h=class{constructor(t={}){a(this,"basePath",R);a(this,"display","popup");a(this,"redirectResult");a(this,"unclaimedRedirectResult");this.configure(t)}configure(t){return t.basePath&&(this.basePath=t.basePath.replace(/\/+$/,"")),t.display&&(this.display=t.display),this}async session(){let t=await fetch(this.url(c.session),{credentials:"same-origin"});if(!t.ok)throw new Error(`Clearly.HUB session failed (${t.status})`);return t.json()}signIn({returnTo:t=m()}={}){window.location.assign(this.url(c.signIn,{returnTo:t}))}signOut(){window.location.assign(this.url(c.signOut))}open(t,n={}){let i=S(t,n.data);if(i)return Promise.reject(new Error(`Clearly.HUB: ${i}`));let o=crypto.randomUUID(),e=n.display??this.display,s={action:t,ref:o,returnTo:n.returnTo??m(),data:n.data?JSON.stringify(n.data):void 0};if(e==="popup"){let l=window.open(this.url(c.open,{...s,display:"popup"}),"clearly-hub-screen",`width=${y},height=${screen.availHeight},left=${screen.availWidth-y}`);if(l)return this.waitForPopup(l,o,t,n.eventTarget??window)}return window.location.assign(this.url(c.open,{...s,display:"redirect"})),new Promise(()=>{})}onAnswer(t){let n=o=>{let e=o.detail;e===this.unclaimedRedirectResult&&(this.unclaimedRedirectResult=void 0),t(e)};window.addEventListener(u,n);let i=this.unclaimedRedirectResult;return i&&(this.unclaimedRedirectResult=void 0,t(i)),()=>window.removeEventListener(u,n)}deliverRedirectResult(t){this.unclaimedRedirectResult=t,window.dispatchEvent(new CustomEvent(u,{detail:t}))}result(){return this.redirectResult??(this.redirectResult=fetch(this.url(c.result),{credentials:"same-origin"}).then(t=>t.ok?t.json():null).then(t=>t?.result??null).catch(()=>null)),this.redirectResult}waitForPopup(t,n,i,o){return new Promise(e=>{let s=new BroadcastChannel(b),l=!1,f=p=>{l||(l=!0,s.close(),window.clearInterval(g),o.dispatchEvent(new CustomEvent(u,{detail:p,bubbles:!0,composed:!0})),e(p))};s.onmessage=p=>{p.data?.ref===n&&f(p.data.result)};let g=window.setInterval(()=>{t.closed&&(window.clearInterval(g),window.setTimeout(()=>f({action:i,result:"CANCELLED"}),500))},400)})}url(t,n={}){let i=new URLSearchParams;for(let[e,s]of Object.entries(n))s!==void 0&&i.set(e,s);let o=i.toString();return`${this.basePath}${t}${o?`?${o}`:""}`}};function m(){return`${window.location.pathname}${window.location.search}${window.location.hash}`}var w={"sign-in":"Sign in with Clearly.HUB","sign-out":"Sign out",SELECT_SUBSCRIPTION:"Choose a plan in Clearly.HUB",DATA_PICKER:"Pick data from Clearly.HUB",REGISTER_RESOURCE:"Save to Clearly.HUB",SELECT_HUB:"Choose a hub"},O=`
+"use strict";(()=>{var C=Object.defineProperty;var T=(r,e,n)=>e in r?C(r,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[e]=n;var a=(r,e,n)=>T(r,typeof e!="symbol"?e+"":e,n);var E="/clearly-hub";var l={signIn:"/sign-in",callback:"/callback",signOut:"/sign-out",session:"/session",open:"/open",answer:"/answer",result:"/result",token:"/token"},R="clearly-hub-answers";var x=["SELECT_SUBSCRIPTION","DATA_PICKER","REGISTER_RESOURCE","SELECT_HUB"];function S(r){return x.includes(r)}function b(r,e){if(r!=="REGISTER_RESOURCE")return;let{url:n,format:s}=e??{};if(typeof n!="string"||!n||typeof s!="string"||!s)return'REGISTER_RESOURCE needs data with a url and a format, for example { url, format: "geojson" }';let o;try{o=new URL(n).hostname}catch{return`REGISTER_RESOURCE: "${n}" is not a URL`}if(!o.includes("."))return"REGISTER_RESOURCE needs a url with a domain Clearly.HUB accepts, not localhost"}var u="clearly-hub-answer",y=480,h=class{constructor(e={}){a(this,"basePath",E);a(this,"display","popup");a(this,"redirectResult");a(this,"unclaimedRedirectResult");a(this,"token");a(this,"tokenRequest");this.configure(e)}configure(e){return e.basePath&&(this.basePath=e.basePath.replace(/\/+$/,"")),e.display&&(this.display=e.display),this}async session(){let e=await fetch(this.url(l.session),{credentials:"same-origin"});if(!e.ok)throw new Error(`Clearly.HUB session failed (${e.status})`);return e.json()}async getToken(){return this.token&&this.token.expiresAt>Date.now()+6e4?this.token.value:(this.tokenRequest??(this.tokenRequest=fetch(this.url(l.token),{credentials:"same-origin"}).then(async e=>{if(e.status===401)return null;if(!e.ok)throw new Error(`Clearly.HUB token failed (${e.status})`);let{accessToken:n,expiresIn:s}=await e.json();return{value:n,expiresAt:Date.now()+s*1e3}}).finally(()=>{this.tokenRequest=void 0})),this.token=await this.tokenRequest??void 0,this.token?.value??null)}signIn({returnTo:e=m()}={}){window.location.assign(this.url(l.signIn,{returnTo:e}))}signOut(){window.location.assign(this.url(l.signOut))}open(e,n={}){let s=b(e,n.data);if(s)return Promise.reject(new Error(`Clearly.HUB: ${s}`));let o=crypto.randomUUID(),t=n.display??this.display,i={action:e,ref:o,returnTo:n.returnTo??m(),data:n.data?JSON.stringify(n.data):void 0};if(t==="popup"){let c=window.open(this.url(l.open,{...i,display:"popup"}),"clearly-hub-screen",`width=${y},height=${screen.availHeight},left=${screen.availWidth-y}`);if(c)return this.waitForPopup(c,o,e,n.eventTarget??window)}return window.location.assign(this.url(l.open,{...i,display:"redirect"})),new Promise(()=>{})}onAnswer(e){let n=o=>{let t=o.detail;t===this.unclaimedRedirectResult&&(this.unclaimedRedirectResult=void 0),e(t)};window.addEventListener(u,n);let s=this.unclaimedRedirectResult;return s&&(this.unclaimedRedirectResult=void 0,e(s)),()=>window.removeEventListener(u,n)}deliverRedirectResult(e){this.unclaimedRedirectResult=e,window.dispatchEvent(new CustomEvent(u,{detail:e}))}result(){return this.redirectResult??(this.redirectResult=fetch(this.url(l.result),{credentials:"same-origin"}).then(e=>e.ok?e.json():null).then(e=>e?.result??null).catch(()=>null)),this.redirectResult}waitForPopup(e,n,s,o){return new Promise(t=>{let i=new BroadcastChannel(R),c=!1,f=p=>{c||(c=!0,i.close(),window.clearInterval(g),o.dispatchEvent(new CustomEvent(u,{detail:p,bubbles:!0,composed:!0})),t(p))};i.onmessage=p=>{p.data?.ref===n&&f(p.data.result)};let g=window.setInterval(()=>{e.closed&&(window.clearInterval(g),window.setTimeout(()=>f({action:s,result:"CANCELLED"}),500))},400)})}url(e,n={}){let s=new URLSearchParams;for(let[t,i]of Object.entries(n))i!==void 0&&s.set(t,i);let o=s.toString();return`${this.basePath}${e}${o?`?${o}`:""}`}};function m(){return`${window.location.pathname}${window.location.search}${window.location.hash}`}var w={"sign-in":"Sign in with Clearly.HUB","sign-out":"Sign out",SELECT_SUBSCRIPTION:"Choose a plan in Clearly.HUB",DATA_PICKER:"Pick data from Clearly.HUB",REGISTER_RESOURCE:"Save to Clearly.HUB",SELECT_HUB:"Choose a hub"},k=`
   :host { display: inline-block; }
   button {
     --color: var(--clearly-hub-color, #1fa69d);
@@ -20,4 +20,4 @@
   button:focus-visible { outline: 2px solid var(--color); outline-offset: 2px; }
   button:disabled { opacity: 0.6; cursor: default; }
   svg { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
-`,U='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 6.5c-1.66 0-3 1.34-3 3 0 .07 0 .14.01.21l-2.03.68c-.64-1.21-1.82-2.09-3.22-2.32V5.91C14.04 5.57 15 4.4 15 3c0-1.66-1.34-3-3-3S9 1.34 9 3c0 1.4.96 2.57 2.25 2.91v2.16c-1.4.23-2.58 1.11-3.22 2.32l-2.04-.68C6 9.64 6 9.57 6 9.5c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3c1.06 0 1.98-.55 2.52-1.37l2.03.68c-.2 1.29.17 2.66 1.09 3.69l-1.41 1.77Q6.66 17 6 17c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.68-.22-1.3-.6-1.8l1.41-1.77c1.36.76 3.02.75 4.37 0l1.41 1.77c-.37.5-.59 1.12-.59 1.8 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3c-.44 0-.85.09-1.23.26l-1.41-1.77c.93-1.04 1.29-2.4 1.09-3.69l2.03-.68c.53.82 1.46 1.37 2.52 1.37 1.66 0 3-1.34 3-3S22.66 6.5 21 6.5m-18 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1M6 21c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m5-18c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m1 12c-1.38 0-2.5-1.12-2.5-2.5S10.62 10 12 10s2.5 1.12 2.5 2.5S13.38 15 12 15m6 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m3-8.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"/></svg>';function A(r,t="clearly-hub-button"){if(typeof customElements>"u"||customElements.get(t))return;class n extends HTMLElement{constructor(){super();a(this,"button");let e=this.attachShadow({mode:"open"});e.innerHTML=`<style>${O}</style><button part="button" type="button"></button>`,this.button=e.querySelector("button"),this.button.addEventListener("click",()=>this.run())}connectedCallback(){for(let e of["action","display","label","variant","size","data"])if(Object.prototype.hasOwnProperty.call(this,e)){let s=this[e];delete this[e],this[e]=s}this.render()}attributeChangedCallback(){this.render()}get action(){let e=this.getAttribute("action")??"sign-in";return e in w?e:"sign-in"}set action(e){this.setOrRemove("action",e)}get display(){return this.getAttribute("display")==="redirect"?"redirect":void 0}set display(e){this.setOrRemove("display",e)}get label(){return this.getAttribute("label")}set label(e){this.setOrRemove("label",e)}get variant(){return this.getAttribute("variant")}set variant(e){this.setOrRemove("variant",e)}get size(){return this.getAttribute("size")}set size(e){this.setOrRemove("size",e)}get data(){let e=this.getAttribute("data");return e?JSON.parse(e):void 0}set data(e){this.setOrRemove("data",typeof e=="string"||e==null?e:JSON.stringify(e))}setOrRemove(e,s){s==null?this.removeAttribute(e):this.setAttribute(e,s)}render(){let e=this.label??w[this.action];this.button.innerHTML=`${U}<span></span>`,this.button.querySelector("span").textContent=e}async run(){let e=this.action;if(e==="sign-in")return r.signIn();if(e==="sign-out")return r.signOut();if(E(e)){this.button.disabled=!0;try{await r.open(e,{display:this.display,data:this.data,eventTarget:this})}catch(s){console.error(s);let l={action:e,result:"FAILURE",error:s.message};this.dispatchEvent(new CustomEvent(u,{detail:l,bubbles:!0,composed:!0}))}finally{this.button.disabled=!1}}}}a(n,"observedAttributes",["action","label"]),customElements.define(t,n)}var d=new h;A(d);if(typeof window<"u"){let r=()=>{d.result().then(t=>{t&&d.deliverRedirectResult(t)})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r,{once:!0}):queueMicrotask(r)}var v=document.currentScript;d.configure({basePath:v?.dataset.basePath,display:v?.dataset.display==="redirect"?"redirect":void 0});window.clearlyHub=d;})();
+`,O='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 6.5c-1.66 0-3 1.34-3 3 0 .07 0 .14.01.21l-2.03.68c-.64-1.21-1.82-2.09-3.22-2.32V5.91C14.04 5.57 15 4.4 15 3c0-1.66-1.34-3-3-3S9 1.34 9 3c0 1.4.96 2.57 2.25 2.91v2.16c-1.4.23-2.58 1.11-3.22 2.32l-2.04-.68C6 9.64 6 9.57 6 9.5c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3c1.06 0 1.98-.55 2.52-1.37l2.03.68c-.2 1.29.17 2.66 1.09 3.69l-1.41 1.77Q6.66 17 6 17c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.68-.22-1.3-.6-1.8l1.41-1.77c1.36.76 3.02.75 4.37 0l1.41 1.77c-.37.5-.59 1.12-.59 1.8 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3c-.44 0-.85.09-1.23.26l-1.41-1.77c.93-1.04 1.29-2.4 1.09-3.69l2.03-.68c.53.82 1.46 1.37 2.52 1.37 1.66 0 3-1.34 3-3S22.66 6.5 21 6.5m-18 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1M6 21c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m5-18c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m1 12c-1.38 0-2.5-1.12-2.5-2.5S10.62 10 12 10s2.5 1.12 2.5 2.5S13.38 15 12 15m6 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m3-8.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"/></svg>';function A(r,e="clearly-hub-button"){if(typeof customElements>"u"||customElements.get(e))return;class n extends HTMLElement{constructor(){super();a(this,"button");let t=this.attachShadow({mode:"open"});t.innerHTML=`<style>${k}</style><button part="button" type="button"></button>`,this.button=t.querySelector("button"),this.button.addEventListener("click",()=>this.run())}connectedCallback(){for(let t of["action","display","label","variant","size","data"])if(Object.prototype.hasOwnProperty.call(this,t)){let i=this[t];delete this[t],this[t]=i}this.render()}attributeChangedCallback(){this.render()}get action(){let t=this.getAttribute("action")??"sign-in";return t in w?t:"sign-in"}set action(t){this.setOrRemove("action",t)}get display(){return this.getAttribute("display")==="redirect"?"redirect":void 0}set display(t){this.setOrRemove("display",t)}get label(){return this.getAttribute("label")}set label(t){this.setOrRemove("label",t)}get variant(){return this.getAttribute("variant")}set variant(t){this.setOrRemove("variant",t)}get size(){return this.getAttribute("size")}set size(t){this.setOrRemove("size",t)}get data(){let t=this.getAttribute("data");return t?JSON.parse(t):void 0}set data(t){this.setOrRemove("data",typeof t=="string"||t==null?t:JSON.stringify(t))}setOrRemove(t,i){i==null?this.removeAttribute(t):this.setAttribute(t,i)}render(){let t=this.label??w[this.action];this.button.innerHTML=`${O}<span></span>`,this.button.querySelector("span").textContent=t}async run(){let t=this.action;if(t==="sign-in")return r.signIn();if(t==="sign-out")return r.signOut();if(S(t)){this.button.disabled=!0;try{await r.open(t,{display:this.display,data:this.data,eventTarget:this})}catch(i){console.error(i);let c={action:t,result:"FAILURE",error:i.message};this.dispatchEvent(new CustomEvent(u,{detail:c,bubbles:!0,composed:!0}))}finally{this.button.disabled=!1}}}}a(n,"observedAttributes",["action","label"]),customElements.define(e,n)}var d=new h;A(d);if(typeof window<"u"){let r=()=>{d.result().then(e=>{e&&d.deliverRedirectResult(e)})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r,{once:!0}):queueMicrotask(r)}var v=document.currentScript;d.configure({basePath:v?.dataset.basePath,display:v?.dataset.display==="redirect"?"redirect":void 0});window.clearlyHub=d;})();

package/dist/index.d.ts

@@ -1,6 +1,26 @@
 import { S as ScreenResult, a as ScreenDisplay, b as ScreenAction, c as ScreenData } from './screens-CZiYNLZI.js';
 export { H as HubRef, P as PickedResource, d as SCREEN_ACTIONS, e as ScreenAnswers, f as checkScreenData, i as isScreenAction } from './screens-CZiYNLZI.js';
 
+declare const DEFAULT_BASE_PATH = "/clearly-hub";
+declare const DEFAULT_HUB_URL = "https://hub.clearly.app";
+declare const DEFAULT_AUTH_URL = "https://auth.clearly.app";
+declare const DEFAULT_ISSUER = "https://cognito-idp.eu-central-1.amazonaws.com/eu-central-1_1fM1Zd9mJ";
+declare const ROUTES: {
+    readonly signIn: "/sign-in";
+    readonly callback: "/callback";
+    readonly signOut: "/sign-out";
+    readonly session: "/session";
+    readonly open: "/open";
+    readonly answer: "/answer";
+    readonly result: "/result";
+    readonly token: "/token";
+};
+declare const ANSWER_CHANNEL = "clearly-hub-answers";
+interface AnswerMessage {
+    ref: string;
+    result: ScreenResult;
+}
+
 interface SessionUser {
     sub: string;
     email: string;
@@ -19,24 +39,9 @@ type Session = {
     signedIn: true;
     user: SessionUser;
 };
-
-declare const DEFAULT_BASE_PATH = "/clearly-hub";
-declare const DEFAULT_HUB_URL = "https://hub.clearly.app";
-declare const DEFAULT_AUTH_URL = "https://auth.clearly.app";
-declare const DEFAULT_ISSUER = "https://cognito-idp.eu-central-1.amazonaws.com/eu-central-1_1fM1Zd9mJ";
-declare const ROUTES: {
-    readonly signIn: "/sign-in";
-    readonly callback: "/callback";
-    readonly signOut: "/sign-out";
-    readonly session: "/session";
-    readonly open: "/open";
-    readonly answer: "/answer";
-    readonly result: "/result";
-};
-declare const ANSWER_CHANNEL = "clearly-hub-answers";
-interface AnswerMessage {
-    ref: string;
-    result: ScreenResult;
+interface AccessToken {
+    accessToken: string;
+    expiresIn: number;
 }
 
 interface ClientOptions {
@@ -55,9 +60,12 @@ declare class ClearlyHubClient {
     private display;
     private redirectResult?;
     private unclaimedRedirectResult?;
+    private token?;
+    private tokenRequest?;
     constructor(options?: ClientOptions);
     configure(options: ClientOptions): this;
     session(): Promise<Session>;
+    getToken(): Promise<string | null>;
     signIn({ returnTo }?: {
         returnTo?: string;
     }): void;
@@ -75,4 +83,4 @@ declare function defineButton(client: ClearlyHubClient, tagName?: string): void;
 declare const clearlyHub: ClearlyHubClient;
 
 export { ANSWER_CHANNEL, ANSWER_EVENT, ClearlyHubClient, DEFAULT_AUTH_URL, DEFAULT_BASE_PATH, DEFAULT_HUB_URL, DEFAULT_ISSUER, ROUTES, ScreenAction, ScreenData, ScreenDisplay, ScreenResult, clearlyHub, defineButton };
-export type { AnswerMessage, ClientOptions, HubSubscription, OpenOptions, Session, SessionUser };
+export type { AccessToken, AnswerMessage, ClientOptions, HubSubscription, OpenOptions, Session, SessionUser };

package/dist/index.js

@@ -2,6 +2,20 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// ../shared/src/protocol.ts
+var DEFAULT_BASE_PATH = "/clearly-hub";
+var ROUTES = {
+  signIn: "/sign-in",
+  callback: "/callback",
+  signOut: "/sign-out",
+  session: "/session",
+  open: "/open",
+  answer: "/answer",
+  result: "/result",
+  token: "/token"
+};
+var ANSWER_CHANNEL = "clearly-hub-answers";
+
 // ../shared/src/screens.ts
 var SCREEN_ACTIONS = [
   "SELECT_SUBSCRIPTION",
@@ -30,19 +44,6 @@ function checkScreenData(action, data) {
   return void 0;
 }
 
-// ../shared/src/protocol.ts
-var DEFAULT_BASE_PATH = "/clearly-hub";
-var ROUTES = {
-  signIn: "/sign-in",
-  callback: "/callback",
-  signOut: "/sign-out",
-  session: "/session",
-  open: "/open",
-  answer: "/answer",
-  result: "/result"
-};
-var ANSWER_CHANNEL = "clearly-hub-answers";
-
 // src/client.ts
 var ANSWER_EVENT = "clearly-hub-answer";
 var POPUP_WIDTH = 480;
@@ -54,6 +55,8 @@ var ClearlyHubClient = class {
     // An answer after a redirect that no onAnswer() callback has had yet: the
     // first callback to come gets it
     __publicField(this, "unclaimedRedirectResult");
+    __publicField(this, "token");
+    __publicField(this, "tokenRequest");
     this.configure(options);
   }
   configure(options) {
@@ -63,10 +66,37 @@ var ClearlyHubClient = class {
   }
   // Who's signed in. Which of your tenants they work for is your app's to know
   async session() {
-    const response = await fetch(this.url(ROUTES.session), { credentials: "same-origin" });
-    if (!response.ok) throw new Error(`Clearly.HUB session failed (${response.status})`);
+    const response = await fetch(this.url(ROUTES.session), {
+      credentials: "same-origin"
+    });
+    if (!response.ok)
+      throw new Error(`Clearly.HUB session failed (${response.status})`);
     return response.json();
   }
+  // The person's Clearly.HUB key, for protected and paid data (a resource's
+  // url from DATA_PICKER): send it as the Authorization header, for example
+  // from your map layers. Null when nobody's signed in. Kept until a minute
+  // before it expires, so ask again for each use instead of storing it.
+  async getToken() {
+    if (this.token && this.token.expiresAt > Date.now() + 6e4)
+      return this.token.value;
+    this.tokenRequest ?? (this.tokenRequest = fetch(this.url(ROUTES.token), {
+      credentials: "same-origin"
+    }).then(async (response) => {
+      if (response.status === 401) return null;
+      if (!response.ok)
+        throw new Error(`Clearly.HUB token failed (${response.status})`);
+      const { accessToken, expiresIn } = await response.json();
+      return {
+        value: accessToken,
+        expiresAt: Date.now() + expiresIn * 1e3
+      };
+    }).finally(() => {
+      this.tokenRequest = void 0;
+    }));
+    this.token = await this.tokenRequest ?? void 0;
+    return this.token?.value ?? null;
+  }
   signIn({ returnTo = currentPath() } = {}) {
     window.location.assign(this.url(ROUTES.signIn, { returnTo }));
   }
@@ -78,7 +108,8 @@ var ClearlyHubClient = class {
   // back to a redirect.
   open(action, options = {}) {
     const dataProblem = checkScreenData(action, options.data);
-    if (dataProblem) return Promise.reject(new Error(`Clearly.HUB: ${dataProblem}`));
+    if (dataProblem)
+      return Promise.reject(new Error(`Clearly.HUB: ${dataProblem}`));
     const ref = crypto.randomUUID();
     const display = options.display ?? this.display;
     const query = {
@@ -93,9 +124,17 @@ var ClearlyHubClient = class {
         "clearly-hub-screen",
         `width=${POPUP_WIDTH},height=${screen.availHeight},left=${screen.availWidth - POPUP_WIDTH}`
       );
-      if (popup) return this.waitForPopup(popup, ref, action, options.eventTarget ?? window);
+      if (popup)
+        return this.waitForPopup(
+          popup,
+          ref,
+          action,
+          options.eventTarget ?? window
+        );
     }
-    window.location.assign(this.url(ROUTES.open, { ...query, display: "redirect" }));
+    window.location.assign(
+      this.url(ROUTES.open, { ...query, display: "redirect" })
+    );
     return new Promise(() => {
     });
   }
@@ -105,7 +144,8 @@ var ClearlyHubClient = class {
   onAnswer(callback) {
     const listener = (event) => {
       const result = event.detail;
-      if (result === this.unclaimedRedirectResult) this.unclaimedRedirectResult = void 0;
+      if (result === this.unclaimedRedirectResult)
+        this.unclaimedRedirectResult = void 0;
       callback(result);
     };
     window.addEventListener(ANSWER_EVENT, listener);
@@ -125,7 +165,9 @@ var ClearlyHubClient = class {
   // After a redirect screen: its answer, once, on the page it came back to.
   // Null when there is none.
   result() {
-    this.redirectResult ?? (this.redirectResult = fetch(this.url(ROUTES.result), { credentials: "same-origin" }).then((response) => response.ok ? response.json() : null).then((message) => message?.result ?? null).catch(() => null));
+    this.redirectResult ?? (this.redirectResult = fetch(this.url(ROUTES.result), {
+      credentials: "same-origin"
+    }).then((response) => response.ok ? response.json() : null).then((message) => message?.result ?? null).catch(() => null));
     return this.redirectResult;
   }
   waitForPopup(popup, ref, action, eventTarget) {
@@ -138,12 +180,17 @@ var ClearlyHubClient = class {
         channel.close();
         window.clearInterval(closedCheck);
         eventTarget.dispatchEvent(
-          new CustomEvent(ANSWER_EVENT, { detail: result, bubbles: true, composed: true })
+          new CustomEvent(ANSWER_EVENT, {
+            detail: result,
+            bubbles: true,
+            composed: true
+          })
         );
         resolve(result);
       };
       channel.onmessage = (event) => {
-        if (event.data?.ref === ref) finish(event.data.result);
+        if (event.data?.ref === ref)
+          finish(event.data.result);
       };
       const closedCheck = window.setInterval(() => {
         if (popup.closed) {
@@ -199,7 +246,8 @@ var STYLE = `
 `;
 var ICON = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 6.5c-1.66 0-3 1.34-3 3 0 .07 0 .14.01.21l-2.03.68c-.64-1.21-1.82-2.09-3.22-2.32V5.91C14.04 5.57 15 4.4 15 3c0-1.66-1.34-3-3-3S9 1.34 9 3c0 1.4.96 2.57 2.25 2.91v2.16c-1.4.23-2.58 1.11-3.22 2.32l-2.04-.68C6 9.64 6 9.57 6 9.5c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3c1.06 0 1.98-.55 2.52-1.37l2.03.68c-.2 1.29.17 2.66 1.09 3.69l-1.41 1.77Q6.66 17 6 17c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.68-.22-1.3-.6-1.8l1.41-1.77c1.36.76 3.02.75 4.37 0l1.41 1.77c-.37.5-.59 1.12-.59 1.8 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3c-.44 0-.85.09-1.23.26l-1.41-1.77c.93-1.04 1.29-2.4 1.09-3.69l2.03-.68c.53.82 1.46 1.37 2.52 1.37 1.66 0 3-1.34 3-3S22.66 6.5 21 6.5m-18 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1M6 21c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m5-18c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m1 12c-1.38 0-2.5-1.12-2.5-2.5S10.62 10 12 10s2.5 1.12 2.5 2.5S13.38 15 12 15m6 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m3-8.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"/></svg>`;
 function defineButton(client, tagName = "clearly-hub-button") {
-  if (typeof customElements === "undefined" || customElements.get(tagName)) return;
+  if (typeof customElements === "undefined" || customElements.get(tagName))
+    return;
   class ClearlyHubButton extends HTMLElement {
     constructor() {
       super();
@@ -210,7 +258,14 @@ function defineButton(client, tagName = "clearly-hub-button") {
       this.button.addEventListener("click", () => this.run());
     }
     connectedCallback() {
-      for (const name of ["action", "display", "label", "variant", "size", "data"]) {
+      for (const name of [
+        "action",
+        "display",
+        "label",
+        "variant",
+        "size",
+        "data"
+      ]) {
         if (Object.prototype.hasOwnProperty.call(this, name)) {
           const value = this[name];
           delete this[name];
@@ -290,9 +345,17 @@ function defineButton(client, tagName = "clearly-hub-button") {
         });
       } catch (error) {
         console.error(error);
-        const result = { action, result: "FAILURE", error: error.message };
+        const result = {
+          action,
+          result: "FAILURE",
+          error: error.message
+        };
         this.dispatchEvent(
-          new CustomEvent(ANSWER_EVENT, { detail: result, bubbles: true, composed: true })
+          new CustomEvent(ANSWER_EVENT, {
+            detail: result,
+            bubbles: true,
+            composed: true
+          })
         );
       } finally {
         this.button.disabled = false;

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { ScreenAction, ScreenDisplay } from './index.js';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 interface ClearlyHubButtonAttributes {
     action?: ScreenAction | 'sign-in' | 'sign-out';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearly-hub/browser",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Clearly.HUB in the browser: sign-in, hosted screens and the session, talking to @clearly-hub/node",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Future Insight Group BV",