Hanko Elements
Profile Component
Hanko Elements
Profile Component
A web component that allows to manage emails, passwords and passkeys.
Features
Email settings. Add more email adresses, change and delete them.
Password settings. Change or delete your password (if enabled).
Passkey settings. Add a new passkey, rename or delete them.
Usage
Markup
<hanko-profile></hanko-profile>
Attributes
| Name | Description |
|---|---|
lang | Used to specify the language of the content within the element |
Adding <hanko-profile> component
Examples showcasing how to add <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 👇
For more detailed instructions on integrating <hanko-profile> component with your favorite frameworks, navigate to quickstart guides.
Was this page helpful?