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.

​

Auth Flow Completed

Will be triggered after a session has been created and the user has completed possible additional steps (e.g. passkey registration or password recovery) via the <hanko-auth> element.

hanko.onAuthFlowCompleted((authFlowCompletedDetail) => {
  // Login, registration or recovery has been completed successfully. You can now take control and redirect the
  // user to protected pages.
  console.info(
    `User successfully completed the registration or authorization process (user-id: "${authFlowCompletedDetail.userID}")`
  );
});

​

Session created

Will be triggered before the hanko-auth-flow-completed happens, as soon as the user is technically logged in. 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((sessionDetail) => {
  // A new JWT has been issued.
  console.info(
    `Session created or updated (user-id: "${sessionDetail.userID}", jwt: ${sessionDetail.jwt})`
  );
});

​

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(() => {
  // You can redirect the user to a login page or show the `<hanko-auth>` element, or to prompt the user to log in again.
  console.info("Session expired");
});

​

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(() => {
  // You can redirect the user to a login page or show the `<hanko-auth>` element.
  console.info("User logged out");
});

​

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(() => {
  // You can redirect the user to a login page or show the `<hanko-auth>` element.
  console.info("User has been deleted");
});

​

Sessions

Determine whether the user is logged in

hanko.session.isValid();

Getting the session details

const session = hanko.session.get();

if (session) {
  console.info(`userID: ${session.userID}, jwt: ${session.jwt}`);
}

​

User Client

The SDK contains several client classes to make the communication with the Hanko-API easier. Here some examples of things you might want to do

Getting the current user

const user = await hanko.user.getCurrent();
console.info(`id: ${user.id}, email: ${user.email}`);

Log out a user

await hanko.user.logout();

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