Integrate Hanko with Solid

Hanko Frontend Integration Guide:About Hanko:Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.What This Guide Covers: This guide demonstrates how to integrate Hanko authentication into your frontend application. You’ll implement user authentication, profile management, route protection, and logout functionality with Hanko Elements web components.Key Technologies:

Modern frontend framework with TypeScript support
Build tools and development environment
Client-side routing and navigation
Hanko Elements web components
Hanko SDK for authentication logic

Prerequisites:

Node.js installed on your system
Basic knowledge of your chosen frontend framework
A Hanko Cloud account (sign up at cloud.hanko.io)

Integration Tasks You’ll Complete:

Set up your frontend application with the appropriate build tools
Install and configure Hanko Elements
Create a Hanko project in the cloud console
Implement authentication components (HankoAuth, HankoProfile)
Set up routing and navigation
Add logout functionality
Implement protected routes with session validation
Retrieve and display user data
Customize component styling and behavior

Install `@teamhanko/hanko-elements`

Install hanko-elements to access the pre-built hanko-auth and hanko-profile components.

npm install @teamhanko/hanko-elements

pnpm add @teamhanko/hanko-elements

bun add @teamhanko/hanko-elements

yarn add @teamhanko/hanko-elements

Add the Hanko API URL

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

.env

 VITE_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.

components/HankoAuth.tsx

import { onMount, createSignal, onCleanup } from "solid-js";
import { register, Hanko } from "@teamhanko/hanko-elements";
import { useNavigate } from "@solidjs/router";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

export default function HankoAuth() {
  const navigate = useNavigate();
  const hanko = new Hanko(hankoApi);

  const redirectAfterLogin = () => {
    navigate("/dashboard");
  };

  onMount(() => {
    hanko.onSessionCreated(() => {
      redirectAfterLogin();
    });

    register(hankoApi).catch((error) => {
      // handle error
    });
  });

  onCleanup(() => {
    // cleanup logic if needed
  });

  return <hanko-auth />;
}

type GlobalJsx = JSX.IntrinsicElements;

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "hanko-auth": GlobalJsx["hanko-auth"];
    }
  }
}

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

Add `<hanko-profile>` component

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

components/HankoProfile.tsx

import { onMount } from "solid-js";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

export default function HankoProfile() {
    onMount(() => {
        register(hankoApi).catch((error) => {
            // handle error
        });
    });

    return <hanko-profile />;
}

type GlobalJsx = JSX.IntrinsicElements;

declare module "solid-js" {
    namespace JSX {
        interface IntrinsicElements {
            "hanko-profile": GlobalJsx["hanko-profile"];
        }
    }
}

It should look like this 👇

Implement logout functionality

Create a logout button component using @teamhanko/hanko-elements to manage user logouts:

components/LogoutButton.tsx

import { useNavigate } from "@solidjs/router";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

function LogoutBtn() {
    const navigate = useNavigate();
    let hanko = new Hanko(hankoApi ?? "");

    const logout = async () => {
        try {
            await hanko.user.logout();
            navigate("/auth");
        } catch (error) {
            console.error("Error during logout:", error);
        }
    };

    return <button onClick={logout}>Logout</button>;
}

export default LogoutBtn;

Customize component styles

You can customize the appearance of hanko-auth and hanko-profile components using CSS variables and parts. Refer to our customization guide.

Authenticate backend requests

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

Try it yourself

Solid.js example

It uses Express.js for the backend, full source code available on our GitHub.

Getting started

Guides

Using the Hanko API

Integrations

Resources

FAQ & support

Integrate Hanko with Solid

Install `@teamhanko/hanko-elements`

Add the Hanko API URL

Add `<hanko-auth>` component

Add `<hanko-profile>` component

Implement logout functionality

Customize component styles

Authenticate backend requests

Try it yourself

Solid.js example

​Install @teamhanko/hanko-elements

​Add the Hanko API URL

​Add <hanko-auth> component

​Add <hanko-profile> component

​Implement logout functionality

​Customize component styles

​Authenticate backend requests

​Try it yourself

Solid.js example

Install `@teamhanko/hanko-elements`

Add the Hanko API URL

Add `<hanko-auth>` component

Add `<hanko-profile>` component

Implement logout functionality

Customize component styles

Authenticate backend requests

Try it yourself