Session Setup

Asset Studio uses a session-based licensing system. Before the editor renders, it contacts the session API to validate your license.

How Sessions Work

1. When <SessionProvider> mounts, it always calls your onCreateSession function to obtain a token.
2. Once the token is received, the provider automatically calls https://api.assetstud.io/sessions/check to validate it. No configuration needed for this step.
3. If the session is valid, the editor renders normally.

Creating a Session

The onCreateSession prop is a function that receives a userGuid and must return a SessionResponse. SessionProvider calls it automatically when a new session needs to be created.

Keep your API key private

Never call the Asset Studio API directly from your frontend — your API key would be exposed to the browser. Instead, create a small backend middleware that holds the key and proxies the request.

Backend Middleware

Set up a simple server endpoint that holds your API key securely:

import express from "express";
import cors from "cors";
import dotenv from "dotenv";

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

const CREATE_SESSION_URL = process.env.CREATE_SESSION_URL;
const API_KEY = process.env.API_KEY;

app.post("/createSession", async (req, res) => {
  const { user_guid } = req.body;

  if (!user_guid) {
    return res.status(400).json({ error: "user_guid is required" });
  }

  const response = await fetch(CREATE_SESSION_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": API_KEY,
    },
    body: JSON.stringify({ user_guid }),
  });

  const data = await response.json();
  return res.status(response.status).json(data);
});

app.listen(5050, () => {
  console.log("Server running on http://localhost:5050");
});

Add your credentials to the server's .env file:

CREATE_SESSION_URL=https://api.assetstud.io/sessions/create
API_KEY=your_api_key_here

Frontend Usage

Point onCreateSession at your middleware endpoint:

import {
  StudioProvider,
  SessionProvider,
  SessionResponse,
} from "@asset-studio/core";

async function createSession(userGuid: string): Promise<SessionResponse> {
  const response = await fetch("https://your-server.com/createSession", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ user_guid: userGuid }),
  });
  return response.json();
}

export default function App() {
  return (
    <SessionProvider onCreateSession={createSession}>
      <StudioProvider>{/* your editor */}</StudioProvider>
    </SessionProvider>
  );
}

Checking Session Status

You can read the current session status inside the provider using the useSession hook:

import { useSession } from "@asset-studio/core";

function SessionGuard({ children }) {
  const { sessionStatus } = useSession();

  if (sessionStatus === "loading") return <div>Validating license...</div>;
  if (sessionStatus === "expired" || sessionStatus === "error")
    return <div>Invalid or expired session.</div>;

  return <>{children}</>;
}