Learn how to quickly add authentication and user profile in your vanilla Javascript app using Hanko.
.env
file.
<hanko-auth>
component<hanko-auth>
web component adds a login interface to your app. Begin by importing the register
function from @teamhanko/hanko-elements
. Call it with the Hanko API URL as an argument to register <hanko-auth>
with the browser’s CustomElementRegistry. Once done, use it in your markup.
@teamhanko/hanko-elements
lets you “listen” for specific events. It simplifies the process of subscribing to events, such as user logins.
<hanko-profile>
<hanko-profile>
component provides an interface, where users can manage their email addresses and passkeys.
@teamhanko/hanko-elements
to log out users. On logout a custom event is
dispatched that you can subscribe to:
hanko-auth
and hanko-profile
elements can be customized using CSS variables and parts. See our
guide on customization here.