Integrate Hanko with Svelte
Learn how to quickly add authentication and user profile in your Svelte app using Hanko.
Install @teamhanko/hanko-elements
Once you’ve initialized your Svelte app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth
, hanko-profile
and hanko-events
.
Add the Hanko API URL
Retrieve the API URL from the Hanko console and place it in your .env file.
VITE_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io
If you are self-hosting you need to provide the URL of your running Hanko backend.
Add <hanko-auth>
component
The <hanko-auth>
web component adds a login interface to your app. Begin by importing the register function from @teamhanko/hanko-elements
into your Svelte component. Call it with the Hanko API URL as an argument to register <hanko-auth>
with the browser’s CustomElementRegistry. Then use the <hanko-auth>
element in your component.
<script lang="ts">
import { onMount } from "svelte";
import { navigate } from "svelte-routing";
import { register } from "@teamhanko/hanko-elements";
const hankoApi = import.meta.env.VITE_HANKO_API_URL;
const redirectAfterLogin = () => {
// successfully logged in, redirect to a page in your application
navigate("/dashboard");
};
onMount(async () => {
register(hankoApi).catch((error) => {
// handle error
});
});
</script>
<hanko-auth on:onSessionCreated={redirectAfterLogin} />
By now, your sign-up and sign-in features should be working. You should see an interface similar to this 👇
Add <hanko-profile>
component
The <hanko-profile>
component provides an interface, where users can manage their email addresses and passkeys.
<script lang="ts">
import { onMount } from "svelte";
import { register } from "@teamhanko/hanko-elements";
const hankoApi = import.meta.env.VITE_HANKO_API_URL;
onMount(async () => {
register(hankoApi).catch((error) => {
// handle error
});
});
</script>
<hanko-profile />
It should look like this 👇
Implement logout
You can use @teamhanko/hanko-elements
to easily manage user logouts. Below, we make a logout button component that you can use anywhere.
<script>
import { navigate } from "svelte-routing";
import { Hanko } from "@teamhanko/hanko-elements";
const hankoApi = import.meta.env.VITE_HANKO_API_URL;
const hanko = new Hanko(hankoApi);
const logout = () => {
hanko.user.logout().catch((error) => {
// handle error
});
navigate("/");
};
</script>
<button on:click={logout}>Logout</button>
Customize component styles
You can customize the appearance of hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
Authenticate backend requests
To authenticate requests on your backend with Hanko, refer to our backend guide.
Try it yourself
Svelte example
It uses Express.js for the backend, full source code available on our GitHub.