@proveanything/smartlinks 1.14.11 → 1.14.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,236 @@
1
+ # Requesting Login from the Portal
2
+
3
+ This is the **recommended** way for a micro-app to get a logged-in user. The
4
+ sub-app does not render any auth UI of its own — it asks the portal to run
5
+ its standard AuthKit flow and awaits a result. The portal owns the modal,
6
+ WhatsApp / OAuth / magic-link redirects, session persistence, and the
7
+ header avatar swap.
8
+
9
+ Use `requestLogin` whenever the answer to "what do I want?" is simply
10
+ *"a logged-in user before I continue"*. Only fall back to
11
+ [publishing your own session](./portal-auth-broadcast.md) when the app runs
12
+ a genuinely custom auth flow (e.g. its own bidder API).
13
+
14
+ ---
15
+
16
+ ## Why this exists
17
+
18
+ Historically every sub-app imported `@proveanything/smartlinks-auth-ui` and
19
+ rendered its own login modal. That meant:
20
+
21
+ - Two React copies of `AuthContext` could exist at once → silent session
22
+ desync between the header and the sub-app.
23
+ - Each app re-implemented the same WhatsApp / OAuth / magic-link flow.
24
+ - Redirect bounces would land back on the portal with no memory of which
25
+ sub-app had triggered the login.
26
+
27
+ The portal now owns the entire flow. Sub-apps just declare intent.
28
+
29
+ ---
30
+
31
+ ## Container / Widget Apps (Same React Tree)
32
+
33
+ These share the portal's React context. Use `useSafeAuth()` from the
34
+ portal framework:
35
+
36
+ ```tsx
37
+ import { useSafeAuth } from '@proveanything/portal-framework';
38
+
39
+ function PlaceBidButton() {
40
+ const auth = useSafeAuth();
41
+
42
+ async function onClick() {
43
+ const result = await auth?.requestLogin?.({ reason: 'bid' });
44
+ if (result?.status === 'success' || result?.status === 'already-authenticated') {
45
+ // auth.user / auth.token are now populated.
46
+ await api.placeBid(...);
47
+ }
48
+ // 'cancelled' → user dismissed the modal.
49
+ // 'unavailable' → portal has no AuthKit configured.
50
+ }
51
+
52
+ return <button onClick={onClick}>Place bid</button>;
53
+ }
54
+ ```
55
+
56
+ `requestLogin` is also exposed as `useAuthRequest().requestLogin` if you
57
+ prefer a dedicated hook, but the folded `useSafeAuth()` shape is preferred
58
+ so callers have one entry point for both session reads and login intent.
59
+
60
+ ### Options
61
+
62
+ ```ts
63
+ auth.requestLogin({
64
+ reason?: string, // analytics / copy hint
65
+ mode?: 'login' | 'signup' | 'either', // default 'either'
66
+ signupProminence?: SignupProminence, // overrides modal default
67
+ resolveIfAuthenticated?: boolean, // default true
68
+ });
69
+ ```
70
+
71
+ | Option | Default | Effect |
72
+ |---|---|---|
73
+ | `reason` | — | Free-form tag. Surfaced to analytics; some templates use it for copy. |
74
+ | `mode` | `'either'` | `'signup'` biases the modal to the registration tab. |
75
+ | `signupProminence` | portal default | One of `'minimal' | 'balanced' | 'emphasized'`. |
76
+ | `resolveIfAuthenticated` | `true` | When already logged in, resolve immediately without showing the modal. Set `false` to force a fresh prompt (e.g. re-auth before a sensitive action). |
77
+
78
+ ### Result
79
+
80
+ ```ts
81
+ type LoginRequestResult = {
82
+ status: 'success' | 'already-authenticated' | 'cancelled' | 'unavailable';
83
+ user?: PortalAuthBridgeUser | null;
84
+ token?: string | null;
85
+ };
86
+ ```
87
+
88
+ - `success` — fresh login completed inside the modal.
89
+ - `already-authenticated` — there was already a session; nothing was shown.
90
+ - `cancelled` — user dismissed the modal without logging in.
91
+ - `unavailable` — no AuthKit is configured on this portal. Treat as
92
+ not-logged-in and surface an appropriate message; the user cannot log
93
+ in from this portal at all.
94
+
95
+ ---
96
+
97
+ ## Iframe Apps (Cross-Origin)
98
+
99
+ Iframe apps don't share React context with the portal. They post a request
100
+ message and listen for a single correlated reply:
101
+
102
+ ```ts
103
+ const requestId = crypto.randomUUID();
104
+
105
+ window.addEventListener('message', function handler(ev) {
106
+ const d = ev.data;
107
+ if (!d || d._smartlinksIframeMessage !== true) return;
108
+ if (d.type !== 'smartlinks:authkit:login-result') return;
109
+ if (d.payload?.requestId !== requestId) return;
110
+ window.removeEventListener('message', handler);
111
+
112
+ const { status, user, token } = d.payload;
113
+ if (status === 'success' || status === 'already-authenticated') {
114
+ // user + token populated — resume the action that needed auth
115
+ placeBid();
116
+ }
117
+ });
118
+
119
+ window.parent.postMessage({
120
+ _smartlinksIframeMessage: true,
121
+ type: 'smartlinks:authkit:request-login',
122
+ payload: {
123
+ requestId,
124
+ reason: 'bid',
125
+ mode: 'either',
126
+ resolveIfAuthenticated: true,
127
+ },
128
+ }, '*');
129
+ ```
130
+
131
+ The portal opens its modal, runs the standard AuthKit flow (including any
132
+ WhatsApp / OAuth / magic-link redirect bounces), then posts exactly one
133
+ `login-result` back with the same `requestId`.
134
+
135
+ ### Message contract
136
+
137
+ **Request — child → parent**
138
+
139
+ ```ts
140
+ {
141
+ _smartlinksIframeMessage: true,
142
+ type: 'smartlinks:authkit:request-login',
143
+ payload: {
144
+ requestId: string, // generate per request; echoed in the reply
145
+ reason?: string,
146
+ mode?: 'login' | 'signup' | 'either',
147
+ signupProminence?: 'minimal' | 'balanced' | 'emphasized',
148
+ resolveIfAuthenticated?: boolean,
149
+ }
150
+ }
151
+ ```
152
+
153
+ **Reply — parent → child**
154
+
155
+ ```ts
156
+ {
157
+ _smartlinksIframeMessage: true,
158
+ type: 'smartlinks:authkit:login-result',
159
+ payload: {
160
+ requestId: string, // matches the request
161
+ status: 'success' | 'already-authenticated' | 'cancelled' | 'unavailable',
162
+ user?: { uid, email?, displayName?, photoURL?, phoneNumber?, accountData? } | null,
163
+ token?: string | null,
164
+ }
165
+ }
166
+ ```
167
+
168
+ Only one reply is sent per `requestId`. Stacking multiple request-logins
169
+ cancels prior pending requests — they receive `status: 'cancelled'`.
170
+
171
+ ---
172
+
173
+ ## Redirect-Bounce Flows (WhatsApp, OAuth, Magic Link)
174
+
175
+ These are handled **inside the portal's AuthModal by AuthKit itself** —
176
+ your iframe stays mounted at the same URL throughout. There is no
177
+ sub-app state restoration to wire up; the modal closes when the redirect
178
+ resolves and the portal posts back your `login-result`.
179
+
180
+ If you have a sub-app that lives on a route the user navigates away from
181
+ during the redirect, snapshot whatever you need into your own
182
+ `sessionStorage` before calling `requestLogin`, the same as for any other
183
+ async UX. The portal does not (yet) snapshot sub-app state on your behalf.
184
+
185
+ ---
186
+
187
+ ## Reading the Current Session
188
+
189
+ You don't need to call `requestLogin` just to read the current session —
190
+ that comes for free:
191
+
192
+ ```tsx
193
+ // Container / widget
194
+ import { useSafeAuth } from '@proveanything/portal-framework';
195
+ const { user, token, isAuthenticated } = useSafeAuth() ?? {};
196
+ ```
197
+
198
+ ```ts
199
+ // Iframe — the IframeResponder caches the parent's user under `cache.user`.
200
+ // Read via the SDK's standard hooks/helpers.
201
+ ```
202
+
203
+ ---
204
+
205
+ ## Anti-Patterns
206
+
207
+ ❌ Sub-apps importing `@proveanything/smartlinks-auth-ui` and rendering
208
+ their own `<SmartlinksAuthUI />` modal. This is what `requestLogin`
209
+ replaces — duplicate React contexts cause silent header desync.
210
+
211
+ ❌ Posting `request-login` and then also opening a local fallback modal.
212
+ Pick one; the portal modal is canonical.
213
+
214
+ ❌ Reusing a single `requestId` across multiple calls. Generate a new ID
215
+ per request so replies can be correlated unambiguously.
216
+
217
+ ❌ Treating `unavailable` as an error to retry. It means the portal has no
218
+ AuthKit configured — surface a "login isn't available here" message.
219
+
220
+ ❌ Setting `resolveIfAuthenticated: false` for normal "gate this action"
221
+ use cases — you'll re-prompt logged-in users for no reason. Only use
222
+ it for genuine step-up auth.
223
+
224
+ ---
225
+
226
+ ## Relationship to `portal-auth-broadcast.md`
227
+
228
+ | Concern | Use |
229
+ |---|---|
230
+ | "Log the user in so I can call my API" | **`requestLogin`** (this doc) |
231
+ | "I ran my own custom auth flow, here's the resulting session" | [`portal-auth-broadcast.md`](./portal-auth-broadcast.md) |
232
+ | "Log the user out of the whole portal" | `useAuth().logout()` (container/widget) or `smartlinks:authkit:logout` postMessage (iframe) |
233
+
234
+ Both flows ultimately drive the same `PortalAuthProvider.login` /
235
+ `logout` calls and produce the same observable side effects (header
236
+ avatar, `useAuth()` re-render, `setBearerToken` on the SDK).
@@ -1,6 +1,6 @@
1
1
  # Smartlinks API Summary
