@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.
- package/dist/docs/API_SUMMARY.md +7 -2
- package/dist/docs/overview.md +3 -0
- package/dist/docs/portal-auth-broadcast.md +26 -8
- package/dist/docs/portal-back-button.md +128 -36
- package/dist/docs/portal-request-action.md +289 -0
- package/dist/docs/portal-request-login.md +236 -0
- package/docs/API_SUMMARY.md +7 -2
- package/docs/overview.md +3 -0
- package/docs/portal-auth-broadcast.md +26 -8
- package/docs/portal-back-button.md +128 -36
- package/docs/portal-request-action.md +289 -0
- package/docs/portal-request-login.md +236 -0
- package/package.json +1 -1
|
@@ -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).
|
package/docs/API_SUMMARY.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Smartlinks API Summary
|
|
2
2
|
|
|
3
|
-
Version: 1.14.
|
|
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
|
-
>
|
|
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
|
|
56
|
-
|
|
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: {
|
|
66
|
-
|
|
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
|
|
118
|
-
(iframe) so the whole portal
|
|
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.**
|
|
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
|
|
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
|
|
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
|
-
|
|
16
|
+
---
|
|
10
17
|
|
|
11
|
-
|
|
18
|
+
## Why "up", not "back"
|
|
12
19
|
|
|
13
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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) |
|
|
34
|
-
| `''
|
|
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
|
-
|
|
58
|
+
---
|
|
37
59
|
|
|
38
|
-
## Recommended pattern
|
|
60
|
+
## Recommended sub-app pattern (React Router)
|
|
39
61
|
|
|
40
|
-
Keep
|
|
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
|
-
'/':
|
|
45
|
-
'/items':
|
|
46
|
-
'/items/:id':
|
|
47
|
-
'/items/:id/bid':
|
|
48
|
-
'/checkout':
|
|
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
|
-
//
|
|
53
|
-
|
|
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
|
-
|
|
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
|
-
|
|
61
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
170
|
+
---
|
|
86
171
|
|
|
87
172
|
## FAQ
|
|
88
173
|
|
|
89
|
-
**Do I need to push every query-param change as a navigation step?**
|
|
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
|
|
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?**
|
|
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
|
|
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.
|