Overview

​

Overview

• Organizations: The top-level container for everything. Think of it as your customer’s entire account (e.g., Meta). It holds all their users, groups, and collaborative data.
• Folders: A way to group and organize documents, just like in a file system. Folders can contain other folders and documents, inheriting permissions.
• Documents: The primary collaborative space. This is where features like comments, presence, and cursors come alive. A document could be a design file, a dashboard, a spreadsheet, or a specific page in your app.
• Locations: An optional, granular subspace within a document. If a document is a slide deck, a location is a single slide. If a document is a video, a location could be a specific timestamp.
• Users: Your end users who use your app.
• Access Control: The rules that control who can access what Velt feature data.
• Authentication: The process of authenticating a user in Velt.

​

Organizations

​

Overview

• It contains folders, documents, locations and users.
• Think of an organization as the account belonging to a company (e.g., Company A). This account may have several users (Company A employees). A document will be any file created within the organization (e.g., document, spreadsheet, slides, etc.). A location will be any child section within the document (e.g., slide within a presentation).

​

Properties

• By default, Users within the organization can access all of it’s resources like folder, documents, contact list etc. This can be modified using access control settings.
• A user can be added to multiple organizations but can only log in to one organization at a time.
• Access to resources can be restricted by setting controls at the individual resource level.

​

APIs

​

Frontend APIs

​

Sign in User into an Organization

• Sign in the user into an organization using these options.
• User needs to sign in to an organization in order to perform CRUD operations on it.

​

Backend APIs

​

Create Organization

• When the user signs into an organization it will be created automatically if it doesn’t exist.
• Explicitly create an organization using the REST API. Learn more

​

Update Organization

• Update organization using the REST API. Learn more

​

Delete Organization

• Delete organization using the REST API. Learn more
• It will delete all the data (folders, documents, locations and users) within the organization.

​

Get Organization

• Get organization and it’s metadata using the REST API. Learn more

​

Disable Organization

• Disable CRUD access to an organization using the REST API. Learn more

​

Provision Access to an Organization

• Provision access to an organization using access control APIs

​

Folders

​

Overview

​

Properties

• Folders can contain both documents and subfolders.
• Folders use the same permission model as Organizations and Documents.
• By default, folders inherits the permission from it’s organization.
• A user can be added to multiple Folders but can only initialize one Folder at a time.
• By default, all Folder users have access to all Folder resources including sub folders, documents, locations and user contacts.
• Access to individual resources within the Folder cannot be restricted by setting controls at the individual resource level.
• Access of the Folder cascades to all resources within the Folder.

​

APIs

​

Frontend APIs

​

Subscribe to a folder

• Subscribe to a folder and its documents using the setDocuments method.
• Subscribe to all documents in the folder or a specific set of documents. If you want to subscribe to specific documents in the folder then you can pass upto 30 documents at a time.

const { setDocuments } = useSetDocuments();

{/* Subscribe to a folder and all its documents */}
const rootDocument = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  }
];

setDocuments(
  rootDocument,
  {
    folderId: 'folder1',
    allDocuments: true
  }
);


{/* Subscribe to a folder and some documents */}
const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];

setDocuments(
  documents,
  {
    folderId: 'folder1',
  }
);

{/* Subscribe to a folder and all its documents */}
await client.setDocuments(
  rootDocument,
  {
    folderId: 'folder1',
    allDocuments: true
  }
);

{/* Subscribe to a folder and some documents */}
await client.setDocuments(
  documents,
  {
    folderId: 'folder1',
  }
);

​

Fetch folder metadata

• Retrieve folder metadata and its subfolders using either organizationId or folderId, with support for pagination.

// Get all folders for a specific organization
const folderMetadata = await client.fetchFolders({
  organizationId: 'org1'
});

// Get a specific folder's metadata with its immediate subfolders
const folderMetadata = await client.fetchFolders({
  organizationId: 'org1',
  folderId: 'folder1'
});

console.log(folderMetadata); // { data: { folder1: { ... } }, nextPageToken: '...' }

​

Backend APIs

​

Create Folder

• Create a folder using the REST API. Learn more

​

Update Folder

• Update folder using the REST API. Learn more

​

Move Documents to Folder

• Move documents to a folder using the REST API. Learn more

