Skip to main content

Svelte

In this guide you will learn how to use the hanko-elements web components to add authentication and a user profile to your Svelte application.

Install dependencies​

Install the @teamhanko/hanko-elements package:

npm install @teamhanko/hanko-elements

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 in your Svelte component. Then call register to register the <hanko-auth> element with the browser's CustomElementRegistry and use the <hanko-auth> element in your component.

info

When adding the <hanko-auth> element to your template you must provide the URL of the Hanko API via the api attribute. 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.

HankoAuth.svelte
<script>
  import { onMount } from "svelte";
  import { register } from '@teamhanko/hanko-elements';

  const hankoApi = "<YOUR_API_URL>";

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register({ shadow: true })
      .catch((error) => {
        // handle error
    });
  });
</script>

<hanko-auth api={hankoApi} />

Define login callbacks​

The <hanko-auth> element dispatches a custom hankoAuthSuccess event on successful login. React to this event in order to, for example, redirect your users to protected pages in your application, e.g. a user profile page.

To do so, apply an event listener with an appropriate redirect callback:

HankoAuth.svelte
<script>
  import { onDestroy, onMount } from "svelte";
  import { useNavigate } from "svelte-navigator";
  import { register } from '@teamhanko/hanko-elements';

  const hankoApi = "<YOUR_API_URL>";
  const navigate = useNavigate();
  let element;

  const redirectAfterLogin = () => {
    // successfully logged in, redirect to a page in your application
    navigate('...');
  };

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register({ shadow: true })
      .catch((error) => {
        // handle error
    });

    element.addEventListener('hankoAuthSuccess', redirectToTodos);
  });

  onDestroy(() => {
    element.removeEventListener('hankoAuthSuccess', redirectToTodos);
  });
</script>

<hanko-auth bind:this={element} api={hankoApi} />

Add <hanko-profile> component​

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 register function from @teamhanko/hanko-elements in your Svelte component. Then call register to register the <hanko-profile> element with the browser's CustomElementRegistry and use the element in your component.

info

When adding the <hanko-profile> element to your template you must provide the URL of the Hanko API via the api attribute. 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.

HankoProfile.svelte
<script>
  import { register } from "@teamhanko/hanko-elements";

  const hankoApi = "<YOUR_API_URL>";

  onMount(async () => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register({ shadow: true })
      .catch((error) => {
        // handle error
      });
  });
</script>

<hanko-profile api={hankoApi}/>

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.