Skip to main content

Features

Email settingsAdd more email addresses, change and delete them.
Password settingsChange or delete your password (if enabled).
Passkey settingsAdd new passkeys, rename or delete them.
2FA settingsToggle Two-factor authentication and manage 2FA methods.
Session ManagementList and revoke active sessions across devices.

Usage

Markup

<hanko-profile></hanko-profile>

Attributes

NameDescription
langUsed to specify the language of the content within the element

Adding <hanko-profile> component

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

Full stack

  • Nextjs (App directory)
  • Nextjs (Pages directory)
  • Nuxt
  • SvelteKit
components/HankoProfile.jsx
"use client"

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

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

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

return <hanko-profile />;
}

Frontend

  • Create React App
  • React with Vite
  • Vue
  • Svelte
  • JavaScript
components/HankoProfile.tsx
import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

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

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