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.
login.html
<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.
login.html
<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 👇
sign up

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 👇
profile page

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.