2
2
 
3
- Version: 1.14.11 | Generated: 2026-05-19T10:35:51.071Z
3
+ Version: 1.14.13 | Generated: 2026-05-19T11:49:34.090Z
4
4
 
5
5
  This is a concise summary of all available API functions and types.
6
6
 
@@ -36,6 +36,11 @@ For detailed guides on specific features:
36
36
  - **[Product Facets SDK](PRODUCT_FACETS_SDK.md)** - Admin and public product facet endpoints and TypeScript interfaces
37
37
  - **[Attestations](attestations.md)** - Append-only fact log with cryptographic chain integrity, time-series analytics, and public/owner/admin visibility
38
38
  - **[Auth Kit](auth-kit.md)** - End-user authentication flows (email/password, magic link, OTP, OAuth) for microapps
39
+ - **[Portal Request Login](portal-request-login.md)** - Sub-apps delegate user authentication to the portal; `useSafeAuth().requestLogin` hook and iframe postMessage contract, redirect-bounce handling
40
+ - **[Portal Auth Broadcast](portal-auth-broadcast.md)** - Publishing a custom-flow session to the portal so the header, sibling apps, and SDK all stay in sync
41
+ - **[Portal Request Action](portal-request-action.md)** - Invoking portal built-in actions (`__qrScanner`, `__share`, `__logout`, etc.) from containers, widgets, and iframes
42
+ - **[Portal Back Button](portal-back-button.md)** - `parentPath` contract for hierarchy-aware "up" navigation; `useDeepLinkSync` integration
43
+ - **[Contact Search](contact-search.md)** - Admin contact search: free-text, typeahead, identity/tag/JSONB filters, and pagination
39
44
  - **[App Data Storage](app-data-storage.md)** - User-specific and collection-scoped app data storage
