> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Events component guide

> A Web Component that allows to bind event handlers to certain events, without displaying UI elements.

<div class="hidden">
  **Hanko Elements Events Component Guide**:

  **About Hanko**:

  Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.

  **What This Guide Covers**: This guide demonstrates how to use the `<hanko-events>` web component, which provides a way to listen for authentication events without displaying any UI elements. You'll learn how to bind event handlers to respond to authentication state changes in your application.

  **Key Technologies**:

  * Hanko Elements
  * Web Components
  * JavaScript event handling
  * Authentication events
  * Frontend SDK integration
  * Event-driven architecture

  **Prerequisites**:

  * Basic knowledge of JavaScript event handling, web components, and frontend development
  * Understanding of authentication flows and event-driven programming will be helpful

  **Tasks You'll Complete**:

  * Implement the `<hanko-events>` component in your application
  * Bind event handlers to authentication events
  * Handle session creation, expiration, and user state changes
  * Integrate event handling with your application's navigation and state management
  * Use events for custom authentication flows and user experience enhancements
</div>

<Info>
  You can subscribe to events with the `<hanko-auth>` and `<hanko-profile>` components in the same way. You can also bind event handlers using the `frontend-sdk` (see the next section).
</Info>

## Usage

### Markup

```html theme={null}
<hanko-events id="events"></hanko-events>
<script>
  document
    .getElementById("events")
    .addEventListener("onSessionCreated", console.log);
  // more events are available (see "frontend-sdk" docs)...
</script>
```