Hanko Elements Auth component guide

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)
Nextjs (Pages directory)
Nuxt
SvelteKit

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

components/HankoAuth.tsx

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

<template>
  <hanko-auth />
</template>

HankoAuth.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-auth on:onSessionCreated={redirectAfterLogin} />

Frontend

Create React App
React with Vite
Vue
Svelte
JavaScript

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

components/HankoAuth.tsx

import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

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

  return <hanko-auth />;
}

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-auth />
</template>

HankoProfile.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-auth />

<body>
  <hanko-auth />

  <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-auth> component with your favorite frameworks, navigate to quickstart guides.

Getting started

Guides

Using the Hanko API

Integrations

Resources

FAQ & support

Hanko Elements Auth component guide

Use case

Features

Usage

Markup

Attributes

Adding `<hanko-auth>` component

Full stack

Frontend

​Use case

​Features

​Usage

​Markup

​Attributes

​Adding <hanko-auth> component

​Full stack

​Frontend

Use case

Features

Usage

Markup

Attributes

Adding `<hanko-auth>` component

Full stack

Frontend