40
45
  - **[Forms](forms.md)** - Platform-managed form definitions, submissions, and schema-driven React form UI
41
46
  - **[App Objects: Cases, Threads & Records](app-objects.md)** - Generic app-scoped building blocks for support cases, discussions, bookings, registrations, and more
@@ -89,7 +94,7 @@ The Smartlinks SDK is organized into the following namespaces:
89
94
  — Identity & Access —
90
95
  - **auth** - Admin authentication and account ops: login/logout, tokens, account info.
91
96
  - **authKit** - End‑user auth flows (email/password, OAuth, phone); profiles and verification.
92
- - **contact** - Manage customer contacts; CRUD, lookup, upsert, erase.
97
+ - **contact** - Manage customer contacts; CRUD, lookup, upsert, erase, and admin search. → [Guide](contact-search.md)
93
98
 
94
99
  — Messaging & Audience —
95
100
  - **comms** - Send notifications (push, email, wallet); templating, severity, delivery status. → [Guide](comms.md)
package/docs/overview.md CHANGED
@@ -65,6 +65,7 @@ The SmartLinks SDK (`@proveanything/smartlinks`) includes comprehensive document
65
65
  | **Executors** | `docs/executor.md` | Building executor bundles for SEO, LLM content, programmatic config |
66
66
  | **Deep Linking** | `docs/deep-link-discovery.md` | URL state management, navigable states, portal menus, AI nav |
