# JavaScript Events

The Allegro SDK dispatches custom events on `window` at key points in the member lifecycle. Listen for these events to react to authentication state changes without polling.

## `allegro:authenticated`[​](#allegroauthenticated "Direct link to allegroauthenticated")

Fired when a member successfully authenticates. This happens across several flows:

* A magic link is clicked and the token in the URL is validated on page load
* A magic link is detected during background polling (cross-tab)
* A magic link is detected from a cookie when the page regains focus or visibility
* A social login (Google, Apple, etc.) completes
* A purchase token is exchanged on return from checkout and the member was not already authenticated

### Detail[​](#detail "Direct link to Detail")

| Field      | Type                                     | Description                                                        |
| ---------- | ---------------------------------------- | ------------------------------------------------------------------ |
| `method`   | `'magic-link' \| 'social' \| 'purchase'` | Which authentication flow triggered the event                      |
| `provider` | `string`                                 | The OAuth provider name — only present when `method` is `'social'` |

### Example[​](#example "Direct link to Example")

```js
window.addEventListener('allegro:authenticated', (event) => {
    const { method, provider } = event.detail;

    if (method === 'social') {
        console.log('Signed in via', provider); // e.g. "google"
    }

    // Re-render gated content, update nav, etc.
});

```

## `allegro:logout`[​](#allegrologout "Direct link to allegrologout")

Fired after a member is logged out via `allegro.member.logout()`. The member's JWT has already been cleared by the time this event fires.

### Detail[​](#detail-1 "Direct link to Detail")

None — `event.detail` is `null`.

### Example[​](#example-1 "Direct link to Example")

```js
window.addEventListener('allegro:logout', () => {
    // Redirect, clear local state, re-render gated content, etc.
});

```

## Listening to both events[​](#listening-to-both-events "Direct link to Listening to both events")

A common pattern is to sync UI state whenever authentication changes in either direction:

```js
function syncAuthState() {
    window.allegro.push(function (allegro) {
        const isAuthenticated = allegro.member.isAuthenticated();
        document.body.classList.toggle('is-authenticated', isAuthenticated);
    });
}

window.addEventListener('allegro:authenticated', syncAuthState);
window.addEventListener('allegro:logout', syncAuthState);

```

note

These events fire on `window` and bubble is `false`. Add listeners directly to `window` — attaching to `document` or a child element will not work.