> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Hanko with Solid

> Learn how to quickly add authentication and user profile in your Solid app using Hanko.

<div class="hidden">
  **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
</div>

## Install `@teamhanko/hanko-elements`

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

<CodeGroup>
  ```bash npm theme={null}
  npm install @teamhanko/hanko-elements
  ```

  ```bash pnpm theme={null}
  pnpm add @teamhanko/hanko-elements
  ```

  ```bash bun theme={null}
  bun add @teamhanko/hanko-elements
  ```

  ```bash yarn theme={null}
  yarn add @teamhanko/hanko-elements
  ```
</CodeGroup>

## Add the Hanko API URL

Retrieve the API URL from the [Hanko Console](https://cloud.hanko.io/) and place it in your .env file.

```sh .env theme={null}
 VITE_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io
```

<Note>
  If you are self-hosting you need to provide the URL of your running Hanko
  backend.
</Note>

## 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](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).

```tsx components/HankoAuth.tsx theme={null}
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 👇

<Frame>
  <img src="https://mintcdn.com/hanko/nDll7gWf2olRVk-k/images/fullstack-guide/next-one.png?fit=max&auto=format&n=nDll7gWf2olRVk-k&q=85&s=cfa08b5e9e30da72781967f53165a313" alt="sign up" width="500" style={{ borderRadius: '0.5rem' }} data-path="images/fullstack-guide/next-one.png" />
</Frame>

## Add `<hanko-profile>` component

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

```tsx components/HankoProfile.tsx theme={null}
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 👇

<Frame>
  <img src="https://mintcdn.com/hanko/nDll7gWf2olRVk-k/images/fullstack-guide/next-two.png?fit=max&auto=format&n=nDll7gWf2olRVk-k&q=85&s=ddd4d20a613d80fcb7004d677fee3ed9" alt="profile page" width="500" style={{ borderRadius: '0.5rem' }} data-path="images/fullstack-guide/next-two.png" />
</Frame>

## Implement logout functionality

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

```tsx components/LogoutButton.tsx theme={null}
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](/guides/hanko-elements/customize-appearance).

## Authenticate backend requests

To authenticate requests on your backend with Hanko, refer to our [backend guide](/quickstarts/backend).

## Try it yourself

<Card
  title="Solid.js example"
  href="https://github.com/teamhanko/hanko-solid-express-starter"
  icon={
<svg
  xmlns="http://www.w3.org/2000/svg"
  className="icon icon-tabler icon-tabler-external-link"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  strokeWidth="2"
  stroke="#5465FF"
  fill="none"
  strokeLinecap="round"
  strokeLinejoin="round"
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
  <path d="M11 13l9 -9"></path>
  <path d="M15 4h5v5"></path>
</svg>
}
>
  It uses Express.js for the backend, full source code available on our GitHub.
</Card>