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

# Hanko Elements Login component guide

> A Web Component that handles user login.

<div class="hidden">
  **Hanko Elements Login Component 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 implement the `<hanko-login>` web component, which provides a dedicated login interface for existing users. You'll learn how to integrate this component for applications that require separate login and registration flows or controlled-access scenarios.

  **Key Technologies**:

  * Hanko Elements
  * Web Components
  * JavaScript/TypeScript
  * React, Vue, Svelte
  * Next.js, Nuxt, SvelteKit
  * Passkeys
  * OAuth SSO
  * 2FA authentication
  * Session management

  **Prerequisites**:

  * Basic knowledge of frontend development, HTML/JavaScript, your chosen framework
  * Active Hanko account with API access

  **Tasks You'll Complete**:

  * Install and register the Hanko Elements package
  * Configure the `<hanko-login>` component for login-only flows
  * Implement the component across different frameworks (React, Vue, Svelte)
  * Set up event handlers for successful login events
  * Configure component attributes for prefilled values and language settings
  * Handle authentication state changes and navigation
</div>

## Use case

The `<hanko-login>` component is designed for dedicated login interfaces and intentionally excludes registration functionality, unlike `<hanko-auth>`. This makes it ideal for controlled-access applications such as enterprise systems, internal tools, or invitation-based platforms where user registration needs to be restricted.

If you want to Combine Login and Register on the same page: \
[try out the`<hanko-auth>` component](/guides/hanko-elements/auth-component).

If you want to create a dedicated Registration page:  \
[try out the `<hanko-registration>` component](/guides/hanko-elements/register-component) .

## Features

|               |                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------- |
| **Login**     | Allows users to securely log in to their existing accounts.                                 |
| **Passkeys**  | Enables passwordless login with modern device credentials.                                  |
| **Passcodes** | Useful for email-based login and verification workflows.                                    |
| **2FA**       | Users can use a TOTP app or security keys.                                                  |
| **OAuth SSO** | Allows users to log in using third-party identity providers (e.g., Google, Apple).          |
| **SAML SSO**  | Allows users to log in using SAML identity providers (e.g., Entra, Okta, Google Workspace). |
| **Passwords** | Supports traditional password-based login for broader accessibility.                        |

## Usage

### Markup

```html theme={null}
<hanko-login></hanko-login>
```

### Attributes

| Name                 | Description                                                    |
| -------------------- | -------------------------------------------------------------- |
| `prefilled-email`    | Used to prefill the email input field                          |
| `prefilled-username` | Used to prefill the username input field                       |
| `lang`               | Used to specify the language of the content within the element |

### Adding `<hanko-login>` component

The following examples show how to integrate the `<hanko-login>` component in different full-stack and frontend frameworks.

#### Full stack

<Tabs>
  <Tab title="Nextjs (App directory)">
    ```jsx components/HankoLogin.tsx theme={null}
    "use client"

    import { useEffect } from "react";
    import { register } from "@teamhanko/hanko-elements";

    const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

    export default function HankoLogin() {
      useEffect(() => {
       register(hankoApi)
          .catch((error) => {
            // handle error
          });
      }, []);

    return (
    <hanko-login />
    );
    }
    ```
  </Tab>

  <Tab title="Nextjs (Pages directory)">
    ```jsx components/HankoLogin.tsx theme={null}
    import { useEffect } from "react";
    import { register } from "@teamhanko/hanko-elements";

    const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

    export default function HankoLogin() {
      useEffect(() => {
       register(hankoApi)
          .catch((error) => {
            // handle error
          });
    }, []);

    return (
      <hanko-login />
      );
    }
    ```
  </Tab>

  <Tab title="Nuxt">
    ```html login.vue theme={null}
    <template>
      <hanko-login />
    </template>
    ```
  </Tab>

  <Tab title="SvelteKit">
    ```html HankoLogin.svelte theme={null}
    <script>
      import { onMount } from "svelte";
      import { goto } from "$app/navigation";
      import { register } from "@teamhanko/hanko-elements";
      import { env } from "$env/dynamic/public";
      const hankoApi = env.PUBLIC_HANKO_API_URL;

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

      onMount(async () => {
        register(hankoApi).catch((error) => {
          // handle error
        });
      });
    </script>

    <hanko-login on:onSessionCreated={redirectAfterLogin} />
    ```
  </Tab>
</Tabs>

#### Frontend

<Tabs>
  <Tab title="Create React App">
    ```jsx components/HankoLogin.tsx theme={null}
    import { useEffect } from "react";
    import { register } from "@teamhanko/hanko-elements";

    const hankoApi = process.env.REACT_APP_HANKO_API_URL;

    export default function HankoLogin() {
      useEffect(() => {
        register(hankoApi).catch((error) => {
          // handle error
        });
      }, []);

      return <hanko-login />;
    }
    ```
  </Tab>

  <Tab title="React with Vite">
    ```jsx components/HankoLogin.tsx theme={null}
    import { useEffect } from "react";
    import { register } from "@teamhanko/hanko-elements";

    const hankoApi = import.meta.env.VITE_HANKO_API_URL;

    export default function HankoLogin() {
      useEffect(() => {
        register(hankoApi).catch((error) => {
          // handle error
        });
      }, []);

      return <hanko-login />;
    }
    ```
  </Tab>

  <Tab title="Vue">
    ```html HankoAuth.vue theme={null}
    <script setup>
    import { onMounted } from "vue";
    import { register } from "@teamhanko/hanko-elements";

    const hankoApi = process.env.HANKO_API_URL;

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

    <template>
      <hanko-login />
    </template>
    ```
  </Tab>

  <Tab title="Svelte">
    ```html HankoLogin.svelte theme={null}
    <script>
      import { register } from "@teamhanko/hanko-elements";
      import { onMount } from "svelte";
      import { env } from "$env/dynamic/public";

      const hankoApi = env.PUBLIC_HANKO_API_URL;

      onMount(async () => {
        register(hankoApi).catch((error) => {
          // handle error
        });
      });
    </script>

    <hanko-login />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```html login.html theme={null}
    <body>
      <hanko-login />

      <script type="module">
        import { register } from "https://esm.run/@teamhanko/hanko-elements";

        await register(process.env.HANKO_API_URL);
      </script>
    </body>
    ```
  </Tab>
</Tabs>

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>

For more detailed instructions on integrating `<hanko-login>` component with your favorite frameworks, navigate to [quickstart guides](/quickstarts/fullstack).