NodeJs
This guide takes you through using the Vizzly Auth Package (opens in a new tab) to sign the identity config securely on your servers.
If you are looking for more information about each of the properties, you can find that here.
Install
npm install @vizzly/auth
Import
import * as VizzlyAuth from '@vizzly/auth';
Create the signer
const vizzlySigner = VizzlyAuth.createSigner({ ttlInMinutes, privateKey });
To load your private key from an environment variable, you can see the guide here.
Create the dashboard access token
const dashboardAccessToken = await vizzlySigner.signDashboardAccessToken({
/* [REQUIRED]
What is the ID of your project?
You can find this on the project details page. It will start with `prj_`
*/
projectId: '<< Your project ID >>',
/* [REQUIRED]
A unique identifier for the current user, that you are
happy for Vizzly to store.
*/
userReference: '<< A reference to the current user >>'
/* [OPTIONAL]
Control 'admin' mode for the parent dashboard.
This is an advanced feature, and should only be used
to allow members of your organisation access to the
parent dashboard.
Default: 'standard'
*/
// accessType: 'standard' | 'admin'
/* [OPTIONAL]
Prevent the user from making any changes to their dashboard.
Default: 'read_write'
*/
// scope: 'read' | 'read_write'
/* [OPTIONAL]
List the parent dashboard IDs the user has access too.
Default: undefined
*/
// parentDashboardIds: Array<string>;
});
Create the data access token
const dataAccessToken = await vizzlySigner.signDataAccessToken({
/*
What is the ID of your project?
You can find this on the project details page. It will start with `prj_`
*/
projectId: '<< Your project ID >>',
/*
What data sets does this user have access too?
If can either be a list of data set IDs, or a "*" to allow
access to all data sets.
*/
dataSetIds: ['hr-payroll-data', 'hr-people-data'],
/*
What secure filters need to be added, to ensure this user
only sees their own data? For example here, we set a filter
to only use data where the field `field_user_id` equals a
specific user ID.
*/
secureFilters: {
'hr-payroll-data': [
{
field: 'field_user_id',
op: '=',
value: "<< the user's ID >>"
}
],
'hr-people-data': [
{
field: 'field_user_id',
op: '=',
value: "<< the user's ID >>"
}
]
},
/* [OPTIONAL]
Provide an object of key/values that
can be used in the Vizzly Query Engine's
SQL backed data sets feature.
*/
parameters: {}
});
Create the query engine access token (optional)
This is an advanced option for accessing the Query Engine from the embedded dashboard. Generally, you should access the Query Engine via its "Sign In" page.
const queryEngineAccessToken = await vizzlySigner.signQueryEngineAccessToken({
// What is the ID of your project?
// You can find this on the project details page. It will start with `prj_`
projectId: '<< Your project ID >>',
// Allow the user access to the database schema. This is required if you want the
// user to access the Vizzly Config Manager.
allowDatabaseSchemaAccess: true,
// Allow the user to fetch 'preview' data from the database when
// configuring the datasets for the Vizzly Query Engine.
allowDataPreviewAccess: true
});
Next steps
Now that you have created the access tokens, you will want to return the access tokens to the client. For example, you might be calling this auth endpoint from the identity function used on the Dashboard. If that's the case, then you'll want to return the tokens in a JSON structure of this format;
{
/** Required */
dashboardAccessToken: string;
/** Required if you are using the self-hosted Vizzly query engine */
dataAccessToken?: string;
/** Optional if the user has access to the config manager */
queryEngineAccessToken?: string;
}
Now that you are finished generating access tokens for Vizzly, you might be interested in;
- Setting up the Dashboard React component
- Setting up the self-hosted Vizzly Query Engine