​
Use Case

The <hanko-register> component is ideal for building dedicated user registration flows in modern web applications. It provides a secure, flexible way to onboard new users with minimal setup—no need to build your own UI or manage complex authentication logic. 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 Login page:
try out the<hanko-login> component.

​
Features

Registerallows users to create new 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).
PasswordsSupports traditional password-based login for broader accessibility.

​
Usage

​
Markup

<hanko-register></hanko-register>

​
Attributes

NameDescription
prefilledEmailUsed to prefill the email input field
prefilledUsernameUsed to prefill the username input field
langUsed to specify the language of the content within the element

​
Adding <hanko-register> component

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

​
Full Stack

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

return (
<hanko-register />
);
}

​
Frontend

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

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

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

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