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, it will call the UserDataProvider you configure with the list of userIds that it needs to fetch for the currently set user, organization, document, etc.
  • The UserDataProvider takes in a list of userIds and returns a Record object with the userIds as keys and the user data as values.

Here are the methods that you need to implement on the data provider:

​
get

Method to fetch users from your database.

  • Param: string[]: Array of userIds to fetch
  • Return: Promise<Record<string, User>>

​
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)

​
Example Implementation

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,
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds) => {
    // 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>