Skip to main content
  • This feature is currently in beta and is subject to change.
  • This is currently only compatible with setDocuments method.
  • Ensure that the data providers are set prior to calling identify method.
  • The data provider methods must return the correct status code (e.g. 200 for success, 500 for errors) and success boolean in the response object. This ensures proper error handling and retries.

​
Overview

Velt supports self-hosting your users’ personally identifiable information (PII):
  • Only the userId is stored on Velt servers, keeping sensitive user metadata on your infrastructure.
  • Velt Components automatically hydrate user details in the frontend by fetching from your configured data provider.
  • This gives you full control over user data while maintaining all Velt functionality.

​
How does it work?

  • When the SDK is initialized or when user data is needed, it will call the UserDataProvider you configure with the list of userIds that it needs to fetch
  • The data provider implements a get method to retrieve user information from your database
  • Velt handles the data mapping and UI updates while delegating user data retrieval to your infrastructure
  • The SDK requests user data for the currently set user, organization, document, etc. based on your configuration
  • You can configure when user resolver requests are made to optimize performance
Here are the methods that you need to implement on the data provider:

​
get

Method to fetch users from your database. On error we will retry.
  • Param: string[]: Array of userIds to fetch
  • Return: Promise<Record<string, User>>
  • Sample Request
  • Sample Response
  • Error Response
[
  "user-1",
  "user-2",
  "user-3"
]

​
config

Configuration for the user data provider.
  • Type: ResolverConfig. Relevant properties:
    • resolveUsersConfig: ResolveUsersConfig. Configuration to control when user resolver requests are made. This helps optimize performance by avoiding unnecessary user data requests when you have a large number of users in your organization, document, or folder. You can disable user resolver requests for specific contexts and use custom autocomplete feature instead.
      • organization: boolean - Enable/disable user requests for organization users (default: true)
      • document: boolean - Enable/disable user requests for document users (default: true)
      • folder: boolean - Enable/disable user requests for folder users (default: true)

​
MongoDB Backend Implementation Example

Here’s how to implement the data provider methods with MongoDB:
  • Schema Definition
  • Get Method
  • Complete Setup
// MongoDB Schema for Users
interface UserDocument {
  userId: string;
  name: string;
  email: string;
  photoUrl?: string;
  metadata?: Record<string, any>;
  createdAt?: Date;
  updatedAt?: Date;
}

​
Example Implementation

  • React / Next.js
  • Other Frameworks
const formatUsersToRecord = (users) => {
    // Format users array into a Record object with userId as key and user data as value
    return users.reduce((record, user) => {
        record[user.userId] = {
            userId: user.userId,
            name: user.name,
            email: user.email,
            photoUrl: user.photoUrl
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds: string[]) => {
    // Fetch users from your DB
    const usersData = await __getUsersFromYourDB__(userIds);
    return formatUsersToRecord(usersData);
};

const userDataProvider: UserDataProvider = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

<VeltProvider
    apiKey='YOUR_API_KEY'
    dataProviders={{
        user: userDataProvider
    }}
>
</VeltProvider>

​
Sample Data

  • Stored on your database
  • Stored on Velt servers
{
    "user-1": {
        "userId": "user-1",
        "name": "John Doe",
        "email": "john@example.com",
        "photoUrl": "https://example.com/photos/john.jpg",
        "metadata": {
            "department": "Engineering",
            "role": "Senior Developer"
        }
    },
    "user-2": {
        "userId": "user-2",
        "name": "Jane Smith",
        "email": "jane@example.com",
        "photoUrl": "https://example.com/photos/jane.jpg",
        "metadata": {
            "department": "Product",
            "role": "Product Manager"
        }
    }
}