React

In this guide you will learn how to use the hanko-elements web components to add authentication and a user profile to your React application.

Install dependencies

Install the @teamhanko/hanko-elements package:

npm

npm install @teamhanko/hanko-elements

Yarn

yarn add @teamhanko/hanko-elements

Add <hanko-auth> component

To provide a login interface in your app, use the <hanko-auth> web component. To do so, first import the register function from @teamhanko/hanko-elements in your React component. Call it with the URL of the Hanko API as an argument to register the <hanko-auth> element with the browser's CustomElementRegistry. Then use the element in your JSX.

info

If you are using Hanko Cloud, you can find the API URL on your project dashboard. If you are self-hosting you need to provide the URL of your running Hanko backend.

HankoAuth.jsx

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

const hankoApi = "<YOUR_API_URL>";

export default function HankoAuth() {
  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-auth />
  );
}

Define event callbacks

Use the Hanko client provided by @teamhanko/hanko-elements to subscribe to events.

HankoAuth.jsx

import React, { useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { register, Hanko } from "@teamhanko/hanko-elements";

const hankoApi = "<YOUR_API_URL>";

export default function HankoAuth() {
  const navigate = useNavigate();
  const hanko = useMemo(() => new Hanko(hankoApi), []);

  const redirectAfterLogin = useCallback(() => {
    // successfully logged in, redirect to a page in your application
    navigate("...");
  }, [navigate]);

  useEffect(() => hanko.onAuthFlowCompleted(() => {
    redirectAfterLogin();
  }), [hanko, redirectAfterLogin]);

  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-auth />
  );
}

Add <hanko-profile> component

To provide a page where users can manage their email addresses, password and passkeys, use the <hanko-profile> web component. Import the register function from @teamhanko/hanko-elements in your React component. Call it with the URL of the Hanko API as an argument to register the <hanko-profile> element with the browser's CustomElementRegistry. Then use the element in your JSX.

HankoProfile.jsx

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

const hankoApi = "<YOUR_API_URL>";

export default function HankoProfile() {
  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-profile />
  );
};

Implement logout

Use the Hanko client provided by @teamhanko/hanko-elements to log out users. On logout a custom event is dispatched that you can subscribe to:

HankoProfile.jsx

import { useEffect, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { register, Hanko } from "@teamhanko/hanko-elements";

const hankoApi = "<YOUR_API_URL>";

export default function HankoProfile() {
  const navigate = useNavigate();
  const hanko = useMemo(() => new Hanko(hankoApi), []);

  const logout = () => {
    hanko.user.logout().catch((error) => {
      // handle error
    })
  }

  const redirectAfterLogout = () => {
    // successfully logged out, redirect to a login page in your application
    navigate("...");
  };

  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  useEffect(() => hanko.onUserLoggedOut(() => {
    redirectAfterLogout();
  }), [hanko, redirectAfterLogout]);

  return (
    <>
      <button onClick={logout}>Logout</button>
      <hanko-profile />
    </>
  );
};

Customize component styles

The styles of the hanko-auth and hanko-profile elements can be customized using CSS variables and parts. See our guide on customization here.

Authenticate backend requests

If you want to authenticate requests in your own backend, please view our backend guide.