In this guide you will learn how to use the hanko-elements web components with your Fresh application.

​
Add <hanko-auth> component

To provide a login interface in your app, use the <hanko-auth> web component. Due to an issue in Fresh, we’re using a browser script to load the web elements. Call it with the URL of the Hanko API as an argument to register the <hanko-auth> element with the browser’s CustomElementRegistry.

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.


Login.tsx
const endpoint = "HANKO_API_URL";

const code = `
  import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
  document.addEventListener('hankoAuthSuccess', (event) => {
    document.location.href = '/protected';
  });
`;

export default function Login() {
  return (
    <div class="auth-container">
      <hanko-auth api={endpoint}></hanko-auth>
      <script type="module">
        {code}
      </script>
    </div>
  );
}

​
Add <hanko-events> component

The <hanko-events> component provides a convenient way to subscribe to specific events without displaying any UI elements. The other hanko-elements will also dispatch these events.

Unfortunately, in the current state of Fresh, there is no added benefit on using because, you cannot leverage the framework event system to handle the dispatched events.

​
Add <hanko-profile>

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 hanko elements via a native script.

HankoProfile.tsx
const endpoint = "HANKO_API_URL";

const code = `
  import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
`;

export default function Profile() {
  return (
    <div class="profile">
      <hanko-profile api={endpoint}></hanko-profile>
      <script type="module">
        {code}
      </script>
    </div>
  );
}

​
Implement logout

Use the Hanko client to logout. The code below use a custom event to trigger the logout:

HankoProfile.tsx
const endpoint = "HANKO_API_URL";
const code = `
  import { register, Hanko } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
  window.addEventListener('logout', () => {
    const hanko = new Hanko('${endpoint}');
    hanko.user.logout()
      .then(() => {
        window.location.href = '/signin';
      })
      .catch((error) => {
        // error handling
      });
  });
`;


export default function Profile() {
  const logout = () => {
    window.dispatchEvent(new Event("logout"));
  };

  return (
    <div class="profile">
      <button class="logout-btn" onClick={logout}>Logout</button>
      <hanko-profile api={endpoint}></hanko-profile>
      <script type="module">
        {code}
      </script>
    </div>
  );
}

​
Customize component styles

The styles of the hanko-auth and hanko-profile 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.

Was this page helpful?

SvelteKitReact