### Start Local Development Server

Source: https://docs.hanko.io/using-the-api/build-a-custom-login-page

Use this command to start the local development server. Ensure you have Node.js and npm installed.

```bash
npm start
```

--------------------------------

### Install Hanko Frontend SDK

Source: https://docs.hanko.io/resources/frontend-sdk

Install the SDK using your preferred package manager.

```bash
# npm
npm install @teamhanko/hanko-frontend-sdk

# yarn
yarn add @teamhanko/hanko-frontend-sdk

# pnpm
pnpm install @teamhanko/hanko-frontend-sdk
```

--------------------------------

### Install Hanko Passkey SDK

Source: https://docs.hanko.io/passkey-api/js-sdk

Install the SDK using your preferred package manager.

```bash
npm i @teamhanko/passkeys-sdk
```

```bash
yarn add @teamhanko/passkeys-sdk
```

```bash
bun add @teamhanko/passkeys-sdk
```

```bash
pnpm add @teamhanko/passkeys-sdk
```

--------------------------------

### Install Hanko Elements

Source: https://docs.hanko.io/guides/hanko-elements/introduction

Install the package using your preferred package manager.

```bash
npm install @teamhanko/hanko-elements
```

```bash
pnpm add @teamhanko/hanko-elements
```

```bash
yarn add @teamhanko/hanko-elements
```

--------------------------------

### Install project dependencies

Source: https://docs.hanko.io/integrations/permit

Install the required Node.js packages for the application.

```sh
npm install
```

--------------------------------

### Install passkey provider dependencies

Source: https://docs.hanko.io/passkey-api/next-auth

Install the required Hanko provider and webauthn-json packages using your preferred package manager.

```bash
npm i @teamhanko/passkeys-next-auth-provider @github/webauthn-json
```

```bash
pnpm add @teamhanko/passkeys-next-auth-provider @github/webauthn-json
```

```bash
bun add @teamhanko/passkeys-next-auth-provider @github/webauthn-json
```

```bash
yarn add @teamhanko/passkeys-next-auth-provider @github/webauthn-json
```

--------------------------------

### Install Supabase JavaScript Client

Source: https://docs.hanko.io/integrations/supabase

Install the Supabase client library using your preferred package manager.

```bash
npm install @supabase/supabase-js
```

```bash
pnpm add @supabase/supabase-js
```

```bash
yarn add @supabase/supabase-js
```

--------------------------------

### Install Hanko Elements with bun

Source: https://docs.hanko.io/quickstarts/frontend/solid

Install the hanko-elements package to use pre-built authentication and profile components.

```bash
bun add @teamhanko/hanko-elements
```

--------------------------------

### Install dependencies for webhook handling

Source: https://docs.hanko.io/guides/webhooks

Install the required packages for the Express server and JWT verification.

```shell
npm install express jose
```

--------------------------------

### Initialize Passkey SDK and Start MFA Registration

Source: https://docs.hanko.io/passkey-api/mfa

Initialize the Hanko Passkey SDK with your API key and tenant ID. Then, call `initialize()` to generate the necessary options for starting the MFA passkey registration process for a given user.

```javascript
import { tenant } from "@teamhanko/passkeys-sdk";
import dotenv from "dotenv";
import db from "../db.js";

dotenv.config();

const passkeyApi = tenant({
  apiKey: process.env.PASSKEYS_API_KEY,
  tenantId: process.env.PASSKEYS_TENANT_ID,
});

async function startMfaRegistration(userID) {
  const user = db.users.find((user) => user.id === userID);

  const createOptions = await passkeyApi
    .user(user.id)
    .mfa.registration.initialize({
      username: user.email || "",
    });

  return createOptions;
}
```

--------------------------------

### Install Hanko Elements Package

Source: https://docs.hanko.io/quickstarts/fullstack

Install the @teamhanko/hanko-elements package to gain access to prebuilt authentication components like hanko-auth and hanko-profile.

```bash
cd project-name
npm install @teamhanko/hanko-elements

```

