Hanko Elements Profile component

Hanko Elements Profile Component Guide:About Hanko:Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.What This Guide Covers: This guide demonstrates how to implement the <hanko-profile> web component, which provides a comprehensive user profile management interface. Users can manage their email addresses, passwords, MFA credentials, passkeys, and active sessions through this component.Key Technologies:

Hanko Elements
Web Components
JavaScript/TypeScript
React, Vue, Svelte
Next.js, Nuxt, SvelteKit
User profile management
Session management
Account security features

Prerequisites:

Basic knowledge of frontend development, HTML/JavaScript, your chosen framework
Authenticated user sessions
Active Hanko account with API access

Tasks You’ll Complete:

Install and register the Hanko Elements package
Configure the <hanko-profile> component for user profile management
Implement the component across different frameworks (React, Vue, Svelte)
Enable users to manage email addresses, passwords, and passkeys
Set up session management and security features
Configure language settings and component customization

Features


Email settings	Add more email addresses, change and delete them.
Password settings	Change or delete your password (if enabled).
Passkey settings	Add new passkeys, rename or delete them.
2FA settings	Toggle Two-factor authentication and manage 2FA methods.
Session Management	List and revoke active sessions across devices.

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

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

components/HankoProfile.jsx

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

profile.vue

<template>
  <hanko-profile />
</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-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 />;
}

components/HankoProfile.tsx

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

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

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

  return <hanko-profile />;
}

HankoProfile.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-profile />
</template>

HankoProfile.svelte

<script>
  import { register } from "@teamhanko/hanko-elements";

  const hankoApi = process.env.HANKO_API_URL;

  onMount(async () => {
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  });
</script>

<hanko-profile />

profile.html

<body>
  <hanko-profile />

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

Getting started

Guides

Using the Hanko API

Integrations

Resources

FAQ & support

Hanko Elements Profile component

Features

Usage

Markup

Attributes

Adding `<hanko-profile>` component

Full stack

Frontend

​Features

​Usage

​Markup

​Attributes

​Adding <hanko-profile> component

​Full stack

​Frontend

Features

Usage

Markup

Attributes

Adding `<hanko-profile>` component

Full stack

Frontend