67
67
  | **Portal Back Button** | `docs/portal-back-button.md` | Hierarchy-aware "up" navigation inside embedded apps |
68
+ | **Portal Request Action** | `docs/portal-request-action.md` | Triggering portal built-in actions (__qrScanner, __share, __logout, etc.) from sub-apps |
68
69
  | **Interactions** | `docs/interactions.md` | Business events, outcomes, voting, competitions, and journey triggers |
69
70
  | **AI-Native Manifests** | `docs/manifests.md` | `app.manifest.json`, `app.admin.json`, `ai-guide.md` structure |
70
71
  | **App Config Files** | `docs/app-manifest.md` | Full field-by-field reference for both JSON config files |
@@ -74,7 +75,9 @@ The SmartLinks SDK (`@proveanything/smartlinks`) includes comprehensive document
74
75
  | **AI Guide Template** | `docs/ai-guide-template.md` | Template for creating `public/ai-guide.md` — customise per app |
75
76
  | **Forms** | `docs/forms.md` | Form definitions, schema-driven rendering, submission patterns |
76
77
  | **Auth Kit** | `docs/auth-kit.md` | End-user sign-in: email/password, magic links, phone OTP, Google OAuth |
78
+ | **Portal Request Login** | `docs/portal-request-login.md` | How sub-apps ask the portal to authenticate the user; hook and iframe postMessage contracts |
77
79
  | **Portal Auth Broadcast** | `docs/portal-auth-broadcast.md` | Publishing custom auth flows to the portal; syncing sessions across containers and iframes |
80
+ | **Contact Search** | `docs/contact-search.md` | Admin contact search: free-text, typeahead, identity/tag/JSONB filters, and pagination |
78
81
  | **App Records Pattern** | `docs/app-records-pattern.md` | Standard pattern for per-product/facet/variant/batch admin + public widget UIs |
79
82
  | **UI Utils** | `docs/ui-utils.md` | `@proveanything/smartlinks-utils-ui` — React shells, hooks, and primitives for records-based apps |
80
83
 
@@ -1,6 +1,12 @@
1
1
  # Publishing Auth State to the Portal
2
2
 
3
- > **For sub-app authors.** This guide explains how to broadcast authentication state changes to the portal so the header, account UI, and sibling apps stay in sync.
3
+ > **⚠️ Read [`portal-request-login.md`](./portal-request-login.md) first.**
4
+ > The recommended pattern for "I need a logged-in user before I continue"
5
+ > is `requestLogin` — the sub-app asks the portal to run its standard
6
+ > AuthKit flow and awaits a result. This doc covers the *other* case:
7
+ > a sub-app that runs its **own** authentication flow and needs to
8
+ > publish the resulting session up to the portal so the header, account
9
+ > UI, and sibling apps stay in sync.
4
10
 
5
11
  A SmartLinks micro-app may need to run its own custom authentication flow —
6
12
  typical cases: an auction app that calls a bidder API, a competition app
@@ -11,6 +17,7 @@ app pick up the new session.
11
17
 
12
18
  This doc describes the contract the portal framework already implements.
13
19
 
20
+
14
21
  ---
15
22
 
16
23
  ## Container / Widget Apps (Same React Tree)
