> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Hanko Elements Profile component

> A Web Component that allows users to manage their account and security settings.

<div class="hidden">
  **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
</div>

## 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

```html theme={null}
<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

<Tabs>
  <Tab title="Nextjs (App directory)">
    ```jsx components/HankoProfile.jsx theme={null}
    "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 />;
    }
    ```
  </Tab>

  <Tab title="Nextjs (Pages directory)">
    ```jsx components/HankoProfile.jsx theme={null}
    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 />;
    }
    ```
  </Tab>

  <Tab title="Nuxt">
    ```html profile.vue theme={null}
    <template>
      <hanko-profile />
    </template>
    ```
  </Tab>

  <Tab title="SvelteKit">
    ```html HankoProfile.svelte theme={null}
    <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 />
    ```
  </Tab>
</Tabs>

#### Frontend

<Tabs>
  <Tab title="Create React App">
    ```jsx components/HankoProfile.tsx theme={null}
    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 />;
    }
    ```
  </Tab>

  <Tab title="React with Vite">
    ```jsx components/HankoProfile.tsx theme={null}
    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 />;
    }
    ```
  </Tab>

  <Tab title="Vue">
    ```html HankoProfile.vue theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Svelte">
    ```html HankoProfile.svelte theme={null}
    <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 />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```html profile.html theme={null}
    <body>
      <hanko-profile />

      <script type="module">
        import { register } from "https://esm.run/@teamhanko/hanko-elements";

        await register(process.env.HANKO_API_URL);
      </script>
    </body>
    ```
  </Tab>
</Tabs>

You should see an interface similar to this 👇

<Frame>
  <img src="https://mintcdn.com/hanko/nDll7gWf2olRVk-k/images/fullstack-guide/next-two.png?fit=max&auto=format&n=nDll7gWf2olRVk-k&q=85&s=ddd4d20a613d80fcb7004d677fee3ed9" alt="profile-page" width={500} style={{ borderRadius: '0.5rem' }} data-path="images/fullstack-guide/next-two.png" />
</Frame>

For more detailed instructions on integrating `<hanko-profile>` component with your favorite frameworks, navigate to [quickstart guides](/quickstarts/fullstack).