The Make Bridge API implementation method offers you two options to integrate Bridge into your product using the as the integration interface.
To complete the integration, you will need your Make Bridge secret key and secret ID .
Make Bridge uses JWT for authentication and authorization. You will add your secret to a JWT token that is necessary for all communication with Make Bridge API.
Option 1: Integration with a pre-built component
In order to shorten the time to integration, we created a pre-built, front-end component and back-end implementation example.
The front-end component can be embedded in your application to provide a basic user experience, while the back-end example ensures secure communication with the .
Front-end component and example
portal-integrations.js - This is the main component that can be included anywhere in your own application HTML. The component is downloaded from Make Bridge servers directly.
index.html - Example code showing how to incorporate portal-integrations.js in your HTML code.
While it's possible to implement only the front-end code, we strongly recommend using the back-end integration for secure communication with Make Bridge to prevent potential misuse by end users.
Back-end example
index.ts - Example integration using Node.js and a proxy pattern that works directly with the portal-integrations.js component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Integrator Demo</title>
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<!-- content security policy needs to be present and needs to be based on your url and your Make zone url address -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' localhost:3000 https://eu1.make.com https://eu2.make.com https://us1.make.com https://us2.make.com; script-src 'self' https://unpkg.com https://eu1.make.com https://eu2.make.com https://us1.make.com https://us2.make.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com;"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<div style="max-width: 1000px; display: flex; justify-content: center; align-items: center; margin: auto;">
<!-- use your own backend API address with /proxy -->
<portal-integrations urlOrPrefix="http://localhost:3000/proxy">
</portal-integrations>
</div>
<!-- this downloads the portal-integrations component -->
<script type="module" src="https://eu1.make.com/portal/static/js/portal-integrations.js"></script>
</body>
</html>
// This is a simple example of a Node.js proxy server that forwards requests to the Make Bridge API.
const express = require('express');
const proxy = require('express-http-proxy');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');
/**
* Configuration values - use our own
* On production, these values should be provided in a secure manner such as via environment variables
*/
const SECRET_KEY = '04XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
const KEY_ID = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX';
const ZONE_URL = 'https://eu2.make.com/';
const app = express();
/**
* Replace with the authenticated user's email or user ID.
* You can use anything that is unique to the user and can be used to identify the user on both the Make and your system's side.
*/
const userId = 'user@example.com';
/**
* A single middleware that handles:
* - Authorization check (via 'filter')
* - JWT generation (via 'proxyReqOptDecorator')
* - Request forwarding
*/
app.use(
'/proxy',
proxy(ZONE_URL, {
filter: (req, res) => {
if (!userId) {
res.status(401).json({ error: 'Unauthorized' });
return false;
}
return true;
},
proxyReqPathResolver: (req) => {
// Strip out "/proxy" from the path before forwarding to {ZONE}/portal/api/bridge/
return '/portal' + req.originalUrl.replace(/^\/proxy/, '');
},
proxyReqOptDecorator: (proxyReqOpts, srcReq) => {
// Generate a fresh JWT for each request
const token = jwt.sign(
{
sub: userId,
jti: crypto.randomUUID(),
},
SECRET_KEY,
{
expiresIn: '2m',
keyid: KEY_ID,
}
);
// Attach the JWT to the Authorization header
proxyReqOpts.headers['Authorization'] = `Bearer ${token}`;
return proxyReqOpts;
},
})
);
/**
* Start the server on port 3000 (or any port you prefer).
*/
app.listen(3000, () => {
console.log('Server is listening on port 3000.');
});
Option 2: Direct integration with the Make Bridge API
Example of the direct Make Bridge API implementation:
const jwt = require('jsonwebtoken');
const crypto = require('crypto');
/**
* Configuration values - use our own
* On production, these values should be provided in a secure manner such as via environment variables
*/
const SECRET_KEY = '04XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
const KEY_ID = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX';
const ZONE_URL = 'https://eu2.make.com/';
// Bridge API lives on ZONE_URL/portal/ address
const BRIDGE_API_URL = ZONE_URL + '/portal/';
/**
* Replace with the authenticated user's email or user ID.
* You can use anything that is unique to the user and can be used to identify the user on both the Make and your system's side.
*/
const userId = 'user@example.com';
/**
* Generates a short-lived JWT for authenticating with the Make API.
*
* @param {string} userId - User ID or email address to be used as the subject (sub) claim in the JWT.
* @returns {string} A signed JWT string.
*/
function generateMakeApiJwt(userId) {
return jwt.sign(
{
sub: userId,
jti: crypto.randomUUID(),
},
SECRET_KEY,
{
expiresIn: '2m',
keyid: KEY_ID,
}
);
}
/**
* Calls the Make Bridge Portal API /portal/api/bridge/integrations endpoint using a signed JWT.
*/
async function listIntegrations() {
const token = generateMakeApiJwt(userId);
const url = `${BRIDGE_API_URL}/api/bridge/integrations`;
const response = await fetch(url, {
method: 'GET',
headers: {
Authorization: `Bearer ${token}`,
},
});
const data = await response.json();
return data;
}
// Example usage
listIntegrations().then((data) => {
// Use the data as needed
console.log('Integrations:', data);
}).catch((error) => {
console.error('Error fetching integrations:', error);
});
Security Considerations
Always use HTTPS for all communications between your frontend, backend, and Make Bridge.
Store your Make Bridge secret securely on your backend and never expose it to the frontend unless used for testing purposes.
Implement proper authentication and authorization mechanisms in your backend to ensure only authorized users can access Make Bridge functionalities.
After completing the integration, thoroughly test all functionalities. If you encounter any issues or have questions during the beta testing phase, please contact us directly.
This option uses direct integration with the and gives you a lot of style and logic customizations. The can be found at the following address:
