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.

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

Examples showcasing how to add <hanko-profile> component in different full stack and frontend frameworks.

Full Stack

Nextjs (App directory)

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

"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 />

HankoProfile.tsx

const endpoint = "HANKO_API_URL";

const code = `
  import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
`;

export default function Profile() {
  return (
    <div class="profile">
      <hanko-profile api={endpoint}></hanko-profile>
      <script type="module">
        {code}
      </script>
    </div>
  );
}

Frontend

Create React App

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