​
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

LoginAllows users to securely log in to their existing accounts.
PasskeysEnables passwordless login with modern device credentials.
PasscodesUseful for email-based login and verification workflows.
2FAUsers can use a TOTP app or security keys.
OAuth SSOAllows users to log in using third-party identity providers (e.g., Google, Apple).
SAML SSOAllows users to log in using SAML identity providers (e.g., Entra, Okta, Google Workspace).
PasswordsSupports traditional password-based login for broader accessibility.

​
Usage

​
Markup

<hanko-login></hanko-login>

​
Attributes

NameDescription
prefilled-emailUsed to prefill the email input field
prefilled-usernameUsed to prefill the username input field
langUsed 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

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

​
Frontend

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 />;
}
You should see an interface similar to this 👇
sign-up
For more detailed instructions on integrating <hanko-login> component with your favorite frameworks, navigate to quickstart guides.