Integrate Hanko with Svelte

​

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.

npm install @teamhanko/hanko-elements

​

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

​

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:onAuthFlowCompleted={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