--------------------------------

### Run the development server

Source: https://docs.hanko.io/integrations/permit

Start the local development server for the Next.js application.

```sh
npm run dev
```

--------------------------------

### Start Login

Source: https://docs.hanko.io/llms.txt

Initializes a login flow for passkeys.

```APIDOC
## POST /start-login

### Description
Initialize a login flow for passkeys.

### Method
POST

### Endpoint
/start-login

### Parameters
#### Request Body
- **user_id** (string) - Required - The ID of the user attempting to log in.
- **challenge** (string) - Required - The challenge generated by the server for this login attempt.

### Response
#### Success Response (200)
- **options** (object) - The authentication options for the passkey login.
```

--------------------------------

### Install Passkey SDK with npm

Source: https://docs.hanko.io/passkey-api/mfa

Install the Hanko Passkey SDK using npm. This is the first step to integrate Passkey MFA into your Node.js application.

```bash
npm i @teamhanko/passkeys-sdk
```

--------------------------------

### Install Hanko Elements with pnpm

Source: https://docs.hanko.io/quickstarts/frontend/solid

Install the hanko-elements package to use pre-built authentication and profile components.

```bash
pnpm add @teamhanko/hanko-elements
```

--------------------------------

### Install Hanko Elements with npm

Source: https://docs.hanko.io/quickstarts/frontend/solid

Install the hanko-elements package to use pre-built authentication and profile components.

```bash
npm install @teamhanko/hanko-elements
```

--------------------------------

### Install Hanko Elements and Vue Router

Source: https://docs.hanko.io/quickstarts/frontend/vue

Install the necessary packages for Hanko authentication components and application routing.

```bash
cd project-name
npm install @teamhanko/hanko-elements vue-router
```

```bash
cd project-name
pnpm add @teamhanko/hanko-elements vue-router
```

```bash
cd project-name
bun add @teamhanko/hanko-elements vue-router
```

```bash
cd project-name
yarn add @teamhanko/hanko-elements vue-router
```

--------------------------------

### Install Hanko Elements with yarn

Source: https://docs.hanko.io/quickstarts/frontend/solid

Install the hanko-elements package to use pre-built authentication and profile components.

```bash
yarn add @teamhanko/hanko-elements
```

--------------------------------

### Install Hanko Elements and React Router

Source: https://docs.hanko.io/quickstarts/frontend/react

Install the necessary dependencies for Hanko authentication components and client-side routing.

```bash
cd project-name
npm install @teamhanko/hanko-elements react-router-dom
```

```bash
cd project-name
pnpm add @teamhanko/hanko-elements react-router-dom
```

```bash
cd project-name
bun add @teamhanko/hanko-elements react-router-dom
```

```bash
cd project-name
yarn add @teamhanko/hanko-elements react-router-dom
```

--------------------------------

### Install Hanko Elements and routing dependencies

Source: https://docs.hanko.io/quickstarts/frontend/svelte

Install the required Hanko Elements and Svelte routing packages within the project directory.

```bash
cd project-name
npm install @teamhanko/hanko-elements svelte-routing
```

```bash
cd project-name
pnpm add @teamhanko/hanko-elements svelte-routing
```

```bash
cd project-name
bun add @teamhanko/hanko-elements svelte-routing
```

```bash
cd project-name
yarn add @teamhanko/hanko-elements svelte-routing
```

--------------------------------

### Install Passkey SDK with bun

Source: https://docs.hanko.io/passkey-api/mfa

Install the Hanko Passkey SDK using bun. This is another package manager option for integrating Passkey MFA into your Node.js application.

```bash
bun add @teamhanko/passkeys-sdk
```

--------------------------------

### React Router Setup for Navigation

Source: https://docs.hanko.io/quickstarts/frontend/react

Configure routes for your React application using `react-router-dom`. This example sets up index route for the login page and a dashboard route.

