Hanko Elements Auth component guide

A Web Component that handles user login and user registration.

Hanko Elements Auth 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-auth> web component, which provides a unified authentication interface that handles both user login and registration flows in a single component. You’ll learn how to integrate this versatile component into various frameworks and customize its behavior for different use cases.

Key Technologies:

• Hanko Elements
• Web Components
• JavaScript/TypeScript
• React, Vue, Svelte
• Next.js, Nuxt, SvelteKit
• CSS customization
• Passkeys
• OAuth SSO
• Modern authentication methods

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-auth> component in your application
• Implement the component across different frameworks (React, Vue, Svelte)
• Set up event handlers for authentication state changes
• Configure component attributes for prefilled values and language settings
• Handle both login and registration flows in an unified interface

Use case

The <hanko-auth> component provides a complete authentication solution that combines both login and registration functionality in a single interface. This component is ideal for applications that want to streamline their authentication process without needing separate routes or pages for different authentication flows.

The component automatically handles transitions between login and registration views, providing a seamless user experience throughout the entire authentication 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-registration> component .

Features

Login + Registration	Seamlessly handles both flows in one component.
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-auth></hanko-auth>

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
mode	Specify the starting flow, either registration or login

Adding <hanko-auth> component

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

Full stack

Nextjs (App directory)

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

Create React App

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 👇

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