Hanko Elements Login component guide

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

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. If you want to create a dedicated Registration page:
try out the <hanko-registration> 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

<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

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

Full stack

Nextjs (App directory)
Nextjs (Pages directory)
Nuxt
SvelteKit

components/HankoLogin.tsx

"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 />
);
}

components/HankoLogin.tsx

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 />
  );
}

<template>
  <hanko-login />
</template>

HankoLogin.svelte

<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} />

Frontend

Create React App
React with Vite
Vue
Svelte
JavaScript

components/HankoLogin.tsx

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 />;
}

components/HankoLogin.tsx

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 />;
}

HankoAuth.vue

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

HankoLogin.svelte

<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 />

<body>
  <hanko-login />

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

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

You should see an interface similar to this 👇

For more detailed instructions on integrating <hanko-login> component with your favorite frameworks, navigate to quickstart guides.

Getting started

Guides

Using the Hanko API

Integrations

Resources

FAQ & support

Hanko Elements Login component guide

Use case

Features

Usage

Markup

Attributes

Full stack

Frontend

​Use case

​Features

​Usage

​Markup

​Attributes

​Adding <hanko-login> component

​Full stack

​Frontend

Use case

Features

Usage

Markup

Attributes

Adding `<hanko-login>` component

Full stack

Frontend