```jsx
import './App.css'
import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';

import LoginPage from './pages/loginPage';
import Dashboard from './pages/dashboardPage';


const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/">
      {/* index route with Login page*/}
      <Route index element={<LoginPage />} /> 
       {/* dashboard route with Dashboard page*/}
      <Route path="dashboard" element={<Dashboard />} />
    </Route>
  )
)

export default function App(){
  return (
    <RouterProvider router={router} />
  )
}
```

--------------------------------

### UUID4 Schema Example

Source: https://docs.hanko.io/api-reference/public/email-management/get-a-list-of-emails-of-the-current-user

Example of a UUID4 formatted string.

```json
"c339547d-e17d-4ba7-8a1d-b3d5a4d17c1c"
```

--------------------------------

### Create SvelteKit Project

Source: https://docs.hanko.io/quickstarts/fullstack/sveltekit

Use the SvelteKit CLI to create a new SvelteKit project. This command initiates the project setup process.

```bash
npx sv create project-name
```

--------------------------------

### Set up Supabase Client

Source: https://docs.hanko.io/integrations/supabase

Initialize the Supabase client using environment variables for project URL and service role key.

```ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);
```

--------------------------------

### Initialize Hanko SDK

Source: https://docs.hanko.io/guides/hanko-elements/using-frontend-sdk

Create a new instance of the Hanko SDK by providing your API URL.

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

--------------------------------

### user.delete token payload example

Source: https://docs.hanko.io/guides/webhooks

Example JSON payload structure for the user.delete event.

```json
{
    "aud": [
        "Test Service ABC"
    ],
    "data": {
        "created_at": "2025-01-15T12:57:56.724052Z",
        "emails": [
            {
                "id": "d31be36d-08d7-409f-8437-1920628e6e51",
                "address": "test@example.com",
                "is_verified": true,
                "is_primary": true,
                "created_at": "2025-01-15T13:57:56.72784Z",
                "updated_at": "2025-01-15T13:57:56.72801Z"
            }
        ],
        "id": "42fbd0dc-28fb-4144-892c-c2c4a0f8f5d8",
        "identities": [
            {
                "id": "b3af92c5-414c-4c6b-a3ea-82ee263badef",
                "provider_id": "123456abcd",
                "provider_name": "testprovider",
                "email_id": "d31be36d-08d7-409f-8437-1920628e6e51",
                "created_at": "2025-01-17T13:40:11Z",
                "updated_at": "2025-01-17T13:40:13Z"
            }
        ],
        "ip_address": "127.0.0.1",
        "otp": {
            "id": "a7efd1ee-d7b2-440e-9284-625e06931745",
            "created_at": "2025-01-17T13:39:29.081428Z"
        },
        "password": {
            "id": "6ec87b0c-67db-42ef-9adb-d106734bde02",
            "created_at": "2025-01-15T13:57:56.735651Z",
            "updated_at": "2025-01-15T13:57:56.735651Z"
        },
        "updated_at": "2025-01-15T13:57:56.724255Z",
        "username": {
            "id": "61580d7d-0c11-4c25-bfca-ace21a14cc01",
            "username": "testmakker",
            "created_at": "2025-01-15T14:45:00.293001Z",
            "updated_at": "2025-01-17T13:46:41.700373Z"
        },
        "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36",
        "webauthn_credentials": [
            {
                "id": "eaYxbrFQJjl5dW5SAr0KznEmHwAen8HUAiaKN9ijsDY",
                "public_key": "pQECAyYgASFYIMq-SVnCDGIJjK2TAJyEQyXNtOw7x_MuEVUQuW80-AOcIlggyEcR_v5C8PuhrThwgx2urmRqviIb7dyXmGr3oyWk2rU",
                "attestation_type": "packed",
                "aaguid": "70a4ab68-d027-451a-9c86-3b8fd8414f68",
                "last_used_at": "2025-01-17T12:38:28.698563Z",
                "created_at": "2025-01-17T12:38:28.698563Z",
                "transports": [
                    "usb"
                ],
                "backup_eligible": false,
                "backup_state": false,
                "mfa_only": true
            },
            {
                "id": "BPtYkS1prrGu1owU3StJwWM5uYtVoD1-h4N_rPHrB84",
                "public_key": "pQECAyYgASFYILo4i3yC0V2kciBHL96EOx08h32CXXIFnuUmggHOhkGvIlggQFIp4CeJhzGpCiTNuQQoyiKV7oMLYxM549ctLJXJkZ0",
                "attestation_type": "packed",
                "aaguid": "649b9062-5892-4223-832b-921c5bce5827",
                "last_used_at": "2025-01-17T12:39:06.718171Z",
                "created_at": "2025-01-17T12:39:06.718171Z",
                "transports": [
                    "usb"
                ],
                "backup_eligible": false,
                "backup_state": false,
                "mfa_only": false
            }
        ]
    },
    "evt": "<string>",
    "exp": 1737118303,
    "iat": 1737118003,
    "sub": "hanko webhooks"
}
```