​

Delete Folder

• Delete folder using the REST API. Learn more
• It will delete all the data (subfolders, documents, locations and users) within the folder.

​

Get Folder

• Get folder and it’s metadata using the REST API. Learn more

​

Update Folder Access Type

• Update the access type of a folder using the REST API. Learn more

​

Provision Access to a Folder

​

Documents

​

Overview

• Feature data (such as Comments, Presence, Cursors, etc.)
• Locations
• Users (distinct from Organization users; see Access Control for details)

​

Properties

• Anyone connected to the same documentId can see and interact with each other’s activity, like presence, cursors, comments etc.
• Users can subscribe to a single document or multiple documents at the same time.
• Document inherits the permission from it’s organization and parent folder.
• A user can be added to multiple Documents.
• You can set Document level access control to override the Organization’s access control it inherited but not the Folder’s access control.

​

APIs

​

Frontend APIs

​

Subscribe to Documents

• Use this to set and subscribe to one or multiple documents at the same time.
• You can specify 30 documents at a time.
• The first document in the list will be considered as the root document.
• For features like comments, notifications, recorder, reactions etc. you will be able to read and write to multiple documents at the same time.
• For features like cursors, presence, huddle, live state sync etc. it will default to the root document.
• Sidebar will automatically show data from all the documents.

• documents: Document[]
• options?: SetDocumentsRequestOptions

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
const { setDocuments } = useSetDocuments();
setDocuments(documents);

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
await client.setDocuments(documents);

Read/Write data from multiple documents on the same page

• If you want to display data (eg: comments) from multiple documents on the same page, add data-velt-document-id attribute to the container that contains the document.
• It will be used to identify which part of the DOM belongs to which document.

<div class="document-container" data-velt-document-id="document-1">
  ...
</div>

<div class="document-container" data-velt-document-id="document-2">
  ...
</div>

<div class="document-container" data-velt-document-id="document-3">
  ...
</div>

​

Subscribe to Documents from Other Organizations

• By default, users can only access documents within their own organization.
• Enable cross-organization access by passing the target organizationId in the options parameter to setDocument/setDocuments (see Hook & API Example below).
• Ensure that the user has access to the target document in the target organization.

