Hanko Elements Login component guide

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