--------------------------------

### Not Found Response Example

Source: https://docs.hanko.io/api-reference/public/password/createset-a-password

Example of a Not Found error response, indicating a resource was not found.

```yaml
description: Not Found
content:
  application/json:
    schema:
      $ref: '#/components/schemas/Error'
    example:
      code: 404
      message: Not Found
```

--------------------------------

### Forbidden Response Example

Source: https://docs.hanko.io/api-reference/public/password/createset-a-password

Example of a Forbidden error response, indicating insufficient permissions.

```yaml
description: Forbidden
content:
  application/json:
    schema:
      $ref: '#/components/schemas/Error'
    example:
      code: 403
      message: Forbidden
```

--------------------------------

### Initialize Hanko Instance

Source: https://docs.hanko.io/resources/frontend-sdk

Initialize the SDK as a module or via a CDN script tag.

```javascript
import { Hanko } from "@teamhanko/hanko-frontend-sdk"

const hanko = new Hanko("http://localhost:3000")
```

```html
<script src="https://cdn.jsdelivr.net/npm/@teamhanko/hanko-frontend-sdk/dist/sdk.umd.js"></script>

<script>
    const hanko = new hankoFrontendSdk.Hanko("http://localhost:3000")
    ...
</script>
```

--------------------------------

### UUID4 Schema Example

Source: https://docs.hanko.io/api-reference/public/password/createset-a-password

Example of a UUID4 format string used for user identification.

```yaml
type: string
format: uuid4
example: c339547d-e17d-4ba7-8a1d-b3d5a4d17c1c
```

--------------------------------

### Initialize Passkey Registration (Backend)

Source: https://docs.hanko.io/passkey-api/js-sdk

Backend service to initialize passkey registration by calling `tenant().registration.initialize()`. Requires user ID and username.

```javascript
import { tenant } from "@teamhanko/passkeys-sdk";
import dotenv from "dotenv";
import db from "../db.js";

dotenv.config();

const passkeyApi = tenant({
  apiKey: process.env.PASSKEYS_API_KEY,
  tenantId: process.env.PASSKEYS_TENANT_ID,
});

async function startServerPasskeyRegistration(userID) {
  const user = db.users.find((user) => user.id === userID);

  const createOptions = await passkeyApi.registration.initialize({
    userId: user.id,
    username: user.email || "",
  });

  return createOptions;
}
```

--------------------------------

### Emails Schema Example

Source: https://docs.hanko.io/api-reference/public/email-management/get-a-list-of-emails-of-the-current-user

Example of an email object within the Emails schema. This endpoint is deprecated.

```json
[
  {
    "id": "5333cc5b-c7c4-48cf-8248-9c184ac72b65",
    "address": "john.doe@example.com",
    "is_verified": true,
    "is_primary": false
  }
]
```

--------------------------------

### Onboarding Actions

Source: https://docs.hanko.io/api-reference/flow/token-exchange

Handles various steps in the user onboarding process, including email verification, passkey setup, and username setting.

