Using the Frontend SDK
The following examples will cover some common use-cases for the hanko-frontend-sdk
instance returned by the register()
function, but please take a look into the frontend-sdk docs for details.
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((sessionDetail) => {
// A new JWT has been issued.
console.info(
`Session created or updated (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.
Was this page helpful?