Events component guide

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

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

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