```APIDOC
## Onboarding Email Actions

### Description
Handles actions related to email during the onboarding process.

### Method
POST

### Endpoint
/onboarding/email

### Parameters
#### Request Body
- **email_address_set** (object) - Required - Sets the user's email address.
  - **flow_id** (string) - Required - The ID of the current flow.
  - **email** (string) - Required - The email address to set.
- **skip** (object) - Optional - Skips the email step.

### Response
#### Success Response (200)
- **status** (integer) - The status code, should be 200.
- **name** (string) - The name of the state, e.g., 'onboarding_create_passkey'.
- **payload** (object) - Contains the payload specific to the state.

#### Response Example
```json
{
  "status": 200,
  "name": "onboarding_create_passkey",
  "payload": {}
}
```

## Onboarding Create Passkey Actions

### Description
Handles actions related to creating a passkey during onboarding.

### Method
POST

### Endpoint
/onboarding/create_passkey

### Parameters
#### Request Body
- **webauthn_generate_creation_options** (object) - Required - Generates WebAuthn creation options for a passkey.
  - **flow_id** (string) - Required - The ID of the current flow.
- **skip** (object) - Optional - Skips the passkey creation step.
- **back** (object) - Optional - Navigates back to the previous step.

### Response
#### Success Response (200)
- **status** (integer) - The status code, should be 200.
- **name** (string) - The name of the state, e.g., 'onboarding_verify_passkey_attestation'.
- **payload** (object) - Contains the WebAuthn creation options.
  - **creation_options** (object) - The options for creating a WebAuthn credential.
    - **challenge** (string) - The challenge for the WebAuthn request.
    - **rp** (object) - Relying party information.
      - **id** (string) - Relying party ID.
      - **name** (string) - Relying party name.
    - **user** (object) - User information.
      - **id** (string) - User ID.
      - **name** (string) - User's display name.
    - **pubKeyCredParams** (array) - Public key credential parameters.
    - **timeout** (integer) - Timeout for the WebAuthn request.
    - **attestation** (string) - Attestation conveyance preference.

#### Response Example
```json
{
  "status": 200,
  "name": "onboarding_verify_passkey_attestation",
  "payload": {
    "creation_options": {
      "challenge": "challenge123",
      "rp": {
        "id": "hanko.io",
        "name": "Hanko"
      },
      "user": {
        "id": "clt123",
        "name": "user@example.com"
      },
      "pubKeyCredParams": [
        {
          "type": "public-key",
          "alg": -7
        }
      ],
      "timeout": 60000,
      "attestation": "direct"
    }
  }
}
```

## Onboarding Verify Passkey Attestation Actions

### Description
Handles the verification of a passkey attestation during onboarding.

### Method
POST

### Endpoint
/onboarding/verify_passkey_attestation

### Parameters
#### Request Body
- **webauthn_verify_attestation_response** (object) - Required - Verifies the WebAuthn attestation response.
  - **action** (string) - Required - Must be 'webauthn_verify_attestation_response'.
  - **inputs** (object) - Required - Contains the inputs for the WebAuthn verification.
    - **clientDataJSON** (string) - Required - The client data JSON from the authenticator.
    - **attestationObject** (string) - Required - The attestation object from the authenticator.
- **back** (object) - Optional - Navigates back to the previous step.

### Response
#### Success Response (200)
- **status** (integer) - The status code, should be 200.
- **name** (string) - The name of the state, e.g., 'success'.
- **payload** (object) - Contains the profile data of the user.
  - **user** (object) - User profile information.
    - **id** (string) - User ID.
    - **email** (object) - User's email information.
      - **address** (string) - User's email address.
      - **is_verified** (boolean) - Indicates if the email is verified.
      - **is_primary** (boolean) - Indicates if the email is primary.
    - **amr** (array) - Authentication Method References.
    - **subject** (string) - Subject identifier.
    - **issued_at** (string) - Timestamp of when the token was issued.
    - **audience** (array) - Audience of the token.
    - **issuer** (string) - Issuer of the token.

#### Response Example
```json
{
  "status": 200,
  "name": "success",
  "payload": {
    "user": {
      "id": "clt123",
      "email": {
        "address": "user@example.com",
        "is_verified": true,
        "is_primary": true
      },
      "amr": ["pwd", "passkey"],
      "subject": "sub123",
      "issued_at": "2023-10-26T10:00:00Z",
      "audience": ["aud123"],
      "issuer": "https://hanko.io"
    }
  }
}
```

## Onboarding Username Actions

### Description
Handles actions related to setting the username during onboarding.

### Method
POST

### Endpoint
/onboarding/username

### Parameters
#### Request Body
- **username_set** (object) - Required - Sets the username.
  - **action** (string) - Required - Must be 'username_set'.
  - **inputs** (object) - Required - Contains the inputs for setting the username.
    - **username** (string) - Required - The username to set.
- **skip** (object) - Optional - Skips the username step.

### Response
#### Success Response (200)
- **status** (integer) - The status code, should be 200.
- **name** (string) - The name of the state, e.g., 'success'.
- **payload** (object) - Contains the payload specific to the state.

#### Response Example
```json
{
  "status": 200,
  "name": "success",
  "payload": {}
}
```
```

