Setup - Hexclave Documentation

Setting up with AI? Use this single prompt in your coding agent to set up Hexclave for your selected stack.

Next.js SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for Next.js .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/next npm package with your preferred package manager:

npm i @hexclave/next
# or: pnpm i @hexclave/next
# or: yarn add @hexclave/next
# or: bun add @hexclave/next

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a frontend where you cannot keep a secret key safe, you would use the HexclaveClientApp constructor:

src/hexclave/client.ts

import { HexclaveClientApp } from "@hexclave/next";

export const hexclaveClientApp = new HexclaveClientApp({
  tokenStore: "cookie", // "nextjs-cookie" for Next.js, "cookie" for other web frontends, null for backend environments
  urls: {
    default: {
      type: "hosted",
    }
  },
});

In a backend where you can keep a secret key safe, you can use the HexclaveServerApp, which provides access to more sensitive APIs compared to HexclaveClientApp:

src/hexclave/server.ts

import { HexclaveServerApp } from "@hexclave/next";
import { hexclaveClientApp } from "./client";

export const hexclaveServerApp = new HexclaveServerApp({
  inheritsFrom: hexclaveClientApp,
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/next";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/next package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local


NEXT_PUBLIC_HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

NEXT_PUBLIC_HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Creating a <HexclaveProvider /> and <HexclaveTheme />

In React frameworks, Hexclave provides HexclaveProvider and HexclaveTheme components that should wrap your entire app at the root level.You can do this in the layout.tsx file in the app directory. The root layout must render the <html> and <body> tags, and HexclaveProvider/HexclaveTheme must go inside:

src/app/layout.tsx

import { HexclaveProvider, HexclaveTheme } from "@hexclave/next";
import { hexclaveServerApp } from "@/hexclave/server";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <HexclaveProvider app={hexclaveServerApp}>
          <HexclaveTheme>
            {children}
          </HexclaveTheme>
        </HexclaveProvider>
      </body>
    </html>
  );
}

5

Add Suspense boundary

Hexclave also provides additional useXyz React hooks for getXyz/listXyz functions. For example, useUser is like getUser, but as a suspending React hook.To support the suspension, you need to add a suspense boundary around your app.In Next.js, this can be easily done by adding a loading.tsx file in the app directory:

src/app/loading.tsx

export default function Loading() {
  return <div>Loading...</div>;
}

6

Done!

React SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for React .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/react npm package with your preferred package manager:

npm i @hexclave/react
# or: pnpm i @hexclave/react
# or: yarn add @hexclave/react
# or: bun add @hexclave/react

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a frontend where you cannot keep a secret key safe, you would use the HexclaveClientApp constructor:

src/hexclave/client.ts

import { HexclaveClientApp } from "@hexclave/react";

export const hexclaveClientApp = new HexclaveClientApp({
  tokenStore: "cookie", // "nextjs-cookie" for Next.js, "cookie" for other web frontends, null for backend environments
  urls: {
    default: {
      type: "hosted",
    }
  },
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/react";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/react package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local

# note: prefix the environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

# as above, prefix the project ID environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
# do NOT prefix the secret server key environment variable with NEXT_PUBLIC_ or VITE_ as it is server-only
HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Creating a <HexclaveProvider /> and <HexclaveTheme />

In React frameworks, Hexclave provides HexclaveProvider and HexclaveTheme components that should wrap your entire app at the root level.For example, if you have an App.tsx file, update it as follows:

src/App.tsx

import { HexclaveProvider, HexclaveTheme } from "@hexclave/react";
import { hexclaveClientApp } from "./hexclave/client";

export default function App() {
  return (
    <HexclaveProvider app={hexclaveClientApp}>
      <HexclaveTheme>
        {/* your app content */}
      </HexclaveTheme>
    </HexclaveProvider>
  );
}

5

Add Suspense boundary

Hexclave also provides additional useXyz React hooks for getXyz/listXyz functions. For example, useUser is like getUser, but as a suspending React hook.To support the suspension, you need to add a suspense boundary around your app.The easiest way to do this is to just wrap your entire app in a Suspense component:

src/App.tsx

import { Suspense } from "react";
import { HexclaveProvider, HexclaveTheme } from "@hexclave/react";
import { hexclaveClientApp } from "./hexclave/client";

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HexclaveProvider app={hexclaveClientApp}>
        <HexclaveTheme>
          {/* your app content */}
        </HexclaveTheme>
      </HexclaveProvider>
    </Suspense>
  );
}