{/* Single Document */}
useSetDocument("DOCUMENT_ID", {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

{/* Multiple Documents */}
const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
useSetDocuments(documents, {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

{/* Single Document */}
await client.setDocument("DOCUMENT_ID", {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

{/* Multiple Documents */}
const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
await client.setDocuments(documents, {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

​

Set Root Document

• Set the root document.
• This is useful when you have multiple documents subscribed in your app and you want change the root document during the session.

await client.setRootDocument({id:'DOCUMENT_ID'})

​

Unsubscribe from Documents

• Use this to unsubscribe from all documents at once.

useUnsetDocuments();

await client.unsetDocuments();

​

Get Document Metadata

• Use this to get the metadata of a Document.
• This is useful when you want to display the document name in your app or any custom metadata that you have set.
• This returns a subscription with DocumentMetadata object.

client.getDocumentMetadata().subscribe((documentMetadata) => {
  console.log("Current document metadata: ", documentMetadata);
});

​

Fetch Documents

• Fetch documents by organization, folder, or specific document IDs.
• Use allDocuments: true to fetch all documents for an organization or a specific folder.
• Supports pagination via nextPageToken in the response.
• When specifying individual documentIds, you can pass up to 30 IDs at a time.

• request: FetchDocumentsRequest
• Returns: FetchDocumentsResponse

// Gets all documents for given org id
await client.fetchDocuments({ organizationId: 'org1', allDocuments: true });

// Gets all documents for the given folderId
await client.fetchDocuments({ organizationId: 'org1', folderId: 'folder1', allDocuments: true });

// Gets specified documents
await client.fetchDocuments({ organizationId: 'org1', documentIds: ['doc1', 'doc2'] });

​

Backend APIs

​

Create Document

• Create a document using the REST API. Learn more

​

Update Document

• Update document using the REST API. Learn more

​

Delete Document

• Delete document using the REST API. Learn more
• It will delete all the data (locations and users) within the document.

​

Get Document

• Get document and it’s metadata using the REST API. Learn more

​

Update Document Access Type

• Update the access type of a document using the REST API. Learn more

​

Provision Access to a Document

​

Disable Document

• Disable CRUD access to a document using the REST API. Learn more

​

Legacy APIs

Subscribe to a Single Document

• Use this to initialize and subscribe to a single Document.
• Once you set the document, you will start receiving realtime updates from the document.
• Params:
  • documentId: The unique identifier for the document.
  • metadata: (optional) This is a key/value pair object where you can set metadata about the document such as documentName. documentName is a special field that we use to display the document name in some Velt Components.

useSetDocument('unique-document-id', {documentName: 'Document Name'});

await client.setDocument('unique-document-id', {documentName: 'Document Name'});

Unsubscribe from a Single Document

• Use this to unsubscribe from the root Document
• Once you unset the document, you will no longer receive realtime updates from the document.
• For some parts of your app, you may not need Velt. In such cases, you can unset the document.

useUnsetDocumentId();

await client.unsetDocumentId();

​

Locations

​

Overview

• Pages
• Sections
• Video frames
• Data points on maps/charts
• Any other contextual area

• In a slide presentation, the entire slide presentation will be a document each individual slide will be a location.
• In a dashboard, the entire dashboard is a document but various filters applied will be locations;
• In a video player, the entire video will be the document and timestamps will be locations.

​

Properties

• Any user with access to the document will have access to all locations in the document.
• Access controls cannot be set at the location level.
• Locations automatically generate location groups in the sidebar and organizes the comments within the group.
• The location object has these fields:
  • id (required): A unique identifier for the location that can be used to reference it later
  • locationName (recommended): A human-readable name displayed in Velt components like the VeltCommentsSideBar
  • You can add any number of custom fields to the location object.

​

APIs

​

Frontend APIs

​

Subscribe to Locations

• Use this to set and subscribe to one or multiple locations at the same time.
• The first location in the list will be considered as the root location.
• Features will by default add data to the root location unless you use the location boundaries.
• Sidebar will automatically show data from all the documents.

• locations: Location[]
• options?: SetLocationsRequestOptions
  • rootLocationId: The id of the location that will be set as the root location. If you don’t specify this, the first location will be set as the root location.
  • appendLocation: If you want to append new locations to the existing locations, set this to true.

const locations = [
  {id:'location1', locationName:'Location 1'},
  {id:'location2', locationName:'Location 2'}
];
const { setLocations } = useSetLocations();
setLocations(locations);

  await client.setLocations([
    {id:'location1', locationName:'Location 1'},
    {id:'location2', locationName:'Location 2'}
  ], {rootLocationId: 'location2'}); // By default 1st location will be set as root location unless rootLocationId is specified.

  // Append new locations
  await client.setLocations([
    {id:'location3', locationName:'Location 3'},
    {id:'location4', locationName:'Location 4'}
  ], {appendLocation: true})

Read/Write data from multiple locations on the same page using Location Boundaries

• If you want to display data (eg: comments) from multiple locations on the same page, add data-velt-location-id attribute to the container that contains the location.
• It will be used to identify which part of the DOM belongs to which location.
• This ensures that the comment added within the location is associated with the correct location.

<div class="location-container" data-velt-location-id="location-1">
  ...
</div>

<div class="location-container" data-velt-location-id="location-2">
  ...
</div>

<div class="location-container" data-velt-location-id="location-3">
  ...
</div>

​

Set Root Location

• Set the root location.
• This is useful when you have multiple locations subscribed in your app and you want change the root location during the session.

await client.setRootLocation({id:'LOCATION_ID'})

​

Unsubscribe from Locations

• Unset locations by ids or all of them if you don’t specify any parameters.

// remove specific locations
await client.unsetLocationsIds(['location1', 'location2', 'location3'])

// remove all locations
await client.unsetLocationsIds()

​

Legacy APIs

Subscribe to a Single Location

• Use this to initialize and subscribe to a single Location.

useSetLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'videoFrame': '120'
})

client.setLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'videoFrame': '120'
})

Subscribe to Multiple Locations

• Use this to subscribe to multiple locations at the same time.
• Add additional locations on the page by using set location with the true parameter.

useSetLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
})

useSetLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
}, true)

client.setLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
});

