> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Hanko with a JavaScript backend

> Learn how to validate Hanko session tokens in your JavaScript/Node.js backend to authenticate API requests.

<div class="hidden">
  **Hanko Backend Integration 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 validate Hanko session tokens in your backend application. You'll learn to implement session validation, create middleware for protecting endpoints, and authenticate requests using Hanko's session management APIs.

  **Key Technologies**:

  * Server-side programming language
  * HTTP client libraries
  * Middleware frameworks
  * JSON handling
  * Hanko session validation API

  **Prerequisites**:

  * Knowledge of your chosen backend language and framework
  * Hanko Cloud account (sign up at cloud.hanko.io)
  * Frontend application with Hanko authentication

  **Integration Tasks You'll Complete**:

  * Set up Hanko API URL configuration from environment variables
  * Implement session token validation using proper data structures
  * Create reusable middleware or utilities for protecting API endpoints
  * Handle session validation responses, errors, and edge cases
  * Extract session tokens from HTTP cookies securely
  * Build authentication utilities that integrate with your application architecture
  * Implement comprehensive error handling and logging for production use
</div>

After successful authentication, Hanko generates a session token stored as a cookie. This guide shows how to validate these session tokens in your JavaScript backend to authenticate API requests.

## Get the Hanko API URL

Retrieve the API URL from the [Hanko Console](https://cloud.hanko.io/).

<Note>If you are self-hosting Hanko you need to provide your own URL.</Note>

### Steps to authenticate requests

1. Retrieve the session token.

2. Verify the Session token using the Hanko [Validate](/api-reference/public/session-management/validate-a-session-1) API endpoint.

### Example function

The following section demonstrates how to validate session tokens against the Hanko backend.
The specific implementation for retrieving the session token cookie will vary depending on your JavaScript runtime environment and framework.

```ts index.ts theme={null}
// Types and interfaces
interface TokenValidator {
  validateToken(token: string): Promise<boolean>;
}

interface ValidationResponse {
  is_valid: boolean;
}

// Token validator implementation
class HankoTokenValidator implements TokenValidator {
  constructor(private readonly hankoApiUrl: string) {}

  async validateToken(token: string): Promise<boolean> {
    if (!token || token.length === 0) {
      return false;
    }

    try {
      const response = await fetch(`${this.hankoApiUrl}/sessions/validate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ session_token: token }),
      });

      if (!response.ok) {
        return false;
      }

      const validationData = await response.json() as ValidationResponse;
      return validationData.is_valid;
    } catch (error) {
      console.error('Token validation error:', error);
      return false;
    }
  }
}
```

## Try it yourself

<Card
  title="Hono.js example (React frontend)"
  href="https://github.com/teamhanko/hanko-hono-react-starter"
  icon={
    <svg xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-external-link"
         width="24"
         height="24"
         viewBox="0 0 24 24"
         strokeWidth="2"
         stroke="#5465FF"
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
        <path d="M11 13l9 -9"></path>
        <path d="M15 4h5v5"></path>
    </svg>
}
>
  Full source code available at GitHub.
</Card>

<Card
  title="Node and Express.js example (React frontend)"
  href="https://github.com/teamhanko/hanko-react-express-starter"
  icon={
    <svg
        xmlns="http://www.w3.org/2000/svg"
        className="icon icon-tabler icon-tabler-external-link"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="#5465FF"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
        <path d="M11 13l9 -9"></path>
        <path d="M15 4h5v5"></path>
    </svg>
}
>
  Full source code available at GitHub.
</Card>

<Card
  title="Node and Express.js example (Vue frontend)"
  href="https://github.com/teamhanko/hanko-vue-express-starter"
  icon={
    <svg
        xmlns="http://www.w3.org/2000/svg"
        className="icon icon-tabler icon-tabler-external-link"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="#5465FF"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
        <path d="M11 13l9 -9"></path>
        <path d="M15 4h5v5"></path>
    </svg>
}
>
  Full source code available at GitHub.
</Card>

<Card
  title="Node and Express.js example (Svelte frontend)"
  href="https://github.com/teamhanko/hanko-svelte-express-starter"
  icon={
    <svg
        xmlns="http://www.w3.org/2000/svg"
        className="icon icon-tabler icon-tabler-external-link"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="#5465FF"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
        <path d="M11 13l9 -9"></path>
        <path d="M15 4h5v5"></path>
    </svg>
}
>
  Full source code available at GitHub.
</Card>
