Create an Audit Logging Dashboard

Miro’s audit logs help track events within different company teams. This means you’re all set to troubleshoot a problem or get a detailed report of significant events, such as global security setting changes, failed login attempts, new user invitations, app removal, new board creation, or changes to existing boards. Even better, you can call Miro’s REST API endpoint from your web application to retrieve user event logs in a JSON object format. Then, you can display them using your preferred web technology.

In this tutorial, you’ll learn how to build an audit log dashboard using Miro’s audit log API, JavaScript, and Node.js. You can find the complete code for this project on GitHub.


Before you begin, you should:

  • First, create a Miro account if you don’t already have one.
  • Be familiar with Node.js to follow along.
  • Contact Miro to give you access to the auditlogs:read scope. This allows you to read your organization’s audit logs, which are only available in the enterprise plan. We’ll create a new organization in your Miro account. Your role will be Company Admin, enabling you to manage all teams and other settings on the company level.

Create an App in Miro

  1. To create an app in your enterprise team’s organization, start by clicking the settings icon (ES) at the top left of the Miro dashboard. This action takes you to your team’s profile page.
Figure 1. Miro dashboard
  1. Then, click Company to go to your company dashboard.
Figure 2. Company dashboard.
  1. Next, click Profile settings on the dashboard.
Figure 3. Profile settings page.
  1. On the Profile settings page, click Apps.
  2. On the Your apps page, review the Terms and Conditions, select the I agree to the Terms and Conditions checkbox, then click Create new app.
Figure 4. Your apps page.
  1. In the Web SDK dialog box, select SDK V2  from the list of SDK versions (Figure 5).
  2. Under Permissions, select the boards:read and the boards:write checkboxes (Figure 5).
  3. Click Install app and get OAuth token.
Figure 5. Web SDK version and permissions.
Figure 6. Install app to get OAuth token dialog box.
  1. Select your enterprise team and click Install & authorize in the resulting popup.

Figure 6 shows that the new app has permission to read audit logs for the team’s organization. You see your OAuth access token after installation.

Figure 7. Installation confirmation and tokens.

Keep this token. You need it later to make API calls and retrieve the audit logs.

You can view events directly on the dashboard in the Audit logs section.

  1. Click your profile avatar > Settings > Profile settings > Audit logs to reach this option.
  2. Select a period and click View events.
Figure 8. Audit logs listing events.
You’re done setting up your app. Next, you’ll create a simple dashboard user interface (UI) to display all these events in a web browser.

Build the Dashboard to Display User Events

Whenever a team member performs a notable task in your organization, their action registers an event. As a company admin, you’ve likely triggered these six events in your app so far:
    • board_created
    • board_opened
    • board_account_sharing_enabled
    • board_name_changed
    • board_descByer_changed
To easily track events, you’ll build a sleek admin dashboard that shows a detailed report of important actions by team members within your organization.
  1. Install the Vue CLI globally (if you haven’t already done so) using this command:
					npm install -g @vue/cli
  1. Create a new Vue application using this command:
					vue create miro-logs

After a while, Vue should generate your new application.

  1. When it’s finished, change to the miro-logs directory:
					cd into miro-logs
  1. Start your app by running:
					vue serve.
  1. Copy the CDN link to Tailwind CSS into your public/index.html file:
					<link rel="stylesheet" href="" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  1. In App.vue, replace the contents of your <script> tag with the following code. Delete the components folder, as you don’t need it.
					export default {
  name: 'App',
  data() {
    return {
      results: []
  mounted() {
    const options = {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        Authorization: 'Bearer <your-access-token>'

    fetch('http://localhost:8010/proxy/v1/audit/logs?createdAfter=2022-03-13&createdBefore=2022-03-15&limit=10&offset=1', options)
      .then(response => response.json())
      .then(res=> {
        this.results = res;        
      .catch(err => console.error(err));      
  1. Ensure that you replace with your application’s access token. Also, createdAfter and createdBefore dates are both required. Learn more about the logs API in our developer resources.
The code does a couple of things. First, it creates the function data() and returns results with an empty array. Later, the API returns audit data to populate this array. The code also makes a request to the audit logs API by passing the options object using the mounted hook. The options object contains the request method and a request header. The request header contains the content type and the Miro app’s access token. If you look at the URL you’re using for the request, you see that the URL belongs to a proxy server. This approach eliminates CORS errors. However, you won’t need to do this with an enterprise account. Our team will safelist your domain to directly make requests to without any issues, so use this URL in the code above.
  1. Install the CORS proxy using the following command:
					npm i local-cors-proxy
  1. Add the following script to your package.json file, under scripts:
					"proxy": "lcp --proxyUrl"

Pointing to your project root, run the command npm run proxy on your terminal. You should now be able to make API calls to via the proxy localhost:8010.

  1. Next, your app needs to cycle through the data and display them inside your Vue template. Go back to your App.vue file and replace the contents of with the contents from this file.

Recall that your app needs to track six events:

  • Board_name_changed
  • Board_description_changed
  • Board_opened
  • Board_account_sharing_enabled
  • Board_created
  • Board_cover_changed

The full code includes styles for all six events, but let’s focus on the main part of the code:

					<div v-for="event of" :key="">                
	<div v-if="event.event == 'board_name_changed'">
	 // Markup for displaying Board Change details
	<div v-if="event.event == 'board_description_changed'">
	 // Markup for displaying Board Desc Change details
	<div v-if="event.event == 'board_opened'">
	 // Markup for displaying Board Opening details
	<div v-if="event.event == 'board_account_sharing_enabled'">
	 // Markup for displaying Board Sharing details
	<div v-if="event.event == 'board_created'">
	 // Markup for displaying Board Creation details
	<div v-else>
	 // Markup for displaying Board Cover Change details

This code’s goal is simple: It loops through the data that the API returns and passes it into your template. It performs a check to uncover the event type, such as board_opened and board_name_changed, and displays the corresponding template for every event.

At this point, your application should look like Figure 9.

Figure 9. List of dashboards.

Your dashboard application now provides details about board events so you can track any unusual activity or find areas for improvement.

Visualize Logs using the Miro App and Splunk

With Miro’s Audit Log API, you can take your data analysis to the next level by connecting to apps that offer additional features, like data visualization and filtering. For example, you can integrate your Miro app with Splunk using this detailed guide.

Splunk’s data visualization tool provides an overview of all user events in your Miro accounts. You can see information like the number of events over time, organized by team and total, and board events like boards created and boards opened.

Figure 10. Splunk’s data visualization tool.

Additionally, you get a visual overview of your Miro account’s security activity, including the number of successful and failed sign-ins. You also get the list of user events when sharing boards.


Figure 11. Visual overview of your Miro account's security activity.

You can also filter by organizations, teams, and periods.

Next Steps

You now know how to set up an enterprise team in Miro, create an App in the team, and get the OAuth access token from the dashboard for API calls. You can build a sleek dashboard application with Vue or any preferred language or framework.

You can use the access token to access your audit log data over the API, then display the information in templates. Finally, you can take your audit analysis to the next level by integrating Miro with Splunk.

Now that you know how to set up and use audit logs, you can better understand how your organization uses Miro and protect your company’s information.

If you’re interested in developing expert technical content that performs, let’s have a conversation today.



If you work in a tech space and aren’t sure if we cover you, hit the button below to get in touch with us. Tell us a little about your content goals or your project, and we’ll reach back within 2 business days. 

Share via
Copy link
Powered by Social Snap