sesamy-content-container

A web component that controls access to content based on user authentication and entitlements, with support for different content locking mechanisms.

Props/Attributes

• item-src - URL of the content item
• pass - Semicolon-separated list of pass IDs that grant access
• access-level - Access level required ('public', 'logged-in', or 'entitlement')
• publisher-content-id - ID of the content from the publisher
• lock-mode - Content locking mechanism ('embed', 'encode', 'signedUrl', 'event', or 'proxy')
• locked-content-selector - CSS selector for locked content when using the signedUrl or proxy lock modes

Access re-checks

The container re-evaluates access whenever sesamy-js announces a session change (sesamyJsAuthenticated, sesamyJsLogout), not only on mount. A reader who signs in on the page sees the article immediately; one who signs out has it locked again. The fetch-and-inject lock modes still fetch at most once.

Events

• sesamy:content-unlocked - Bubbling, composed CustomEvent dispatched on the element when content is unlocked, with detail.contentName
• sesamyUnlocked - Legacy event dispatched on window when content is unlocked, with { publisherContentId, itemSrc } in detail

Listen on window for sesamyUnlocked

sesamyUnlocked is dispatched on window, not on the element, so listeners on the element or on document never receive it. Use window.addEventListener.

window.addEventListener('sesamyUnlocked', (event) => {
  const { publisherContentId, itemSrc } = event.detail;
  console.log('Unlocked', publisherContentId, itemSrc);
});

Basic Usage

<!-- Basic content container with preview and locked content -->
<sesamy-content-container item-src="https://example.com/article.html">
  <div slot="preview">This is a preview visible to everyone</div>
  <div slot="content">This is the full content for authorized users</div>
</sesamy-content-container>

<!-- Content visible only to logged-in users -->
<sesamy-content-container access-level="logged-in">
  <div slot="preview">Please log in to view this content</div>
  <div slot="content">This content is for logged-in users only</div>
</sesamy-content-container>

Access Levels

public

Content is accessible to everyone without authentication.

logged-in

Content requires user to be authenticated but doesn't check for specific entitlements.

entitlement

Content requires specific entitlements (passes) to access. Use the pass attribute to specify required pass IDs.

Lock Modes

embed

Content is embedded directly in the page in the content slot. The slot is only projected into the component's shadow DOM once access is confirmed; when access is denied, the slot element is removed from the DOM. No CSS hiding is involved, but the content is still present in the initial page source.

The removal happens only on a definite denial. If the access check cannot be answered — sesamy-js is still initialising, or the reader's session cannot produce an access token — the container leaves the page as it is and shows the preview, then re-checks. Removal is also reversible: the component keeps the detached node, so a reader who signs in on the page gets the article without a reload.

encode

Content is encoded and decoded on the client side when access is granted.

signedUrl

Content is loaded from a signed URL when access is verified.

event

The component dispatches events for the application to handle content loading.

proxy

Content is loaded through a proxy server that validates access.

Slots

preview

Content shown to users who don't have access. This typically includes a teaser or summary.

content

The full content shown to users with proper access (authentication/entitlements).

Styling

The component applies no styling of its own: it renders without a stylesheet and supports no design tokens. Slotted content is styled entirely by your page's own CSS. See Styling Components.