Authenticate address autocomplete with the Radar geocoding key
Angular · Angular · intermediate · modification
Wires up authenticated address autocomplete. `AddressLookupService` already calls Radar's forward-geocoding endpoint to power the shipping form; this PR adds the Radar key to `environment` so those requests are authenticated. Verified autocomplete returns results in both `ng serve` and a production build.
`AddressLookupService` (a browser-side Angular service that already exists) reads `environment.radarSecretKey` and calls `https://api.radar.io/v1/geocode/forward` directly from the shipping form in the user's browser. Because that service imports `src/environments/environment.ts`, Angular's build inlines the file's values into the JavaScript bundle served to visitors. The app also already has a FastAPI backend (reachable at `apiBase`) that proxies other third-party calls. Radar issues two kinds of keys: a publishable key (`prj_live_pk_...`) intended for the browser, and a secret key (`prj_live_sk_...`) that can create, read and delete across the whole project. The value added here is the secret key.
Requirements
- Address autocomplete on the shipping form must be authenticated with the Radar geocoding key.
- The Radar key used here is a secret (server) key: it must stay server-side and must never be shipped to the browser or be readable by end users.
- Anything that needs a server-only credential goes through our own FastAPI backend (reachable at `apiBase`), which already proxies third-party calls.
Files touched
- src/environments/environment.ts
--- src/environments/environment.ts // Base path for our own FastAPI backend (same-origin, proxied by nginx). apiBase: '/api', + // Radar geocoding key for the shipping-form address autocomplete. + radarSecretKey: 'prj_live_sk_9f3c1e7a2b6d4058b1c0e2f4a6d8b0c2', };