Integrate Hanko with Fresh
In this guide you will learn how to use the hanko-elements web components with your Fresh application.
Add <hanko-auth> component
To provide a login interface in your app, use the <hanko-auth> web component. Due to an
issue in Fresh, we’re using a browser script to load the web elements.
Call it with the URL of the Hanko API as an argument to register the <hanko-auth> element with
the browser’s CustomElementRegistry.
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.
const endpoint = "HANKO_API_URL";
const code = `
import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';
register('${endpoint}', { shadow: true });
document.addEventListener('hankoAuthSuccess', (event) => {
document.location.href = '/protected';
});
`;
export default function Login() {
return (
<div class="auth-container">
<hanko-auth api={endpoint}></hanko-auth>
<script type="module">
{code}
</script>
</div>
);
}
Add <hanko-events> component
The <hanko-events> component provides a convenient way to subscribe to specific
events without displaying any UI elements.
The other hanko-elements will also dispatch these events.
Unfortunately, in the current state of Fresh, there is no added benefit on using because, you cannot leverage the framework event system to handle the dispatched events.
Add <hanko-profile>
To provide a page where users can manage their email addresses, password and passkeys, use the <hanko-profile> web
component. Just as with the <hanko-auth> component, import the hanko elements via a native script.
const endpoint = "HANKO_API_URL";
const code = `
import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';
register('${endpoint}', { shadow: true });
`;
export default function Profile() {
return (
<div class="profile">
<hanko-profile api={endpoint}></hanko-profile>
<script type="module">
{code}
</script>
</div>
);
}
Implement logout
Use the Hanko client to logout. The code below use a custom event to trigger the logout:
const endpoint = "HANKO_API_URL";
const code = `
import { register, Hanko } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';
register('${endpoint}', { shadow: true });
window.addEventListener('logout', () => {
const hanko = new Hanko('${endpoint}');
hanko.user.logout()
.then(() => {
window.location.href = '/signin';
})
.catch((error) => {
// error handling
});
});
`;
export default function Profile() {
const logout = () => {
window.dispatchEvent(new Event("logout"));
};
return (
<div class="profile">
<button class="logout-btn" onClick={logout}>Logout</button>
<hanko-profile api={endpoint}></hanko-profile>
<script type="module">
{code}
</script>
</div>
);
}
Customize component styles
The styles of the hanko-auth and hanko-profile 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.