Integrate Hanko with JavaScript

Add the Hanko API URL

Retrieve the API URL from the Hanko Console and place it in your .env file.

.env

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

Add the <hanko-auth> web component to create a login interface. Import the register function from @teamhanko/hanko-elements and call it with your Hanko API URL to register the component with the browser’s CustomElementRegistry.

<body>
  <hanko-auth />

  <script type="module">
    import { register } from "https://esm.run/@teamhanko/hanko-elements";

    await register(process.env.HANKO_API_URL);
  </script>
</body>

Define event callbacks

Use the Hanko client to listen for specific events such as user logins.

<body>
  <hanko-auth />

  <script type="module">
    import { register } from "https://esm.run/@teamhanko/hanko-elements";

    const { hanko } = await register(process.env.HANKO_API_URL);

    hanko.onSessionCreated(() => {
      // successfully logged in, redirect to a page in your application
      document.location.href = "...";
    });
  </script>
</body>

By now, your sign-up and sign-in features should be working. You should see an interface similar to this 👇

Add `<hanko-profile>`

The <hanko-profile> component provides an interface, where users can manage their email addresses and passkeys.

profile.html

<body>
  <hanko-profile />

  <script type="module">
    import { register } from "https://esm.run/@teamhanko/hanko-elements";

    await register(process.env.HANKO_API_URL);
  </script>
</body>

It should look like this 👇

Implement logout functionality

Implement logout functionality using the Hanko client. A custom event is dispatched on logout that you can subscribe to:

profile.html

<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(process.env.HANKO_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

To authenticate requests on your backend with Hanko, refer to our backend guide.

Getting started

Guides

Using the Hanko API

Integrations

Resources

FAQ & support

Integrate Hanko with JavaScript

Add the Hanko API URL

Add `<hanko-auth>` component

Define event callbacks

Add `<hanko-profile>`

Implement logout functionality

Customize component styles

Authenticate backend requests

​Add the Hanko API URL

​Add <hanko-auth> component

​Define event callbacks

​Add <hanko-profile>

​Implement logout functionality

​Customize component styles

​Authenticate backend requests

Add the Hanko API URL

Add `<hanko-auth>` component

Define event callbacks

Add `<hanko-profile>`

Implement logout functionality

Customize component styles

Authenticate backend requests