client.setLocation({
  'id': 'locationId2',
  'locationName': 'MainVideoPlayer2',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
}, true);

​

Users

​

Overview

• A User is anyone authenticated with the Velt SDK.
• After authentication, a user’s profile appears in Velt’s collaboration features. For example, their name is shown next to their comments, in @mentions, and alongside their avatar in presence and cursor features.

​

Contact List

• Organization.
• Folder.
• Document.
• User Groups.
• @here: This is a special group that includes only the users explicitly added on the document. This doesn’t include organization users or organization user groups.

​

User Groups

• Mention an entire group (e.g., @engineering) instead of individual users, similar to Slack.
• Organization users can be in multiple groups.
• Only organization users can join user groups.

​

Properties

• Uniqueness of the user is determined by its userId.
• A user can be part of multiple organizations.

​

APIs

​

Frontend APIs

​

Authenticate a User

1. Using an Auth Provider (recommended)
2. Using Identify method

1. Use Auth Provider

• With this approach, you configure an authentication provider by specifying the user you want to authenticate and a function that returns a Velt JWT token.
• This function is automatically called by Velt whenever a token is required—such as during the initial sign-in or when the token expires.
• You should define this authentication provider within the Velt Provider during your app’s initialization.
• Use this to generate a Velt JWT token.
• Params:
  • user: User
  • retryConfig: AuthRetryConfig
  • generateToken: () => Promise<string>

<VeltProvider authProvider={{
  user,
  retryConfig: { retryCount: 3, retryDelay: 1000 },
  generateToken: async () => {
    // See generateVeltAuthToken() tab for example implementation
    const token = await generateVeltAuthToken();
    return token;
  }
}} />

2. Use Identify with JWT Token

• In this approach, you will call the identify method with the user object and a JWT token.
• Here you are responsible for re-generating a JWT token whenever it expires.
• This gives you more flexibility on when and where to initialize the user and generate the token.
• Params:
  • user: User
  • options: Options
    • authToken: string
    • forceReset: boolean

  const user = {
    userId: uid,
    organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
    name: displayName,
    email: email,
    photoUrl: photoURL,
    color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
    textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
  };

  useIdentify(user, {
    authToken: authToken, // this is optional but highly recommended.
  });

await client.identify(user, {
    authToken: authToken, // this is optional but highly recommended.
});

Sign in with force reset

• By default, when you identify a user, their authentication state is preserved in the browser until you explicitly sign them out.
• If you update a user’s metadata or default access settings in the console and want those changes to take effect right away, you should call the identify method again with the forceReset option set to true.
• Default: false

await client.identify(user, {
  forceReset: true
});

​

Sign out a User

client.signOutUser();

​

Contact List:

• Add/Update Users
• Search Users

​

Backend APIs

​

Contact List:

• Add Users
• Delete Users

​

User Groups:

• Add User Groups
• Add Users to User Groups
• Delete Users from User Groups

​

Access Control

​

Overview

1. Resources - The hierarchical structure of your app (Organizations → Folders → Documents)
2. Access Types - This is applied to a resource to determine who can access it (public, organizationPrivate, or restricted)
3. Roles - This is applied to a user to determine what they can do on a resource (editor or viewer)
4. Permissions – Define whether a user can access a resource, based on the resource’s access type, the user’s role, and explicit permission grants. Access can be temporary or permanent.

​

Access Control Model

• Inheritance (default): Similar to Google Drive, Velt Resources (Organizations, Folders, and Documents) follow a hierarchical permission model. By default, child resources inherit access control settings from their parents.
• Overrides: If a resource defines its own access type or user permissions, those explicit settings override the inherited values. This precedence applies during both permission evaluation and access enforcement.

• You create a folder and set it to “Anyone with the link can view”
• Any document you add to that folder automatically inherits those same sharing settings
• If you want, you can override a specific document’s sharing settings to be more restrictive or more open

• All Folders in that org automatically inherit organizationPrivate access
• All Documents in those folders also inherit organizationPrivate access
• If you explicitly set a specific Document to restricted access, that override takes precedence

​

1. Resources

• Organization – top-level container that groups users, folders, and documents.
• Folder – groups documents under an organization.
• Document – individual collaborative unit (e.g., a canvas, page, or file).

​

2. Access Types

