Follow the steps below to setup a simple webapp that displays a Cumul.io dashboard with multi tenancy. Setting this app will allow you to define rules that determine what each user has access to on your dashboard.
Before you begin, you will need a Cumul.io account.
You can create as many dashboards as you'd like.
Add the dashboards you want to use in this application all into an 'Integration' in Cumul.io. Per user you can determine which integration they will see, so depending on their role, company, license, ... you can control which dashboards they see by creating separate integrations. We will use the Integration ID to create an SSO token and embed the dashboards into the application.
-
Create an account here
-
In the Applications menu create a new Application and select Single Page Web Applications and in Settings:
-
copy 'Domain' & 'Client ID' to the same attributes in the auth_config.json file
-
set the parameters of:
Allowed Callback URLs:
http://localhost:3000
Allowed Logout URLs:http://localhost:3000
Allowed Web Origins:http://localhost:3000
-
Save the changes
in Connections: deactive google-oauth2 (to hide social)
-
-
In Applications -> APIs copy 'API audience' next to Auth0 Management API to the audience attribute in the auth_config.json file
-
Add some users in User Management -> Users:
-
Go to users & create a user
-
You should add the following properties to the
user_metadata
of a user:firstName
name
email
language
An example of the
user_metadata
:{ "firstName": "Angelina", "language": "nl", "email": "[email protected]", "name": "Angelina Julie" }
-
You should add the following properties to the
app_metadata
of a user:-
parameters
: object containing parameter names and their values. These parameter filters will ALWAYS be applied in the authorization token, so e.g. useful for row-level security per client. -
role
: viewer or designer -
integration_id
: id of the integration the user should see 'see step II Create an Integation' -
suborganization
: suborganization of the user -
username
: unique, immutable usernameAn example of the
app_metadata
:{ "parameters": { "<parameter name>": ["<parameter value 1>", "<parameter value 2>"] }, "role": "viewer", "integration_id": "xxxxx", "suborganization": "client 1", "username": "123456" }
(
user_metadata
is meant for user preferences that they could easily change, whereasapp_metadata
is for user information that an admin would control) -
-
-
In order for the metadata to be able to be extracted from the jwt tokens we need to add a rule.
- Go to Auth Pipeline -> Rules and create a rule with name 'Add metadata to token' and use the following function:
function (user, context, callback) {
const namespace = 'https://cumulio/';
user.user_metadata = user.user_metadata || {};
Object.keys(user.user_metadata).forEach((k) => {
context.idToken[namespace + k] = user.user_metadata[k];
context.accessToken[namespace + k] = user.user_metadata[k];
});
Object.keys(user.app_metadata).forEach((k) => {
context.idToken[namespace + k] = user.app_metadata[k];
context.accessToken[namespace + k] = user.app_metadata[k];
});
callback(null, user, context);
}
npm install
Create a file called '.env' in the root directory with two keys. Replace the KEY & TOKEN with the one from your Cumul.io account. You can create one in your Profile settings under API Tokens:
CUMULIO_API_KEY=XXX
CUMULIO_API_TOKEN=XXX
npm run start
or if you do not have nodemon, use:node server.js
- Each time you add/remove dashboards, or change something to server.js you will have to restart the server. Changes to e.g. public/js/app.js do not require a server restart, but could be cached on the client side so it could be that you have to hard-refresh your browser in order to see the changes.