--------------------------------

### Bad Request Response Example

Source: https://docs.hanko.io/api-reference/public/password/createset-a-password

Example of a Bad Request error response, indicating invalid input.

```yaml
description: Bad Request
content:
  application/json:
    schema:
      $ref: '#/components/schemas/Error'
    example:
      code: 400
      message: Bad Request
```

--------------------------------

### Create a new Remix application

Source: https://docs.hanko.io/quickstarts/fullstack/remix

Use this command to create a new Remix application using the official starter template.

```bash
npx create-remix@latest
```

--------------------------------

### POST /continue/passkey/registration

Source: https://docs.hanko.io/api-reference/flow/registration

Continues the flow to the `onboarding_create_passkey` state.

```APIDOC
## POST /continue/passkey/registration

### Description
Continue to the `onboarding_create_passkey` state.

### Method
POST

### Endpoint
/continue/passkey/registration

### Request Body
- **action** (string) - Required - Must be `continue_to_passkey_registration`.

### Request Example
{
  "action": "continue_to_passkey_registration"
}

### Response
#### Success Response (200)
- **action** (string) - The action type, e.g., `onboarding_create_passkey`.

#### Response Example
{
  "action": "onboarding_create_passkey"
}
```

--------------------------------

### Create a Vite React application

Source: https://docs.hanko.io/quickstarts/frontend/react

Initialize a new React project with TypeScript support using various package managers.

```bash
npm create vite@latest project-name -- --template react-ts
```

```bash
pnpm create vite project-name --template react-ts
```

```bash
bun create vite project-name --template react-ts
```

```bash
yarn create vite project-name --template react-ts
```

--------------------------------

### UUID4 Schema Example

Source: https://docs.hanko.io/api-reference/admin/user-management/update-a-user-by-id

Example of a UUID4 schema used for user IDs and other unique identifiers within the API.

```yaml
UUID4:
  type: string
  format: uuid4
  example: c339547d-e17d-4ba7-8a1d-b3d5a4d17c1c
```

--------------------------------

### POST /{tenant_id}/login/initialize

Source: https://docs.hanko.io/passkey-api/reference/start-login

Initializes a login flow for passkeys for a specific tenant.

```APIDOC
## POST /{tenant_id}/login/initialize

### Description
Initialize a login flow for passkeys.

### Method
POST

### Endpoint
/{tenant_id}/login/initialize

### Parameters
#### Path Parameters
- **tenant_id** (string) - Required - UUID of the tenant

#### Request Body
- **user_id** (string) - Optional - When provided the API Key needs to be sent to the server too.

### Request Example
{
  "user_id": "user-123"
}

### Response
#### Success Response (200)
- **publicKey** (object) - WebAuthn public key options
- **mediation** (string) - Mediation requirement (optional, required, silent)

#### Response Example
{
  "publicKey": {
    "challenge": "base64-encoded-challenge",
    "timeout": 60000,
    "rpId": "example.com",
    "allowCredentials": [],
    "userVerification": "preferred"
  },
  "mediation": "optional"
}
```

