Events
Store events, window events and component events.
Store events
Subscribe with AuthUI.on(name, listener). Each is also dispatched on window as a CustomEvent named authui:<name> with the same detail.
| Name | Detail | When |
|---|---|---|
change | AuthUIState | Any state change: status, user, factors, pending action. |
signed-in | Models.User | Status became signed-in. |
signed-out | undefined | The user signed out or the session ended. |
error | { message, type, code } | Any store operation failed. Emitted before the promise rejects. |
active-team | { teamId, team } | Active team changed via setActiveTeam or the teams switcher on the user button. |
window.addEventListener("authui:change", (e) => console.log((e as CustomEvent).detail.status));Window commands
Dispatch these to control the modal without a reference to it. AuthUI.open() and AuthUI.close() do exactly this.
| Name | Detail |
|---|---|
authui:open | { view?: AuthUIView } |
authui:close | none |
Component events
All bubble and are composed.
| Element | Event | Detail |
|---|---|---|
<authui-sign-in> | authui-success | { method } |
<authui-sign-in> | authui-view | { view } |
<authui-sign-in> | authui-open | { view: "account" } |
<authui-modal> | authui-signed-in | Models.User |
<authui-modal> | authui-close | none |
<authui-user-button> | authui-menu-action | { actionId } |
<authui-user-button> | authui-active-team | { teamId, team } |
authui-menu-action fires when a custom menuItems row with actionId is clicked. authui-active-team fires on the element when the teams switcher picks a team (with show-teams). The store also emits active-team (and authui:active-team on window) for the same change; subscribe with AuthUI.on("active-team", ...) for the store-level event, or listen on the element for the component event.