Using the Frontend SDK

You can create a hanko-frontend-sdk instance without having to register the web components as follows

import { Hanko } from "@teamhanko/hanko-elements";
const hanko = new Hanko("YOUR_HANKO_API_URL");

​

Events

It is possible to bind callbacks to different custom events in use of the SDKs event listener functions. The callback function will be called when the event happens and an object will be passed in, containing event details.

​

Session created

Will be triggered after a session has been created and the user has completed possible additional steps (e.g. passkey registration or password recovery). It will also be triggered when the user logs in via another browser window. The event can be used to obtain the JWT.

hanko.onSessionCreated(({ claims }) => {
  console.info("Session created with JWT claims:", claims);
    // Redirect to a protected page
});

​

Session Expired

Will be triggered when the session has expired, or when the session has been removed in another browser window, because the user has logged out, or deleted the account.

hanko.onSessionExpired(() => {
  console.log("Session expired, redirecting to login");
  // Redirect to a login page or show the `<hanko-auth>` element.
});

​

User Logged Out

Will be triggered, when the user actively logs out. In other browser windows, a “hanko-session-expired” event will be triggered at the same time.

hanko.onUserLoggedOut(() => {
  console.log("User logged out successfully");
  // Redirect to a login page or show the `<hanko-auth>` element.
});

​

User Deleted

Will be triggered when the user has deleted the account. In other browser windows, a hanko-session-expired event will be triggered at the same time.

hanko.onUserDeleted(() => {
  console.log("User account deleted");
  // Redirect to a login page or show the `<hanko-auth>` element.
});

​

Common Operations

The SDK provides functions to simplify interaction with the Hanko API. Here are some common operations:

Get the session validity and JWT claims:

const session = await hanko.validateSession();
console.log("Session valid:", session.is_valid, "Claims:", session.claims);

Retrieve the session token:

const token = hanko.getSessionToken();
console.log("Session token:", token);

Get the user data:

const user = await hanko.getUser();
console.log("User profile:", user.user_id, user.emails);

Log out the user:

await hanko.logout();
console.log("User logged out");

To learn how error handling works and what else you can do with SDK, take a look into the frontend-sdk docs.