Events

APEX provides a set of predefined events that you can trigger from anywhere within your application. The APEX framework handles these events according to specific implementations.

Authentication Events

APEX exposes these authentication events to control user sessions:

Event Name	Required Details	Effect
authentication.signin.request	None	Triggers authentication flow for the current user. Redirects to onboarding if the user is not authenticated.
authentication.signout.request	None	Terminates the current user session and removes authentication tokens.

Implementation Examples

Authentication Button Toggle

The following example demonstrates how to implement sign-in and sign-out buttons that automatically toggle visibility based on authentication state. The code uses the authenticated CSS class that APEX adds to the body element when a user is signed in.

<!-- Authentication buttons with automatic visibility toggling -->
<style>
    body .signoutbutton {
        display: none;
    }
    body.authenticated .signoutbutton {
        display: initial;
    }
    body.authenticated .signinbutton {
        display: none;
    }
</style>

<!-- Sign-in button, visible only when user is not authenticated -->
<button class="signinbutton" onclick='const signInEnsureAuthEvent = new Event("authentication.signin.request", { bubbles: true });this.dispatchEvent(signInEnsureAuthEvent);'>Sign in</button>

<!-- Sign-out button, visible only when user is authenticated -->
<button class="signoutbutton" onclick='const signOutEnsureAuthEvent = new Event("authentication.signout.request", { bubbles: true });this.dispatchEvent(signOutEnsureAuthEvent);'>Sign out</button>

Technical Details

• Events use the standard DOM Event interface with bubbles: true to ensure they propagate up the DOM tree
• The APEX framework listens for these events at the document level
• No additional parameters are required for authentication events
• The event names follow the dot-notation pattern: category.action.type