--------------------------------

### API Status Response Example

Source: https://docs.hanko.io/api-reference/admin

This is an example of a potential response when checking the API status. The actual response type is a string.

```json
"<string>"
```

--------------------------------

### Hanko FlowAPI - Initializing a New Flow

Source: https://docs.hanko.io/resources/frontend-sdk

Demonstrates how to start a new authentication or profile flow using the `createState` method.

```APIDOC
## POST /api/flows/create

### Description
Initializes a new authentication or profile flow using the `createState` method on a Hanko instance. Options can control event dispatching and auto-step behavior.

### Method
POST

### Endpoint
`/api/flows/create`

### Parameters
#### Query Parameters
- **flowName** (string) - Required - The name of the flow (e.g., "login", "register" or "profile").

#### Request Body
- **options** (object) - Optional - Configuration options for the flow.
  - **dispatchAfterStateChangeEvent** (boolean) - Optional - Whether to dispatch the onAfterStateChange event after state changes (default: true).
  - **excludeAutoSteps** (Array<string> | "all") - Optional - Array of state names or "all" to skip specific or all auto-steps (default: null).
  - **loadFromCache** (boolean) - Optional - Whether to attempt loading a cached state from localStorage (default: true).
  - **cacheKey** (string) - Optional - The key used for localStorage caching (default: "hanko-flow-state").

### Request Example
```json
{
  "flowName": "login",
  "options": {
    "dispatchAfterStateChangeEvent": true,
    "excludeAutoSteps": [],
    "loadFromCache": true,
    "cacheKey": "hanko-flow-state"
  }
}
```

### Response
#### Success Response (200)
- **state** (object) - The initial state object for the flow.
  - **name** (string) - The current state’s name (e.g., "login_init", "login_password", "success").
  - **flowName** (string) - The name of the flow (e.g., "login").
  - **error** (object | undefined) - An error object if an action or request fails.
  - **payload** (object | undefined) - State-specific data returned by the API.
  - **actions** (object) - An object mapping action names to Action instances.
  - **csrfToken** (string) - CSRF token for secure requests.
  - **status** (number) - HTTP status code of the last response.
  - **invokedAction** (object | undefined) - Details of the last action run on this state.
  - **previousAction** (object | undefined) - Details of the action that led to this state.
  - **isCached** (boolean) - Whether the state was loaded from localStorage.
  - **cacheKey** (string) - The key used for localStorage caching.
  - **excludeAutoSteps** (Array<string> | "all") - An array of `StateNames` excluded from auto-stepping.

#### Response Example
```json
{
  "state": {
    "name": "login_init",
    "flowName": "login",
    "error": null,
    "payload": {},
    "actions": {
      "example_action": {
        "enabled": true
      }
    },
    "csrfToken": "some_csrf_token",
    "status": 200,
    "invokedAction": null,
    "previousAction": null,
    "isCached": false,
    "cacheKey": "hanko-flow-state",
    "excludeAutoSteps": []
  }
}
```
```

--------------------------------

### Configure environment variables

Source: https://docs.hanko.io/integrations/supabase

Add your Hanko API URL and Supabase credentials to your local environment file.

```sh
NEXT_PUBLIC_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

NEXT_PUBLIC_SUPABASE_PROJECT_URL=YOUR_SUPABASE_PROJECT_URL
SUPABASE_SERVICE_ROLE_KEY=YOUR_SUPABASE_SERVICE_ROLE_KEY
```

--------------------------------

### Initialize Hanko Client and Initiate GitHub Sign-in

Source: https://docs.hanko.io/guides/social-sso/github

Use this code to initialize the Hanko client and start the third-party authentication flow for GitHub. Ensure the redirect URL is correctly configured in your Hanko project settings.

