Alpine State Reference

The Allegro SDK registers two Alpine primitives that every template has access to:

• $store.allegro — a shared, reactive store that holds the current session state. It is automatically kept in sync whenever the member logs in, logs out, or their JWT refreshes.
• allegroInteraction(slug, data) — a reusable component factory registered on the root container of every rendered template. It exposes the interaction's slug, any extra data passed by the trigger call, and reactive shortcut getters into $store.allegro.

Because both primitives use Alpine's reactivity system, any x-text, x-show, or x-if bound to session fields re-renders automatically — no page reload, no manual event listeners required.

$store.allegro

Field	Type	Description
session	{ id: string; authenticated_at: string | null } | null	The member's current session, or null if no session exists.
audienceMember	AudienceMember | null	The authenticated member's profile, or null if the member has not logged in.
isAuthenticated	boolean	true when the session has been fully authenticated (not just identified by email).
products	string[]	Slugs of the products the member currently holds active entitlements for. Empty array when unauthenticated.
userAttributes	Record<string, unknown>	The member's user attribute values keyed by slug, from the SDK's cache. Empty object when unauthenticated or not yet cached.

AudienceMember is defined in the SDK type reference.

The store also exposes a helper method:

Method	Returns	Description
hasProduct(slug: string)	boolean	Returns true if the member holds an active entitlement for the given product slug.

<!-- Show premium content only to members with an active "premium" entitlement -->
<div x-show="$store.allegro.hasProduct('premium')">
    <p>Thanks for being a subscriber!</p>
</div>

You can read the store directly from template HTML:

<p x-text="$store.allegro.audienceMember?.email"></p>

Or from template JavaScript:

const store = Alpine.store('allegro');
if (store.isAuthenticated) {
    console.log('Logged in as', store.audienceMember.email);
}

allegroInteraction(slug, data)

Every template's root container is bound to allegroInteraction via x-data. You do not call this factory yourself — the SDK sets the x-data attribute automatically when the template renders.

The resulting Alpine component scope exposes:

Property	Type	Description
slug	string | null	The slug of the Interaction that triggered this template.
session	object | null	Reactive shortcut — proxies $store.allegro.session.
audienceMember	object | null	Reactive shortcut — proxies $store.allegro.audienceMember.
isAuthenticated	boolean	Reactive shortcut — proxies $store.allegro.isAuthenticated.
plans	array	The offer's plans, for a template that supports plans. See Plans.
(extra data)	any	Any key/value pairs passed as the second argument to allegro.interaction.trigger() are available at the top level.

The shortcut properties let you write concise template expressions without the $store.allegro. prefix:

<!-- shortcut -->
<div x-show="isAuthenticated">
    Hello, <span x-text="audienceMember.name"></span>
</div>

<!-- equivalent using the store directly -->
<div x-show="$store.allegro.isAuthenticated">
    Hello, <span x-text="$store.allegro.audienceMember.name"></span>
</div>

Reactivity Model

The store is updated in response to the following window events, which the SDK dispatches automatically during session transitions:

Event	When it fires
allegro:authenticated	A user is authenticated with the SDK.
allegro:logout	allegro.member.logout() completes.
allegro:jwt-refreshed	The session JWT is refreshed in the background.
allegro:jwt-refresh-failed	A JWT refresh attempt fails (session likely expired).
allegro:user-attributes:updated	The user attribute cache is filled or cleared.

When any of these fires, the SDK re-reads the current JWT and writes the new values into $store.allegro. Alpine's reactivity then propagates the change to any bound template expression.

Recipes

Gate content on authentication

<div x-show="isAuthenticated">
    <p>Welcome back, <span x-text="audienceMember.name"></span>!</p>
</div>

<div x-show="!isAuthenticated">
    <p>Sign in to continue reading.</p>
    <allegro-login-form></allegro-login-form>
</div>

Read extra data passed to trigger

If you trigger the interaction with extra data:

allegro.interaction.trigger('paywall', { plan: 'basic', articleId: '123' });

Those keys are available directly in the template scope:

<p x-text="plan"></p>
<p x-text="articleId"></p>

Subscribe to a session event without the store

If you need to react to a specific transition in template JavaScript rather than using Alpine bindings, listen directly on window:

window.addEventListener('allegro:logout', () => {
    // e.g. redirect or show a goodbye message
});

Add per-instance state with nested x-data

The root x-data is managed by Allegro. To add your own local state, use x-data on a child element — Alpine merges scopes through the component tree:

<div x-data="{ open: false }">
    <button @click="open = !open">Read more</button>
    <p x-show="open" x-text="audienceMember?.name ?? 'Guest'"></p>
</div>