• public (default): Any authenticated user in your app who initializes Velt can access the resource’s collaboration layer.
• organizationPrivate: Only users in the same organization as the resource can access it.
• restricted: Only explicitly permitted users can access the resource.

​

APIs (backend)

• Folder: Use Update Folder Access Type.
• Document: Use Update Document Access Type.
• Defaults: Update default access across your app.

​

3. Roles

• Editor: Read and write access to collaboration features data for the given resource. This is the default role.
• Viewer: Read-only access to collaboration features data for the given resource.

​

APIs

• Add users
• Remove users
• Generate token (to be used during login)
• Add permissions
• Remove permissions

​

4. Permissions

​

a. On-Demand Permissions

• Best when your app has a very complex and granular permissioning system and you want to keep your system as the source of truth.
• Supports temporary (time-bound) access and permanent access, enabling ad‑hoc sharing and expiring invites.

Temporary vs. Permanent Access

• Temporary access: Grant permissions with an expiry or revoke after session/end of task (e.g., guest reviewers, contractors). Use this when access should automatically end or be short‑lived.
• Permanent access: Grant durable permissions for members or long‑term collaborators. Use this when roles rarely change and should persist across sessions.

APIs

• Add Permissions
  • When user logs in: Use an auth provider with JWT. In the frontend, set the auth provider to fetch a JWT from your backend (Generate token).
  • When user switches resources: Call Add Permissions API to grant or adjust access for the newly active resource(s) (folders/documents).
• Remove Permissions
  • Revoke access when the user signs out, loses membership, or navigates away from sensitive resources using Remove Permissions API.
• Get Permissions
  • Backend API: Used to query a user’s effective permissions/roles for the given resources. This returns what permissions your user has according to Velt.
  • Frontend API: Use getUserPermissions to return the current logged-in user’s permissions on the currently set resources in Velt (e.g., organization, folder, documents).
• Params:
  • request?: GetUserPermissionsRequest
  • Returns: GetUserPermissionsResponse

// Build the request (all fields optional)
const request = {
  organizationId: 'org_123',
  folderIds: ['folder_1', 'folder_2'],
  documentIds: ['doc_1', 'doc_2']
};

// Fetch effective permissions for the current user
const permissions = await client.getUserPermissions(request);

console.log(permissions)

// Example Output:
// {
//   "user_123": {
//     "organization": {
//       "org_123": { "accessRole": "editor", "expiresAt": 1735689600 }
//     },
//     "folders": {
//       "folder_1": { "accessRole": "viewer" },
//       "folder_2": { "errorCode": "permission_denied", "error": "User does not have access to Folder." }
//     },
//     "documents": {
//       "doc_1": { "accessRole": "editor" },
//       "doc_2": { "errorCode": "does_not_exist", "error": "Document does not exist." }
//     }
//   }
// }

​

b. Synced Permissions

• Periodically or event‑driven sync between your app and Velt.
• Do an initial bulk load, then keep up with adds/removes/role changes.

APIs (backend)

• Add users
  • Initial sync: Bulk add existing users so they appear in mentions and can be permissioned.
  • Ongoing sync: When a user is added or granted permissions to additional resources in your app, call this API to sync that change in Velt.
• Remove users
  • Ongoing sync: When a user is removed or their permissions are revoked to resources in your app, call this API to sync that change in Velt.
• Get Permissions
  • Backend API: Used to query a user’s effective permissions/roles for the given resources. This returns what permissions your user has according to Velt.
  • Frontend API: Use getUserPermissions to return the current logged-in user’s permissions on the currently set resources in Velt (e.g., organization, folder, documents).
• Params:
  • request?: GetUserPermissionsRequest
  • Returns: GetUserPermissionsResponse

// Build the request (all fields optional)
const request = {
  organizationId: 'org_123',
  folderIds: ['folder_1', 'folder_2'],
  documentIds: ['doc_1', 'doc_2']
};

// Fetch effective permissions for the current user
const permissions = await client.getUserPermissions(request);

console.log(permissions)

