​
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.
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

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

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.