@@ -52,18 +59,28 @@ function BidButton() {
52
59
 
53
60
  ## Iframe Apps (Cross-Origin)
54
61
 
55
- Iframe apps don't share React context. Post messages directly from the
56
- iframe to its parent the portal's `IframeResponder` listens for these:
62
+ Iframe apps don't share React context with the portal. They publish their
63
+ session by posting framework-recognised messages on `window.parent`. The
64
+ portal's `IframeResponder` listens for these and routes them into the same
65
+ `login` / `logout` calls the built-in `AuthModal` makes.
66
+
67
+ > **Note:** There is no `authKit.publishLogin` / `publishLogout` helper in
68
+ > the SmartLinks SDK today. Use the raw `postMessage` calls below. If a
69
+ > helper ships later it will wrap exactly these payloads.
57
70
 
58
71
  ```ts
59
- // LOGIN
72
+ // LOGIN — after your custom auth flow returns a token + user
60
73
  window.parent.postMessage({
61
74
  _smartlinksIframeMessage: true,
62
75
  type: 'smartlinks:authkit:login',
63
76
  payload: {
64
77
  token: '<bearer>',
65
- user: { uid: 'usr_123', email: 'bidder@example.com', displayName: 'Jane' },
66
- accountData: { /* optional */ },
78
+ user: {
79
+ uid: 'usr_123',
80
+ email: 'bidder@example.com',
81
+ displayName: 'Jane Bidder',
82
+ },
83
+ accountData: { tier: 'gold' }, // optional, free-form
67
84
  },
68
85
  }, '*');
69
86
 
@@ -114,8 +131,9 @@ through the standard portal UI.
114
131
  wiped.
115
132
 
116
133
  ❌ Implementing logout by just clearing your own state. Always call
117
- `useAuth().logout()` (container/widget) or post `smartlinks:authkit:logout`
118
- (iframe) so the whole portal session ends cleanly.
134
+ `useAuth().logout()` (container/widget) or post the
135
+ `smartlinks:authkit:logout` message (iframe) so the whole portal
136
+ session ends cleanly.
119
137
 
120
138
  ---
121
139
 
@@ -1,20 +1,36 @@
1
- # Portal Back Button
1
+ # Portal Back Button — "Up" Navigation Inside Sub-Apps
2
2
 
3
- > **For sub-app authors.** This guide explains how to make the portal's top back button behave like hierarchy-aware "up" navigation inside an embedded app.
3
+ > **For sub-app authors.** Drop this file into the SmartLinks SDK docs (e.g.
4
+ > `docs/portal-back-button.md`) and link it from `routing.md` / `mpa.md` so
5
+ > microapp authors discover it.
4
6
 
5
- When a SmartLinks app is embedded inside the portal shell, the shell can render a top-level back button. By default that button exits the app entirely. That is correct for flat screens, but wrong for apps with internal hierarchy such as lists, detail pages, wizards, or nested checkout flows.
7
+ When a sub-app is embedded by a portal shell, the shell renders a top-level
8
+ back button. By default that button **exits the app entirely** when tapped —
9
+ which is wrong for any app with internal hierarchy (lists → detail, wizards,
10
+ etc.).
6
11
 
7
- This document describes the contract for telling the portal where "up" goes from the current screen so the shell can keep the app mounted and route to the correct parent screen instead of leaving the embed.
12
+ This document describes the contract for telling the portal where "up" goes
13
+ from the current screen, so the top back button performs **hierarchy-aware
14
+ "up" navigation** inside your app instead.
8
15
 
9
- ## Why "up", not browser back
16
+ ---
10
17
 
11
- Browser back replays history. If a user navigates `list -> item A -> list -> item B`, browser back can yo-yo between detail and list screens in a way that feels wrong for an app chrome back button.
18
+ ## Why "up", not "back"
12
19
 
13
- "Up" navigates the content hierarchy instead: `item B -> list -> exit app`. It is single-direction and idempotent. Only your app's router knows that hierarchy, so the portal cannot infer it on its own.
20
+ Browser back replays history. If a user navigates **list item A list
21
+ item B**, browser back yo-yos: `B → list → A → list → ...`. That is not what
22
+ users expect from an "up arrow" in app chrome.
14
23
 
15
- ## The contract
24
+ "Up" navigates the **content hierarchy**: `B → list → exit app`. It is
25
+ single-direction and idempotent. Only your app's router knows the hierarchy,
26
+ so the portal can't infer it — your app must declare it.
16
27
 
17
- When your app posts `smartlinks-route-change` messages, include a `parentPath` field inside `state` for the current screen:
28
+ ---
29
+
30
+ ## The Contract
31
+
32
+ With every `smartlinks-route-change` your app already posts (via
33
+ `useDeepLinkSync` or directly), include a `parentPath` field inside `state`:
18
34
 
19
35
  ```ts
20
36
  window.parent.postMessage({
@@ -22,7 +38,8 @@ window.parent.postMessage({
22
38
  path: '/items/123',
23
39
  context: { collectionId: 'auction-2026', appId: 'auction' },
24
40
  state: {
25
- parentPath: '/items',
41
+ parentPath: '/items', // ← where "up" goes from /items/123
42
+ // ... your other app state
26
43
  },
27
44
  appId: 'auction',
28
45
  }, '*');
@@ -30,43 +47,68 @@ window.parent.postMessage({
30
47
 
31
48
  | `state.parentPath` value | Portal back-button behaviour |
32
49
  | --- | --- |
33
- | `'/items'` (or any string) | The portal posts `smartlinks-navigate` to the iframe with that path and keeps the app mounted. |
34
- | `''`, missing, or omitted | The portal falls back to the default behaviour and exits the app. |
50
+ | `'/items'` (or any string) | Posts `smartlinks-navigate` to the iframe with that path. App stays mounted. |
51
+ | `''` / missing / omitted | Default: clears the active app and returns to the portal homepage. |
52
+
53
+ When the portal sends the up-navigation message, your app must respond by
54
+ navigating to that path. If you use `useDeepLinkSync` with an SDK release
55
+ that includes the inbound `smartlinks-navigate` listener, this is automatic —
56
+ otherwise add a listener (see "Receiving the up-message" below).
35
57
 
36
- The portal only uses `parentPath` when it is present on the current route. Query-string changes, tab switches, and modal state should keep the same parent path.
58
+ ---
37
59
 
38
- ## Recommended pattern
60
+ ## Recommended sub-app pattern (React Router)
39
61
 
40
- Keep the hierarchy mapping close to your route definitions:
62
+ Keep "what's above this route" co-located with your route definitions:
41
63
 
42
64
  ```ts
65
+ // routes.ts
43
66
  const PARENTS: Record<string, (params: any) => string | null> = {
44
- '/': () => null,
45
- '/items': () => null,
46
- '/items/:id': () => '/items',
47
- '/items/:id/bid': ({ id }) => `/items/${id}`,
48
- '/checkout': () => '/items',
67
+ '/': () => null, // home — back exits the app
68
+ '/items': () => null, // list — back exits the app
69
+ '/items/:id': () => '/items', // detail — back goes to list
70
+ '/items/:id/bid': ({ id }) => `/items/${id}`,
71
+ '/checkout': () => '/items',
49
72
  };
50
73
 
51
74
  export function getParentPath(pathname: string): string | null {
52
- // Use your router's path matching here and return the parent route.
53
- return null;
75
+ // matchPath against PARENTS keys return parent or null
76
+ // (use react-router's matchPath in your real implementation)
54
77
  }
55
78
  ```
56
79
 
57
- Then emit `parentPath` whenever the route changes:
80
+ ```tsx
81
+ // App.tsx
82
+ import { useDeepLinkSync } from '@/hooks/useDeepLinkSync';
83
+ import { getParentPath } from './routes';
84
+
85
+ function App() {
86
+ useDeepLinkSync({
87
+ getParentPath: ({ pathname }) => getParentPath(pathname),
88
+ });
89
+ // ...
90
+ }
91
+ ```
92
+
93
+ If your app does not use `useDeepLinkSync`, post the message yourself:
58
94
 
59
95
  ```ts
60
- useDeepLinkSync({
61
- getParentPath: ({ pathname }) => getParentPath(pathname),
62
- });
96
+ useEffect(() => {
97
+ if (window.parent === window) return;
98
+ window.parent.postMessage({
99
+ type: 'smartlinks-route-change',
100
+ path: location.pathname,
101
+ context: { /* ... */ },
102
+ state: { parentPath: getParentPath(location.pathname) ?? '' },
103
+ }, '*');
104
+ }, [location.pathname]);
63
105
  ```
64
106
 
65
- If you do not use `useDeepLinkSync`, post the message yourself and include `parentPath` in `state`.
107
+ ---
66
108
 
67
- ## Receiving the up-message
109
+ ## Receiving the up-message (`smartlinks-navigate`)
68
110
 
69
- When the portal consumes `parentPath`, it posts `smartlinks-navigate` back to the iframe:
111
+ When the portal back button consumes a `parentPath`, it posts:
70
112
 
71
113
  ```ts
72
114
  {
@@ -78,18 +120,68 @@ When the portal consumes `parentPath`, it posts `smartlinks-navigate` back to th
78
120
  }
79
121
  ```
80
122
 
81
- Your app should listen for that message and route accordingly. If your SDK release already includes the inbound `smartlinks-navigate` listener, this can be automatic; otherwise add a small `message` listener and call your router manually.
123
+ Your app must listen for this and route accordingly. A minimal hook:
124
+
125
+ ```ts
126
+ import { useEffect } from 'react';
127
+ import { useNavigate } from 'react-router-dom';
128
+
129
+ export function useParentNavigation() {
130
+ const navigate = useNavigate();
131
+ useEffect(() => {
132
+ const onMessage = (e: MessageEvent) => {
133
+ if (e.data?.type !== 'smartlinks-navigate') return;
134
+ if (typeof e.data.path !== 'string') return;
135
+ navigate(e.data.path);
136
+ };
137
+ window.addEventListener('message', onMessage);
138
+ return () => window.removeEventListener('message', onMessage);
139
+ }, [navigate]);
140
+ }
141
+ ```
142
+
143
+ ---
144
+
145
+ ## Reference: Updated `RouteChangeMessage`
146
+
147
+ `state` is an open `Record<string, string>` — `parentPath` is a recognised
148
+ optional convention; everything else flows through unchanged.
149
+
150
+ ```ts
151
+ interface RouteChangeMessage {
152
+ type: 'smartlinks-route-change';
153
+ path: string;
154
+ context: Record<string, string>;
155
+ state: Record<string, string> & {
156
+ /**
157
+ * Optional. The "up" target from the current screen. When present, the
158
+ * portal's top back button posts smartlinks-navigate with this path
159
+ * instead of exiting the app. Empty / missing → exits the app.
160
+ */
161
+ parentPath?: string;
162
+ };
163
+ appId?: string;
164
+ }
165
+ ```
82
166
 
83
- ## Reference
167
+ No breaking change: existing apps that don't emit `parentPath` keep today's
168
+ behaviour (one tap of the portal back exits the app).
84
169
 
85
- `state` remains a general `Record<string, string>`. `parentPath` is a recognised optional convention, not a breaking protocol change.
170
+ ---
86
171
 
87
172
  ## FAQ
88
173
 
89
- **Do I need to push every query-param change as a navigation step?** No. `parentPath` is hierarchy, not history.
174
+ **Q: Do I need to push every query-param change as a navigation step?**
175
+ No. `parentPath` is hierarchy, not history. A filter toggle, a tab switch,
176
+ or a modal open on the same screen should keep the same `parentPath`.
90
177
 
91
- **What if my up target leaves the app?** Set `parentPath` to `''` or omit it.
178
+ **Q: What if my "up" leaves the app?**
179
+ Set `parentPath` to `''` (or omit it). The portal will exit the app on back.
92
180
 
93
- **Can I disable the portal back button on certain screens?** Not via this protocol. Use the existing `homeScope: 'entry'` portal behaviour if you need the shell back button suppressed.
181
+ **Q: Can I disable the portal back button on certain screens?**
182
+ Not directly via this protocol. Use the existing portal `homeScope: 'entry'`
183
+ mechanism if you need the entire portal back button suppressed.
94
184
 
95
- **What about an in-app back button?** Keep it if you want. The portal back is shell chrome; an in-content back is part of the app UI.
185
+ **Q: What about the in-app back button I already render?**
186
+ Keep it if you want — they're not mutually exclusive. The portal back is
187
+ chrome; an in-content back is content. Many apps will only need one.