// Example Output:
// {
//   "user_123": {
//     "organization": {
//       "org_123": { "accessRole": "editor", "expiresAt": 1735689600 }
//     },
//     "folders": {
//       "folder_1": { "accessRole": "viewer" },
//       "folder_2": { "errorCode": "permission_denied", "error": "User does not have access to Folder." }
//     },
//     "documents": {
//       "doc_1": { "accessRole": "editor" },
//       "doc_2": { "errorCode": "does_not_exist", "error": "Document does not exist." }
//     }
//   }
// }

​

c. Real-time Permission Provider

How it works

1. You define a permission provider in your frontend that calls an endpoint in your backend.
2. When a user logs in with an organization ID or accesses a folder or document, Velt calls your permission provider with the requested resource details.
3. Your endpoint determines whether the user should be allowed access and generates a signed response using Velt’s Generate Signature API.
4. Velt validates the signature in the backend and updates the user’s access accordingly.

When to use

• Your app has complex, dynamic permissions that change frequently
• You want to avoid syncing permission data to an external system
• You need real-time permission validation without backend synchronization overhead

Implementation

• onResourceAccessRequired:
  • Params: PermissionQuery[]
  • Returns: Promise<ResolverResponse<PermissionResult[]>>. In the response, we expect statusCode to be 200 and success to be true as shown in the example response below otherwise we will retry the request.
• retryConfig: AuthRetryConfig - Configuration for retry behavior on failures
• forceRefresh: boolean - Set to true if access control changes frequently. This forces re-validation on each access check in the current session only. Default: false

<VeltProvider 
  apiKey="YOUR_API_KEY"
  permissionProvider={{
    onResourceAccessRequired: async (requests) => {
      // Example requests array received from Velt:
      // [
      //   {
      //     userId: "user_123",
      //     resource: { type: "document", id: "doc_456" }
      //   },
      //   {
      //     userId: "user_123",
      //     resource: { type: "folder", id: "folder_789" }
      //   }
      // ]
      
      // Call your backend endpoint
      const response = await fetch('/api/check-permissions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ requests })
      });
      
      const result = await response.json();
      
      // Return format expected by Velt
      return {
        data: result.permissions,
        success: result.success,
        statusCode: result.statusCode,
        signature: result.signature
      };
      
      // Example response:
      // {
      //   data: [
      //     {
      //       userId: "user_123",
      //       resourceId: "doc_456",
      //       type: "document",
      //       hasAccess: true,
      //       accessRole: "editor",
      //       expiresAt: 1735689600
      //     },
      //     {
      //       userId: "user_123",
      //       resourceId: "folder_789",
      //       type: "folder",
      //       hasAccess: true
      //     }
      //   ],
      //   success: true,
      //   statusCode: 200,
      //   signature: "03638f2191bf59c0e536e5b31cbde86df5f44b03fc8e82ee9a8bed7eb324f252"
      // }
    },
    retryConfig: { retryCount: 3, retryDelay: 2000 },
    forceRefresh: false,
  }}
>
  {/* Your app */}
</VeltProvider>

const { client } = useVeltClient();

client.setPermissionProvider({
  onResourceAccessRequired: async (requests) => {
    // Example requests array received from Velt:
    // [
    //   {
    //     userId: "user_123",
    //     resource: { type: "document", id: "doc_456" }
    //   },
    //   {
    //     userId: "user_123",
    //     resource: { type: "folder", id: "folder_789" }
    //   }
    // ]
    
    // Call your backend endpoint
    const response = await fetch('/api/check-permissions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ requests })
    });
    
    const result = await response.json();
    
    // Return format expected by Velt
    return {
      data: result.permissions,
      success: result.success,
      statusCode: result.statusCode,
      signature: result.signature
    };
    
    // Example response:
    // {
    //   data: [
    //     {
    //       userId: "user_123",
    //       resourceId: "doc_456",
    //       type: "document",
    //       hasAccess: true,
    //       accessRole: "editor",
    //       expiresAt: 1735689600
    //     },
    //     {
    //       userId: "user_123",
    //       resourceId: "folder_789",
    //       type: "folder",
    //       hasAccess: true
    //     }
    //   ],
    //   success: true,
    //   statusCode: 200,
    //   signature: "03638f2191bf59c0e536e5b31cbde86df5f44b03fc8e82ee9a8bed7eb324f252"
    // }
  },
  retryConfig: { retryCount: 3, retryDelay: 2000 },
  forceRefresh: false,
});