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
- Yarn
npm install @teamhanko/hanko-elements
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.
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.
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.
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.
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:
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.