Javascript
In this guide you will learn how to use the hanko-elements web components to add authentication and a user profile using plain Javascript and HTML.
Add <hanko-auth>
component
To provide a login interface in your app, use the <hanko-auth>
web component. To do so, first import the register
function from @teamhanko/hanko-elements
. Call it with the URL of the Hanko API as an argument
to register the <hanko-auth>
element with the browser's
CustomElementRegistry
.
Then use the element in your markup.
If you are using Hanko Cloud, you can find the API URL on your project dashboard. If you are self-hosting you need to provide the URL of your running Hanko backend.
<body>
<hanko-auth />
<script type="module">
import { register } from 'https://esm.run/@teamhanko/hanko-elements';
await register("<YOUR_API_URL>");
</script>
</body>
Define event callbacks
Use the Hanko client provided by @teamhanko/hanko-elements
to subscribe to
events.
<body>
<hanko-auth />
<script type="module">
import { register } from 'https://esm.run/@teamhanko/hanko-elements';
const { hanko } = await register("<YOUR_API_URL>");
hanko.onAuthFlowCompleted(() => {
// successfully logged in, redirect to a page in your application
document.location.href = "..."
})
</script>
</body>
Add <hanko-profile>
component
To provide a page where users can manage their email addresses, password and passkeys, use the <hanko-profile>
web
component. Import the register
function from @teamhanko/hanko-elements
in
your React component. Call it with the
URL of the Hanko API as an argument to register the <hanko-profile>
element with the browser's
CustomElementRegistry
. Then
use the element in your markup.
<body>
<hanko-profile />
<script type="module">
import { register } from 'https://esm.run/@teamhanko/hanko-elements';
await register("<YOUR_API_URL>");
</script>
</body>
Implement logout
Use the Hanko client provided by @teamhanko/hanko-elements
to log out users. On logout a custom event is
dispatched that you can subscribe to:
<body>
<nav>
<a href="#" id="logout-link">Logout</a>
</nav>
<hanko-profile />
<script type="module">
import { register } from 'https://esm.run/@teamhanko/hanko-elements';
const { hanko } = await register("<YOUR_API_URL>");
document.getElementById("logout-link")
.addEventListener("click", (event) => {
event.preventDefault();
hanko.user.logout();
});
hanko.onUserLoggedOut(() => {
// successfully logged out, redirect to a page in your application
document.location.href = "..."
}
</script>
</body>
Customize component styles
The styles of the hanko-auth
and hanko-profile
elements can be customized using CSS variables and parts. See our
guide on customization here.
Authenticate backend requests
If you want to authenticate requests in your own backend, please view our backend guide.