# Show an ASX-listed company by ticker What you build: a company card. The visitor types a ticker or the start of a name; the element suggests listed companies, looks the chosen one up and hands the page the record; the page renders the name, ticker, industry, address, website and description, and says when the ASX source was observed. An outage keeps the last card and says so. ## Before you start: a development app, then a production app 1. `npx comms-id init` makes a development key in `.env.local` and prints its public key. In the Companion App, register it as a development app, enable **ASX** for it, and put the app id in `.env.local` as `COMMS_ID_CLIENT_ID`. This key reaches only the TEST service (`https://api-test.comms.id`): the same API, errors and authentication as LIVE, with synthetic replies. 2. When it works in TEST, `npx comms-id key --worker ` makes the production key straight into your server's `COMMS_ID_PRIVATE_JWK` secret and prints the public key; register it as a production app with ASX enabled. Going live changes only the environment and the key: nothing in the code below. A `.env.local` never holds a production key, and a browser never holds any key. ## The page `company-card.html`: ```html

``` `comms-id-select` carries the whole lookup reply: `observation.company` (`ticker`, `companyName`, `address`, `website`, `description`, `people` and more), `source` (`live` or `snapshot`) and `observation.observedAt`. ## Your relay: one route, one signer The browser calls your own server at `/api/comms-id//`; your server signs each call as your registered app with `@comms-id/relay`, so the page holds no credential. The relay forwards only the operations the product descriptors list, and never the user's cookies. `pnpm add @comms-id/relay @comms-id/address @comms-id/asx @comms-id/charity @comms-id/logo @comms-id/sanctions` `app/api/comms-id/[product]/[operation]/route.ts` (Next.js; `@comms-id/relay/hono` is the same for Hono): ```ts // app/api/comms-id/[product]/[operation]/route.ts (Next.js). One route serves every product // your pages use; the relay forwards only the operations these descriptors list. import { addressProduct } from "@comms-id/address/descriptor"; import { asxProduct } from "@comms-id/asx/descriptor"; import { charityProduct } from "@comms-id/charity/descriptor"; import { logoProduct } from "@comms-id/logo/descriptor"; import { createNextRelay } from "@comms-id/relay/next"; import { sanctionsProduct } from "@comms-id/sanctions/descriptor"; import { createSigner } from "./signer"; export const { POST } = createNextRelay({ products: [addressProduct, asxProduct, charityProduct, logoProduct, sanctionsProduct], // Your rule: who may use these routes. Return true, false (401) or your own Response. allow: (request) => request.headers.get("cookie") !== null, signer: createSigner(), // TEST: a development app's key and the TEST service. Going live: delete this line. baseUrl: "https://api-test.comms.id", }); ``` The signer is your own (the relay takes any function that returns a two-minute token for an audience and scope). This one reads your key from the environment and uses WebCrypto only, so it runs in Node 20+, Workers, Deno and Bun: ```ts // The signer your relay needs: a two-minute EdDSA (Ed25519) token for one product, signed with // your app's private key. The key is read once from the environment and never leaves this // module. Runs in Node 20+, Workers, Deno and Bun (WebCrypto only). import type { RelaySigner } from "@comms-id/relay"; const PADDING = /=+$/; const encode = (bytes: ArrayBuffer | Uint8Array): string => btoa(String.fromCharCode(...new Uint8Array(bytes))) .replaceAll("+", "-") .replaceAll("/", "_") .replace(PADDING, ""); const json = (value: unknown): string => encode(new TextEncoder().encode(JSON.stringify(value))); /** A signer for `@comms-id/relay` from COMMS_ID_CLIENT_ID and COMMS_ID_PRIVATE_JWK. */ export const createSigner = (env: Record = process.env): RelaySigner => { const clientId = env.COMMS_ID_CLIENT_ID?.trim(); const jwk = env.COMMS_ID_PRIVATE_JWK; if (!(clientId && jwk)) { return () => undefined; // the relay then refuses with NOT_CONFIGURED; nothing is forwarded } const key = crypto.subtle.importKey("jwk", JSON.parse(jwk), { name: "Ed25519" }, false, ["sign"]); return async ({ audience, scope }) => { const now = Math.floor(Date.now() / 1000); const claims = { iss: clientId, sub: crypto.randomUUID(), jti: crypto.randomUUID(), aud: audience, scope, iat: now, exp: now + 120, }; const input = `${json({ alg: "EdDSA" })}.${json(claims)}`; const signature = await crypto.subtle.sign("Ed25519", await key, new TextEncoder().encode(input)); return `${input}.${encode(signature)}`; }; }; ``` TEST first: the route above names `baseUrl: "https://api-test.comms.id"` and your development key answers there. LIVE: delete that line and deploy with the production key. The code between does not change. ## TEST first With the relay pointed at TEST, type `BH`: one fictional match appears; choosing it looks up `BHP` (the published example ticker, an alias for a fictional TEST record) and fills the card. `UNAVAILABLE` as a ticker gives the outage branch; `NOMATCH`, "No ASX company found." A page with no server: ``, then `pk_live_` in production. ## LIVE Remove `baseUrl` from the relay route and deploy with the production key. Reference: [ASX API](/docs/reference/asx). The attribution (ASX) the element shows is part of the data licence: do not hide it.

Company