Access user data from your frontend

Learn how to access Hanko user data in your frontend code.

Hanko User Data Retrieval Guide:

About Hanko:

Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.

What This Guide Covers: This guide demonstrates how to retrieve user data from Hanko in frontend environments, including accessing user profiles, validating sessions, extracting information from JWTs.

Key Technologies:

• Hanko Frontend SDK
• Hanko Elements
• JWT (JSON Web Tokens)

Prerequisites:

• Active Hanko project with configured API URL
• Basic understanding of JavaScript/TypeScript

Tasks You’ll Complete:

• Retrieve current user profile data using the Frontend SDK
• Validate user sessions and extract JWT claims
• Implement proper authentication checks in your application

Get user data from API

To access user data in your frontend application, use the hanko.getUser() method from the hanko-frontend-sdk (also available via hanko-elements).

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

const hankoApi = "<YOUR_HANKO_API_URL>";
const hanko = new Hanko(hankoApi);

// Fetches the current user's profile information
const user = await hanko.getUser();
console.log("User profile:", user);
// Example output:
// {
//   user_id: "123e4567-e89b-12d3-a456-426614174000",
//   emails: [{ address: "[e-mail]", is_primary: true, is_verified: true }],
//   username: { id: "f2882293-3c39-451d-a7cb-4cf3375e0c66", username: "johndoe" },
//   created_at: "2025-01-01T10:00:00Z",
//   updated_at: "2025-04-01T12:00:00Z"
// }

Get user data from the session cookie

To extract user claims from the JWT token, use the hanko.validateSession() function.

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

const hankoApi = "<YOUR_HANKO_API_URL>";
const hanko = new Hanko(hankoApi);

// Checks the validity of the current session and returns the user claims
const sessionStatus = await hanko.validateSession();
console.log("Session status:", sessionStatus);
// Example output:
// {
//   is_valid: true,
//   claims: {
//     subject: "123e4567-e89b-12d3-a456-426614174000",
//     session_id: "789abc",
//     expiration: "2025-04-25T12:00:00Z",
//     email: { address: "[e-mail]", is_primary: true, is_verified: true },
//     custom_field: "value"
//   }
// }