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.
⌘I