​
Use Case

The <hanko-auth> component serves as a comprehensive authentication solution, seamlessly integrating both login and registration functionality within a unified interface. This component is specifically designed for applications seeking to streamline their authentication process by consolidating multiple authentication flows without requiring separate routes or pages. The component intelligently manages state transitions between login and registration views, enabling effortless user authentication while maintaining a cohesive experience throughout the sign-in and registration process. If you want to create a dedicated Login page:
try out the<hanko-login> component. If you want to create a dedicated Registration page:
try out the <hanko-register> component .

​
Features

Login + RegisterSeamlessly handles both flows in one component.
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).
PasswordsSupports traditional password-based login for broader accessibility.

​
Usage

​
Markup

<hanko-auth></hanko-auth>

​
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
modeSpeficy the starting flow, either registrationor login

​
Adding <hanko-auth> component

Examples showcasing how to add <hanko-auth> component in different full stack and frontend frameworks.

​
Full Stack

components/HankoAuth.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 HankoAuth() {
  useEffect(() => {
   register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

return (
<hanko-auth />
);
}

​
Frontend

components/HankoAuth.tsx
import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

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

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