```javascript
import { Hanko } from "@teamhanko/hanko-frontend-sdk";

const hanko = new Hanko("<your_hanko_api_url>");

async function signInWithGitHub() {
  try {
    await hanko.thirdParty.auth("github", "<your_redirect_url>");
  } catch (error) {
    // handle error
  }
}
```

--------------------------------

### Initialize Apple authentication with Hanko Frontend SDK

Source: https://docs.hanko.io/guides/social-sso/apple

Use the thirdParty.auth method to initiate the Apple sign-in flow with a custom UI.

```javascript
import { Hanko } from "@teamhanko/hanko-frontend-sdk";

const hanko = new Hanko("<your_hanko_api_url>");

async function signInWithApple() {
try {
    await hanko.thirdParty.auth("apple", "<your_redirect_url>");
} catch (error) {
    // handle error
}
}
```

--------------------------------

### Install Hanko Elements for Angular

Source: https://docs.hanko.io/quickstarts/frontend/angular

Install the Hanko Elements package into your Angular project to use pre-built authentication and profile components.

```bash
cd project-name
npm install @teamhanko/hanko-elements
```

```bash
cd project-name
pnpm add @teamhanko/hanko-elements
```

```bash
cd project-name
bun add @teamhanko/hanko-elements
```

```bash
cd project-name
yarn add @teamhanko/hanko-elements
```

--------------------------------

### Install Hanko Elements with Yarn

Source: https://docs.hanko.io/quickstarts/fullstack/sveltekit

Install the Hanko Elements package using Yarn. This package provides pre-built authentication components for Svelte.

```bash
cd project-name
yarn add @teamhanko/hanko-elements
```

--------------------------------

### Actions Onboarding Create Passkey

Source: https://docs.hanko.io/api-reference/flow/registration

Handles the onboarding process for creating a passkey, including generating WebAuthn options, skipping, or navigating back.

```APIDOC
## POST /api/onboarding/passkey/create

### Description
Handles passkey creation during onboarding.

### Method
POST

### Endpoint
/api/onboarding/passkey/create

### Request Body
- **webauthn_generate_creation_options** (object) - Optional - Options for generating WebAuthn creation.
- **skip** (object) - Optional - Represents skipping passkey creation.
- **back** (object) - Optional - Represents navigating back.
```

--------------------------------

### Install Hanko Elements with Bun

Source: https://docs.hanko.io/quickstarts/fullstack/sveltekit

Install the Hanko Elements package using Bun. This package provides pre-built authentication components for Svelte.

```bash
cd project-name
bun add @teamhanko/hanko-elements
```

--------------------------------

### Build the App

Source: https://docs.hanko.io/using-the-api/build-a-custom-login-page

Use this command to build the application after making changes. Ensure your Hanko Cloud project is configured correctly.

```bash
npm run build
```

--------------------------------

### Install Hanko Elements with pnpm

Source: https://docs.hanko.io/quickstarts/fullstack/sveltekit

Install the Hanko Elements package using pnpm. This package provides pre-built authentication components for Svelte.

```bash
cd project-name
pnpm add @teamhanko/hanko-elements
```

--------------------------------

### Initialize Hanko Client and Initiate Microsoft Login

Source: https://docs.hanko.io/guides/social-sso/microsoft

Use this snippet to initialize the Hanko client and start the Microsoft authentication flow. Ensure the redirect URL is configured in your Hanko project settings.

```javascript
import { Hanko } from "@teamhanko/hanko-frontend-sdk";

// you can find the Hanko API URL on the dashboard of your project
// in the Hanko Cloud Console
const hanko = new Hanko("<your_hanko_api_url>");

async function signInWithMicrosoft() {
  try {
    // the redirect url argument must be one of the allowed redirect URLs
    // configured in the previous step.
    await hanko.thirdParty.auth("microsoft", "<your_redirect_url>");
  } catch (error) {
    // handle error
  }
}
```