Skip to main content
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
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).

​
Usage

​
Markup