6

Done!

Other JS/TS SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for Other JS/TS .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/js npm package with your preferred package manager:

npm i @hexclave/js
# or: pnpm i @hexclave/js
# or: yarn add @hexclave/js
# or: bun add @hexclave/js

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a frontend where you cannot keep a secret key safe, you would use the HexclaveClientApp constructor:

src/hexclave/client.ts

import { HexclaveClientApp } from "@hexclave/js";

export const hexclaveClientApp = new HexclaveClientApp({
  tokenStore: "cookie", // "nextjs-cookie" for Next.js, "cookie" for other web frontends, null for backend environments
  urls: {
    default: {
      type: "hosted",
    }
  },
});

Browser `<script>` tag (no bundler)

This approach is significantly less preferred than installing the @hexclave/js npm package and using a bundler. Reach for it only for quick prototypes, static HTML pages, or environments where you genuinely cannot run a build step. Prefer the npm setup above whenever possible.

If you cannot use npm or a bundler, load the SDK directly from esm.sh inside a <script type="module"> tag and expose the app on the global scope:

<script type="module">
  // Pin a specific version so a new release cannot unexpectedly break your page.
  import { HexclaveClientApp } from "https://esm.sh/@hexclave/js@1.0.121";

  globalThis.hexclaveClientApp = new HexclaveClientApp({
    // As you cannot inject environment variables into the browser without a bundler,
    // the project ID must be passed explicitly here.
    projectId: "your-project-id",
    tokenStore: "cookie",
    urls: {
      default: {
        type: "hosted",
      },
    },
  });
</script>

Any other script on the page can then use the app through the global, for example await globalThis.hexclaveClientApp.getUser().Important caveats for this approach:

Without a bundler or build step, there is no concept of environment variables in a browser. If there is no build step to inject HEXCLAVE_PROJECT_ID and related variables, you must hard-code projectId (and publishableClientKey if requirePublishableClientKey is enabled) directly in the constructor, or inject the environment variables either at build or request time in the server that serves the static file.
Only ever construct a HexclaveClientApp here, never a HexclaveServerApp, since a <script> tag runs on the client by design. Do not put a secret server key on the page.
As shown above, pin a specific version (e.g. https://esm.sh/@hexclave/js@1.0.121) rather than the unpinned https://esm.sh/@hexclave/js, so that a new SDK release cannot unexpectedly break your page.

In a backend where you can keep a secret key safe, you can use the HexclaveServerApp, which provides access to more sensitive APIs compared to HexclaveClientApp:

src/hexclave/server.ts

import { HexclaveServerApp } from "@hexclave/js";

export const hexclaveServerApp = new HexclaveServerApp({
  tokenStore: null,
  urls: {
    default: {
      type: "hosted",
    }
  },
});

In frameworks that are both front- and backend, like Next.js, you can also create a HexclaveServerApp from a HexclaveClientApp object:

src/hexclave/server.ts

import { HexclaveServerApp } from "@hexclave/js";
import { hexclaveClientApp } from "./client";

export const hexclaveServerApp = new HexclaveServerApp({
  inheritsFrom: hexclaveClientApp,
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/js package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local

# note: prefix the environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

# as above, prefix the project ID environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
# do NOT prefix the secret server key environment variable with NEXT_PUBLIC_ or VITE_ as it is server-only
HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Backend: Update callers with header & get user

You are now ready to use the Hexclave SDK. If you have any frontends calling your backend endpoints, you may want to pass along the Hexclave tokens in a header such that you can access the same user object on your backend.The most ergonomic way to do this is to pass the result of hexclaveClientApp.getAuthorizationHeader() as the Authorization header into your backend endpoints when the user is signed in:

// NOTE: This is your frontend's code
const authorizationHeader = await hexclaveClientApp.getAuthorizationHeader();
const response = await fetch("/my-backend-endpoint", {
  headers: {
    ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
  },
});
// ...

In most backend frameworks you can then access the user object by passing the request object as a tokenStore of the functions that access the user object:

// NOTE: This is your backend's code
const user = await hexclaveServerApp.getUser({ tokenStore: request });
return new Response("Hello, " + user.displayName, { headers: { "Cache-Control": "private, no-store" } });

This will work as long as request is an object that follows the shape { headers: Record<string, string | null> | { get: (name: string) => string | null } }.

Make sure that HTTP caching is disabled with Cache-Control: private, no-store for authenticated backend endpoints.

If you cannot use getAuthorizationHeader(), for example because you are using a protocol other than HTTP, you can use getAuthJson() instead:

// Frontend:
await rpcCall("my-rpc-endpoint", {
  data: {
    auth: await hexclaveClientApp.getAuthJson(),
  },
});

// Backend:
const user = await hexclaveServerApp.getUser({ tokenStore: data.auth });
return new RpcResponse("Hello, " + user.displayName);

5

Done!

Tanstack Start SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for Tanstack Start .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/tanstack-start npm package with your preferred package manager:

npm i @hexclave/tanstack-start
# or: pnpm i @hexclave/tanstack-start
# or: yarn add @hexclave/tanstack-start
# or: bun add @hexclave/tanstack-start

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a frontend where you cannot keep a secret key safe, you would use the HexclaveClientApp constructor:

src/hexclave/client.ts

import { HexclaveClientApp } from "@hexclave/tanstack-start";

export const hexclaveClientApp = new HexclaveClientApp({
  tokenStore: "cookie", // "nextjs-cookie" for Next.js, "cookie" for other web frontends, null for backend environments
  urls: {
    default: {
      type: "hosted",
    }
  },
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/tanstack-start";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/tanstack-start package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local


VITE_HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

VITE_HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Creating a <HexclaveProvider /> and <HexclaveTheme />

In React frameworks, Hexclave provides HexclaveProvider and HexclaveTheme components that should wrap your entire app at the root level.TanStack Start uses file-based routes. The provider goes inside the root route’s component (the inner React tree), while the document shell stays in shellComponent. Update src/routes/__root.tsx:

src/routes/__root.tsx

import { HexclaveProvider, HexclaveTheme } from "@hexclave/tanstack-start";
import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { hexclaveClientApp } from "../hexclave/client";

export const Route = createRootRoute({
  shellComponent: RootDocument,
  component: RootComponent,
});

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function RootComponent() {
  return (
    <HexclaveProvider app={hexclaveClientApp}>
      <HexclaveTheme>
        <Outlet />
      </HexclaveTheme>
    </HexclaveProvider>
  );
}

Do not edit src/routeTree.gen.ts — it is regenerated automatically by the TanStack Start router from the files under src/routes/.

5

Add Suspense boundary

Hexclave also provides additional useXyz React hooks for getXyz/listXyz functions. For example, useUser is like getUser, but as a suspending React hook.To support the suspension, you need to add a suspense boundary around your app.wrap the <Outlet /> in your root route with a Suspense boundary so the document shell can stream while child routes wait on Hexclave. Update RootComponent in src/routes/__root.tsx:

src/routes/__root.tsx

import { Suspense } from "react";
// ...other imports...

function RootComponent() {
  return (
    <HexclaveProvider app={hexclaveClientApp}>
      <HexclaveTheme>
        <Suspense fallback={<div>Loading...</div>}>
          <Outlet />
        </Suspense>
      </HexclaveTheme>
    </HexclaveProvider>
  );
}

6

Done!

Node.js SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for Node.js .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/js npm package with your preferred package manager:

npm i @hexclave/js
# or: pnpm i @hexclave/js
# or: yarn add @hexclave/js
# or: bun add @hexclave/js

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a backend where you can keep a secret key safe, you can use the HexclaveServerApp, which provides access to more sensitive APIs compared to HexclaveClientApp:

src/hexclave/server.ts

import { HexclaveServerApp } from "@hexclave/js";

export const hexclaveServerApp = new HexclaveServerApp({
  tokenStore: null,
  urls: {
    default: {
      type: "hosted",
    }
  },
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/js package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local

# note: prefix the environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

# as above, prefix the project ID environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
# do NOT prefix the secret server key environment variable with NEXT_PUBLIC_ or VITE_ as it is server-only
HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Update callers with header & get user

You are now ready to use the Hexclave SDK. If you have any frontends calling your backend endpoints, you may want to pass along the Hexclave tokens in a header such that you can access the same user object on your backend.The most ergonomic way to do this is to pass the result of hexclaveClientApp.getAuthorizationHeader() as the Authorization header into your backend endpoints when the user is signed in:

// NOTE: This is your frontend's code
const authorizationHeader = await hexclaveClientApp.getAuthorizationHeader();
const response = await fetch("/my-backend-endpoint", {
  headers: {
    ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
  },
});
// ...

In most backend frameworks you can then access the user object by passing the request object as a tokenStore of the functions that access the user object:

// NOTE: This is your backend's code
const user = await hexclaveServerApp.getUser({ tokenStore: request });
return new Response("Hello, " + user.displayName, { headers: { "Cache-Control": "private, no-store" } });

This will work as long as request is an object that follows the shape { headers: Record<string, string | null> | { get: (name: string) => string | null } }.

Make sure that HTTP caching is disabled with Cache-Control: private, no-store for authenticated backend endpoints.

If you cannot use getAuthorizationHeader(), for example because you are using a protocol other than HTTP, you can use getAuthJson() instead:

// Frontend:
await rpcCall("my-rpc-endpoint", {
  data: {
    auth: await hexclaveClientApp.getAuthJson(),
  },
});

// Backend:
const user = await hexclaveServerApp.getUser({ tokenStore: data.auth });
return new RpcResponse("Hello, " + user.displayName);

5

Done!

Bun SDK Setup Instructions

Follow these instructions in order to set up and get started with the Hexclave SDK for Bun .Note: These instructions are for setting up the Hexclave SDK to build your own CLIs. If you’re looking to use the Hexclave CLI instead, see the CLI documentation.

1

Install dependencies

First, install the @hexclave/js npm package with your preferred package manager:

npm i @hexclave/js
# or: pnpm i @hexclave/js
# or: yarn add @hexclave/js
# or: bun add @hexclave/js

2

Initializing the Hexclave App

Next, let us create the Hexclave App object for your project. This is the most important object in a Hexclave project.In a backend where you can keep a secret key safe, you can use the HexclaveServerApp, which provides access to more sensitive APIs compared to HexclaveClientApp:

src/hexclave/server.ts

import { HexclaveServerApp } from "@hexclave/js";

export const hexclaveServerApp = new HexclaveServerApp({
  tokenStore: null,
  urls: {
    default: {
      type: "hosted",
    }
  },
});

3

Setting up the project

It’s now time to connect your code to a Hexclave project.You can either run Hexclave’s dev environment locally, or connect to a production project hosted in the cloud.

Option 1: Running Hexclave's dashboard locally (recommended for development)

First, create a hexclave.config.ts configuration file in the root directory of the workspace (or anywhere else):

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js";

// default: show-onboarding, which shows the onboarding flow for this project when Hexclave starts
export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/js package.To run your application with Hexclave, you can then start the dev environment and set environment variables expected by your application. Hexclave’s CLI has a dev command does both of these, so let’s install it as a dev dependency and wrap your existing dev script in your package.json:

npm i -D @hexclave/cli
# or: pnpm i -D @hexclave/cli
# or: yarn add -D @hexclave/cli
# or: bun add --dev @hexclave/cli

package.json

{
  // ...
  "scripts": {
    // ...
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

hexclave dev injects all necessary environment variables into the app process automatically, so the app is ready to use without any extra environment variable setup.

Option 2: Connecting to a production project hosted in the cloud

If you’re looking to run a production version of your application, or the local dashboard doesn’t work for you, you can also connect to Hexclave’s cloud directly.This process is slightly different depending on whether you’re setting up a frontend or a backend (whether your app can keep a secret key safe or not).

Frontend

Go to your project’s dashboard on app.hexclave.com and get the project ID. You can find it in the URL after the /projects/ part. Copy-paste it into your .env.local file (or wherever your environment variables are stored):

.env.local

# note: prefix the environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
HEXCLAVE_PROJECT_ID=<your-project-id>

Alternatively, you can also just set the project ID in the hexclave/client.ts file:

src/hexclave/client.ts

export const hexclaveClientApp = new HexclaveClientApp({
  // ...
  projectId: "your-project-id",
});

Backend (or both frontend and backend)

First, navigate to the Project Keys page in the Hexclave dashboard and generate a new set of keys.Then, copy-paste them into your .env.local file (or wherever your environment variables are stored):

.env.local

# as above, prefix the project ID environment variable with NEXT_PUBLIC_ or VITE_ if your framework requires you to do so
# do NOT prefix the secret server key environment variable with NEXT_PUBLIC_ or VITE_ as it is server-only
HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

They’ll automatically be picked up by the HexclaveServerApp constructor.

4

Update callers with header & get user

You are now ready to use the Hexclave SDK. If you have any frontends calling your backend endpoints, you may want to pass along the Hexclave tokens in a header such that you can access the same user object on your backend.The most ergonomic way to do this is to pass the result of hexclaveClientApp.getAuthorizationHeader() as the Authorization header into your backend endpoints when the user is signed in:

// NOTE: This is your frontend's code
const authorizationHeader = await hexclaveClientApp.getAuthorizationHeader();
const response = await fetch("/my-backend-endpoint", {
  headers: {
    ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
  },
});
// ...

In most backend frameworks you can then access the user object by passing the request object as a tokenStore of the functions that access the user object:

// NOTE: This is your backend's code
const user = await hexclaveServerApp.getUser({ tokenStore: request });
return new Response("Hello, " + user.displayName, { headers: { "Cache-Control": "private, no-store" } });

This will work as long as request is an object that follows the shape { headers: Record<string, string | null> | { get: (name: string) => string | null } }.

Make sure that HTTP caching is disabled with Cache-Control: private, no-store for authenticated backend endpoints.

If you cannot use getAuthorizationHeader(), for example because you are using a protocol other than HTTP, you can use getAuthJson() instead:

// Frontend:
await rpcCall("my-rpc-endpoint", {
  data: {
    auth: await hexclaveClientApp.getAuthJson(),
  },
});

// Backend:
const user = await hexclaveServerApp.getUser({ tokenStore: data.auth });
return new RpcResponse("Hello, " + user.displayName);

5

Done!

Python Backend Setup

Follow these instructions to authenticate requests to a Python backend with Hexclave.This setup is for Python backends that do not use the JavaScript SDK. The backend flow is: your frontend sends the user’s access token to your backend, and your backend verifies it before serving protected data.

1

Choose a project setup

You can use either a development environment with the local dashboard or a Hexclave Cloud project.

Option 1: Local dashboard (recommended)

If this project already has a hexclave.config.ts file for another frontend or backend, reuse that same file so the whole project shares one Hexclave config. Otherwise, create a new hexclave.config.ts file in your workspace:

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js";

export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/js package.Run your backend through the Hexclave CLI so it starts the local dashboard and injects the Hexclave environment variables:

package.json

{
  "scripts": {
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- <your-backend-dev-command>"
  }
}

Your backend should read HEXCLAVE_PROJECT_ID and HEXCLAVE_SECRET_SERVER_KEY from the environment.

Option 2: Hexclave Cloud project

Create or select a project on app.hexclave.com. Then copy the project ID and a secret server key into your backend environment:

.env

HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

The secret server key must only be available to your backend. Never expose it to browser code, mobile clients, logs, or public repositories.

2

Install backend dependencies

Install requests for REST API verification. If you want to use JWT verification, also install PyJWT[crypto].

pip install requests PyJWT[crypto]

3

Send the user's access token to your backend

From your frontend, get the current user’s access token and pass it to your backend endpoint.

// this is your frontend's code!
const { accessToken } = await user.getAuthJson();
const response = await fetch("<your-backend-endpoint>", {
  headers: {
    "x-stack-access-token": accessToken,
  },
});

4

Verify the token

Hexclave supports two backend verification approaches. JWT verification is faster and local to your backend. REST endpoint verification asks Hexclave to validate the token and return the current user object.

Verify with JWT

JWT verification validates the token locally in your backend. It does not require a request to Hexclave on every call, but it only gives you the information contained in the token, such as the user ID.

import os
import jwt
from jwt import PyJWKClient
from jwt.exceptions import InvalidTokenError

jwks_client = PyJWKClient(
    f"https://api.hexclave.com/api/v1/projects/{os.environ['HEXCLAVE_PROJECT_ID']}/.well-known/jwks.json"
)

def get_current_user_id_from_jwt(request):
    access_token = request.headers.get("x-stack-access-token")
    if not access_token:
        return None

    try:
        signing_key = jwks_client.get_signing_key_from_jwt(access_token)
        payload = jwt.decode(
            access_token,
            signing_key.key,
            algorithms=["ES256"],
            audience=os.environ["HEXCLAVE_PROJECT_ID"],
        )
        return payload["sub"]
    except InvalidTokenError:
        return None

Verify with the Hexclave REST endpoint

REST endpoint verification asks Hexclave to validate the token and returns the current user object. Use this when you want the complete, up-to-date user profile or do not want to implement JWT verification yourself.

import os
import requests

def get_current_hexclave_user(request):
    access_token = request.headers.get("x-stack-access-token")
    if not access_token:
        return None

    response = requests.get(
        "https://api.hexclave.com/api/v1/users/me",
        headers={
            "x-stack-access-type": "server",
            "x-stack-project-id": os.environ["HEXCLAVE_PROJECT_ID"],
            "x-stack-secret-server-key": os.environ["HEXCLAVE_SECRET_SERVER_KEY"],
            "x-stack-access-token": access_token,
        },
        timeout=10,
    )

    if response.status_code == 200:
        return response.json()

    return None

If the response is 200 OK, the user is authenticated. If the response is not 200 OK, treat the request as unauthenticated.

5

Protect authenticated endpoints

Wrap your protected endpoints with a helper that extracts x-stack-access-token, verifies it with either JWT verification or REST API verification, and returns 401 Unauthorized when verification fails.

Disable HTTP caching for authenticated responses with a header like Cache-Control: private, no-store.

6

Done!

Other Backend Setup (REST API)

Follow these instructions to authenticate requests from any backend language using Hexclave’s REST API.Use this option when your backend is not JavaScript/TypeScript or Python, or when you want to call Hexclave over plain HTTP. The backend flow is: your frontend sends the user’s access token to your backend, and your backend verifies it before serving protected data.

1

Choose a project setup

You can use either a development environment with the local dashboard or a Hexclave Cloud project.

Option 1: Local dashboard (recommended)

If this project already has a hexclave.config.ts file for another frontend or backend, reuse that same file so the whole project shares one Hexclave config. Otherwise, create a new hexclave.config.ts file in your workspace:

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js";

export const config: HexclaveConfig = "show-onboarding";

If you later switch to a config object and want type-checking, wrap it with defineHexclaveConfig, imported from the same @hexclave/js package.Run your backend through the Hexclave CLI so it starts the local dashboard and injects the Hexclave environment variables:

package.json

{
  "scripts": {
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- <your-backend-dev-command>"
  }
}

Your backend should read HEXCLAVE_PROJECT_ID and HEXCLAVE_SECRET_SERVER_KEY from the environment.

Option 2: Hexclave Cloud project

Create or select a project on app.hexclave.com. Then copy the project ID and a secret server key into your backend environment:

.env

HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

The secret server key must only be available to your backend. Never expose it to browser code, mobile clients, logs, or public repositories.

2

Send the user's access token to your backend

From your frontend, get the current user’s access token and pass it to your backend endpoint.

// this is your frontend's code!
const { accessToken } = await user.getAuthJson();
const response = await fetch("<your-backend-endpoint>", {
  headers: {
    "x-stack-access-token": accessToken,
  },
});

3

Verify the token

Hexclave supports two backend verification approaches. JWT verification is faster and local to your backend. REST endpoint verification asks Hexclave to validate the token and return the current user object.

Verify with JWT

JWT verification validates the token locally in your backend. It does not require a request to Hexclave on every call, but it only gives you the information contained in the token, such as the user ID.

Read the access token from the `x-stack-access-token` header.
Fetch the JWKS from:
   https://api.hexclave.com/api/v1/projects/<your-project-id>/.well-known/jwks.json
Verify the JWT signature with an ES256-capable JWT library.
Verify the token audience is your Hexclave project ID.
Use the `sub` claim as the authenticated user ID.
Reject the request if any verification step fails.

Verify with the Hexclave REST endpoint

REST endpoint verification asks Hexclave to validate the token and returns the current user object. Use this when you want the complete, up-to-date user profile or do not want to implement JWT verification yourself.

curl https://api.hexclave.com/api/v1/users/me \
  -H "x-stack-access-type: server" \
  -H "x-stack-project-id: $HEXCLAVE_PROJECT_ID" \
  -H "x-stack-secret-server-key: $HEXCLAVE_SECRET_SERVER_KEY" \
  -H "x-stack-access-token: <access-token-from-request>"

If the response is 200 OK, the user is authenticated. If the response is not 200 OK, treat the request as unauthenticated.

4

Protect authenticated endpoints

Wrap your protected endpoints with a helper that extracts x-stack-access-token, verifies it with either JWT verification or REST API verification, and returns 401 Unauthorized when verification fails.

Disable HTTP caching for authenticated responses with a header like Cache-Control: private, no-store.

5

Done!

Convex Setup

Follow these instructions to integrate Hexclave with Convex.

1

Create or identify the Convex app

If the project does not already use Convex, initialize a Convex + Next.js app:

npm create convex@latest

When prompted, choose Next.js and No auth. Hexclave will provide auth.During development, run the Convex backend and the app dev server:

npx convex dev
npm run dev

2

Install and configure Hexclave

Install Hexclave in the app. If you have not already completed the SDK setup steps above, follow the instructions in the Getting Started Guide.

3

Configure Convex auth providers

Create or update convex/auth.config.ts:

convex/auth.config.ts

import { getConvexProvidersConfig } from "@hexclave/js";
// or: import { getConvexProvidersConfig } from "@hexclave/react";
// or: import { getConvexProvidersConfig } from "@hexclave/next";

export default {
  providers: getConvexProvidersConfig({
    projectId: process.env.HEXCLAVE_PROJECT_ID, // or process.env.NEXT_PUBLIC_HEXCLAVE_PROJECT_ID
  }),
};

4

Connect Convex clients to Hexclave

Update the Convex client setup so Convex receives Hexclave tokens.In browser JavaScript:

convexClient.setAuth(hexclaveClientApp.getConvexClientAuth({}));

In React:

convexReactClient.setAuth(hexclaveClientApp.getConvexClientAuth({}));

For Convex HTTP clients on the server, pass a request-like token store:

convexHttpClient.setAuth(hexclaveClientApp.getConvexHttpClientAuth({ tokenStore: requestObject }));

5

Use Hexclave user data in Convex functions

In Convex queries and mutations, use Hexclave’s Convex integration to read the current user.

convex/myFunctions.ts

import { query } from "./_generated/server";
import { hexclaveServerApp } from "../src/hexclave/server";

export const myQuery = query({
  handler: async (ctx, args) => {
    const user = await hexclaveServerApp.getPartialUser({ from: "convex", ctx });
    return user;
  },
});

6

Done!

Supabase Setup

This setup covers Supabase Row Level Security (RLS) with Hexclave JWTs. It does not sync user data between Supabase and Hexclave. Use Hexclave webhooks if you need data sync.

1

Create Supabase RLS policies

In the Supabase SQL editor, enable Row Level Security for your tables and write policies based on Supabase JWT claims.For example, this sample table demonstrates public rows, authenticated rows, and user-owned rows:

CREATE TABLE data (
  id bigint PRIMARY KEY,
  text text NOT NULL,
  user_id UUID
);

INSERT INTO data (id, text, user_id) VALUES
  (1, 'Everyone can see this', NULL),
  (2, 'Only authenticated users can see this', NULL),
  (3, 'Only user with specific id can see this', NULL);

ALTER TABLE data ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Public read" ON "public"."data" TO public
USING (id = 1);

CREATE POLICY "Authenticated access" ON "public"."data" TO authenticated
USING (id = 2);

CREATE POLICY "User access" ON "public"."data" TO authenticated
USING (id = 3 AND auth.uid() = user_id);

2

Install Hexclave and Supabase dependencies

First, follow the instructions on how to get started with Hexclave for your framework in the Getting Started Guide.

3

Mint Supabase JWTs from Hexclave users

Create a server action that signs a Supabase JWT using the current Hexclave user ID:

utils/actions.ts

'use server';

import { hexclaveServerApp } from "@/hexclave/server";
import * as jose from "jose";

export const getSupabaseJwt = async () => {
  const user = await hexclaveServerApp.getUser();

  if (!user) {
    return null;
  }

  const token = await new jose.SignJWT({
    sub: user.id,
    role: "authenticated",
  })
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime("1h")
    .sign(new TextEncoder().encode(process.env.SUPABASE_JWT_SECRET));

  return token;
};

4

Create a Supabase client that uses the Hexclave JWT

Create a helper that passes the server-generated JWT to Supabase:

utils/supabase-client.ts

import { createBrowserClient } from "@supabase/ssr";
import { getSupabaseJwt } from "./actions";

export const createSupabaseClient = () => {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    { accessToken: async () => await getSupabaseJwt() || "" },
  );
};

5

Fetch Supabase data

Use the Supabase client from your UI. The RLS policies will decide which rows the user can read based on the Hexclave user ID embedded in the Supabase JWT.

app/page.tsx

'use client';

import { createSupabaseClient } from "@/utils/supabase-client";
import { useHexclaveApp, useUser } from "@hexclave/next";
import { useEffect, useState } from "react";

export default function Page() {
  const app = useHexclaveApp();
  const user = useUser();
  const supabase = createSupabaseClient();
  const [data, setData] = useState<null | any[]>(null);

  useEffect(() => {
    supabase.from("data").select().then(({ data }) => setData(data ?? []));
  }, []);

  const listContent = data === null
    ? <p>Loading...</p>
    : data.length === 0
      ? <p>No notes found</p>
      : data.map((note) => <li key={note.id}>{note.text}</li>);

  return (
    <div>
      {user ? (
        <>
          <p>You are signed in</p>
          <p>User ID: {user.id}</p>
          <button onClick={async () => await app.redirectToSignOut()}>Sign Out</button>
        </>
      ) : (
        <button onClick={async () => await app.redirectToSignIn()}>Sign In</button>
      )}
      <h3>Supabase data</h3>
      <ul>{listContent}</ul>
    </div>
  );
}

6

Done!

CLI Setup

Follow these instructions to authenticate users in a command line application with Hexclave.

1

Add the CLI auth template

Download the Hexclave CLI authentication template and place it in your project. For Python apps, copy it as hexclave_cli_template.py.Example project layout:

my-python-app/
├─ main.py
└─ hexclave_cli_template.py

2

Prompt the user to log in

Import and call prompt_cli_login. It opens the browser, lets the user authenticate, and returns a refresh token. The project ID is enough for most projects; only pass publishable_client_key if the project has requirePublishableClientKey enabled.

main.py

from hexclave_cli_template import prompt_cli_login

refresh_token = prompt_cli_login(
  app_url="https://your-app-url.example.com",
  project_id="your-project-id-here",
)

if refresh_token is None:
  print("User cancelled the login process. Exiting")
  exit(1)

You can store the refresh token in a local file or keychain and only prompt the user again when no saved refresh token exists.

3

Exchange the refresh token for an access token

Use the refresh token with Hexclave’s REST API to get an access token.

def get_access_token(refresh_token):
  access_token_response = hexclave_request(
    "post",
    "/api/v1/auth/sessions/current/refresh",
    headers={
      "x-hexclave-refresh-token": refresh_token,
    },
  )

  return access_token_response["access_token"]

4

Fetch the current user

Use the access token to call the Hexclave REST API as the logged-in user.

def get_user_object(access_token):
  return hexclave_request(
    "get",
    "/api/v1/users/me",
    headers={
      "x-hexclave-access-token": access_token,
    },
  )

user = get_user_object(get_access_token(refresh_token))
print("The user is logged in as", user["display_name"] or user["primary_email"])

5

​Choose your tech stack

​Frontend

​Backend

​Database

​Other

​Next.js SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Creating a <HexclaveProvider /> and <HexclaveTheme />

Add Suspense boundary

Done!

​React SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Creating a <HexclaveProvider /> and <HexclaveTheme />

Add Suspense boundary

Done!

​Other JS/TS SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

​Browser <script> tag (no bundler)

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Backend: Update callers with header & get user

Done!

​Tanstack Start SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Creating a <HexclaveProvider /> and <HexclaveTheme />

Add Suspense boundary

Done!

​Node.js SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Update callers with header & get user

Done!

​Bun SDK Setup Instructions

Install dependencies

Initializing the Hexclave App

Setting up the project

​Frontend

​Backend (or both frontend and backend)

Update callers with header & get user

Done!

​Python Backend Setup

Choose a project setup

Install backend dependencies

Send the user's access token to your backend

Verify the token

Protect authenticated endpoints

Done!

​Other Backend Setup (REST API)

Choose a project setup

Send the user's access token to your backend

Verify the token

Protect authenticated endpoints

Done!

​Convex Setup

Create or identify the Convex app

Install and configure Hexclave

Configure Convex auth providers

Connect Convex clients to Hexclave

Use Hexclave user data in Convex functions

Done!

​Supabase Setup

Create Supabase RLS policies

Install Hexclave and Supabase dependencies

Choose your tech stack

Frontend

Backend

Database

Other

Next.js SDK Setup Instructions

Frontend

Backend (or both frontend and backend)

React SDK Setup Instructions

Frontend

Backend (or both frontend and backend)

Other JS/TS SDK Setup Instructions

Browser `<script>` tag (no bundler)

Frontend

Backend (or both frontend and backend)

Tanstack Start SDK Setup Instructions

Frontend

Backend (or both frontend and backend)

Node.js SDK Setup Instructions

Frontend

Backend (or both frontend and backend)

Bun SDK Setup Instructions

Frontend

Backend (or both frontend and backend)

Python Backend Setup

Other Backend Setup (REST API)

Convex Setup

Supabase Setup

CLI Setup