# 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`[​](#storeallegro "Direct link to storeallegro")

| 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. |

`AudienceMember` is defined in the [SDK type reference](/developer/api-reference/type-aliases/AudienceMember.md).

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. |

```html
<!-- 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:

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

```

Or from template JavaScript:

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

```

## `allegroInteraction(slug, data)`[​](#allegrointeractionslug-data "Direct link to allegrointeractionslug-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`.                                                        |
| *(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:

```html
<!-- 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[​](#reactivity-model "Direct link to 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). |

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[​](#recipes "Direct link to Recipes")

### Gate content on authentication[​](#gate-content-on-authentication "Direct link to Gate content on authentication")

```html
<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`[​](#read-extra-data-passed-to-trigger "Direct link to read-extra-data-passed-to-trigger")

If you trigger the interaction with extra data:

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

```

Those keys are available directly in the template scope:

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

```

### Subscribe to a session event without the store[​](#subscribe-to-a-session-event-without-the-store "Direct link to 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`:

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

```

### Add per-instance state with nested `x-data`[​](#add-per-instance-state-with-nested-x-data "Direct link to 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:

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

```