📍 Bolt Help / Products / Ignite 🔥 / API Implementation / Global Frontend Events
Global Frontend Events
Hook into Bolt events with `Bolt.on` and `Bolt.once` methods

About

Hook into Bolt events with Bolt.on and Bolt.once methods.

Syntax

You can listen to Bolt global events using Bolt.on and Bolt.once. The former will listen to all events fired and executes its callback. The latter will unsubscribe from events after a single event executes its callback.

const unsubscribe = Bolt.on(eventName, callback);
const unsubscribe = Bolt.on(eventName, callback, options);

const unsubscribe = Bolt.once(eventName, callback);
const unsubscribe = Bolt.once(eventName, callback, options);

Parameters

  • eventName: A string that specifies the name of the event to listen for.
  • callback: A function to be executed whenever the specified event is emitted. The function is passed the event’s payload as its first argument. Callback parameters
    • payload: The payload corresponding to the event, shown in the events table
  • options (optional): An object specifying additional options. This parameter is not used in all events and its properties depend on the specific event.
    • replayLast: The callback will immediately execute with a payload of the last time this event was triggered

Returns

  • unsubscribe: A function that, when called, will stop the callback from being executed when the event is emitted. This is useful for cleaning up event listeners when they are no longer needed.

Events

Event Name Payload Description
login_complete { email: string; result: LoginResult | Error } Login attempt succeeded or failed
login_succeeded { email: string; result: LoginResult } Login attempt succeeded
login_failed { email: string; result: Error } Login attempt failed
account_check_complete { email: string; result: boolean } Check on email completed. result true means email is a Bolt account
login_modal_closed { context: LoginContext } Login modal closed either from successful login, error, or the user manually closed it.
login_modal_dismissed { context: LoginContext } Login modal closed by user manually closing it.
forgot_password_continue { email: string; error: Error } When attempting login with context: forgot_password, the user manually closes it. When this event fires, proceed with resetting user password
mount_failed { component: Component; reason: string } Mounting a component failed with a provided reason.
type LoginContext =
    | "checkout"
    | "sign_in"
    | "register"
    | "forgot_password"
    | "pre_checkout";

type Component = "login_button";

interface LoginResult {
    authorizationCode: string;
    scope: string;
}