@nevuto/app-bridge

Lets an app embedded in the Nevuto admin (/apps/{handle}, or an admin action's modal) talk to the admin: session tokens, title bar, confirm modals, toasts, a loading indicator and navigation. The admin draws all of them with its own components, so your app looks like part of it.

<script src="https://cdn.nevu.to/app-bridge/v1/app-bridge.js"></script>
<script>
  const app = NevutoAppBridge.createApp()
</script>

or npm i @nevuto/app-bridge and import { createApp } from '@nevuto/app-bridge'.

const app = createApp()
const { shop, locale, surface } = await app.ready()

app.titleBar.set({
  title: 'Campaigns',
  primaryAction: { label: 'New campaign', onClick: () => app.history.push('/campaigns/new') },
})

const res = await app.fetch('/api/campaigns') // adds Authorization: Bearer <session token>
app.toast.show('Saved')
if ((await app.modal.confirm({ title: 'Delete?', primaryLabel: 'Delete', secondaryLabel: 'Cancel', destructive: true })) === 'primary') { /* … */ }
app.navigate('/products/12')

The admin opens your app URL with shop, host (the admin origin), embedded=1, locale and id_token. Your page must allow being framed by the admin (Content-Security-Policy: frame-ancestors https://*, not X-Frame-Options: DENY).

Verifying session tokens on your server

The token is an HS256 JWT signed with your app's client secret, valid for one minute: aud = your client id, dest = https://{store domain}, iss = https://{store domain}/admin, sub = staff user id, shop = store handle.

import jwt from 'jsonwebtoken'

const claims = jwt.verify(token, process.env.NEVUTO_CLIENT_SECRET, { algorithms: ['HS256'], audience: process.env.NEVUTO_CLIENT_ID })
// claims.shop → look up the store's offline access token you saved at install

Requests Nevuto sends your server (admin "api" actions) carry X-Nevuto-Hmac-Sha256: the base64 HMAC-SHA256 of the raw body with the same secret.

Links

• Building apps for Nevuto: https://nevuto.dev
• Nevuto UI docs: https://design.nevuto.com

License

MIT