PushPermissionPrompt

Dismissible prompt asking the user to enable push notifications. Handles VAPID subscription and server-side registration.

01 Usage

Basic

Enable push notifications?

<script lang="ts">
  import { PushPermissionPrompt } from '@urbicon-ui/auth';
</script>

<PushPermissionPrompt vapidPublicKey="BExample...base64-encoded-vapid-public-key" />

02 Accessibility

It never interrupts

The prompt is an ordinary card in the flow, not a modal. It does not trap focus, does not steal it on mount, and both actions are real buttons — so it can be read, acted on, or ignored entirely at the point the user reaches it, rather than seizing the page the moment it appears.

Failures are announced, dismissals are not

The aria-live="polite" region inside the card is always mounted while the prompt is visible, so a rejected VAPID key, a conflicting endpoint or a rate limit is announced in place and the prompt stays open to retry. A denied browser permission is not an error and closes the prompt instead.

Focus is dropped when the card closes

Enabling or dismissing unmounts the whole card. If focus was on either button it falls back to <body> — the component does not restore it to a sensible neighbour. Where the prompt sits mid-page, move focus yourself in onDismissed / onSubscribed.

03 API Reference

11 props 1 required

Prop	Type	Default	Description
`vapidPublicKey` required	`string`	—	VAPID public key for push subscription.
`apiPath`	`string`	`'/api/notifications/push-subscription'`	API endpoint for registering subscriptions.
`class`	`string`	—	Extra classes on the root element.
`csrf`	`CsrfClientOptions`	—	CSRF cookie/header names — only needed when the server overrides the defaults via `config.csrf`. Mutating requests echo the token automatically.
`fetcher`	`typeof globalThis.fetch`	—	Custom fetch implementation for all API calls. Defaults to the global `fetch`. Useful for mock backends in demos/tests or custom retry/auth layers.
`onDismissed`	`() => void`	—	Called when the user dismisses the prompt.
`onSubscribed`	`(subscription: PushSubscription) => void`	—	Called after successful push subscription.
`onUnavailable`	`(reason: 'denied' \| 'unsupported') => void`	—	Called when the prompt closes because push is not available: the user declined the browser permission (`'denied'`) or the browser has no push support (`'unsupported'`). Persist this to avoid remounting the prompt on every visit — without it, a denial is indistinguishable from never having shown the prompt. Operational failures do NOT close the prompt; they show the error state instead.
`slotClasses`	`Partial<Record<'root' \| 'text' \| 'error' \| 'actions', string>>`	—	Per-slot class overrides. See component source for available slot keys.
`t`	`PartialAuthLocale`	—	Locale overrides, deep-merged over the active built-in bundle (resolved from the i18n context). Pass any subset — a single string or a whole tree.
`unstyled`	`boolean`	—	Strip all default styling.

04 Types

Local type definitions used by this component.

5 types

Only referenced

Name	Kind	Category	Used by	Description
PushPermissionPromptProps	interface	props	0	—
PartialAuthLocale	type	helper	1	Consumer-facing locale input: any subset of `AuthLocale`. Components accept this as their `t` prop and deep-merge it over the active built-in bundle, so overriding a single string never silently blanks the rest.
CsrfClientOptions	interface	helper	1	—
DeepPartial	type	helper	0	Recursive partial: every branch and leaf becomes optional.
AuthLocale	interface	helper	0	The complete auth locale bundle. Every key is required: the bundles this package ships (`en`, `de`) satisfy the full shape, and consumer overrides enter as `PartialAuthLocale` — deep-merged over the active built-in bundle by `mergeAuthLocale` — so component markup reads keys directly, without per-key `?? '…'` fallback literals (review R19). Placeholder convention: dynamic values use single-brace tokens (`{n}`, `{name}`, `{email}`) that the consuming component substitutes itself via `String.replace('{token}', value)`. There is deliberately no `{{…}}` runtime interpolator in this package — the key-based translator twin (`authT`/`at`) was removed in R21 — so `{{…}}` here would render verbatim.

05 Installation

Import

import { PushPermissionPrompt } from '@urbicon-ui/auth';

llm.txt