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

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

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

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

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

None — event.detail is null.

Example

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

allegro:interaction:ungated

Fired after an interaction reveals content it had gated — for example when an allegro-content-gate closes following a successful login and the blurred or truncated article behind it is restored.

Detail

Field	Type	Description
slug	string	The slug of the interaction revealed.

Example

window.addEventListener('allegro:interaction:ungated', (event) => {
    console.log('Revealed interaction', event.detail.slug);
    // Re-run layout, lazy-load images now in view, etc.
});

Listening to both events

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

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.