​
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

The <hanko-auth> web component adds a login interface to your app. Begin by importing the register function from @teamhanko/hanko-elements. Call it with the Hanko API URL as an argument to register <hanko-auth> with the browser’s CustomElementRegistry. Once done, use it in your markup.

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

The Hanko client from @teamhanko/hanko-elements lets you “listen” for specific events. It simplifies the process of subscribing to 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 👇

​
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

Use the Hanko client provided by @teamhanko/hanko-elements to log out users. On logout a custom event is dispatched 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.

Was this page helpful?

SolidAngular