How to Integrate Retool with Wasabi

Log into the Wasabi console at https://console.wasabisys.com. To create or find your access keys, navigate to Account (top-right avatar or name) → Access Keys. If you do not yet have an access key pair, click Create New Access Key. Wasabi will generate an Access Key ID (a string of uppercase letters and numbers, similar to AWS) and a Secret Access Key (a longer secret string). Download or copy both — the secret key is only shown once. Next, identify the endpoint for your Wasabi region. Wasabi's S3-compatible endpoints follow this pattern: - US East 1 (default): s3.wasabisys.com - US East 2: s3.us-east-2.wasabisys.com - US West 1: s3.us-west-1.wasabisys.com - EU Central 1 (Frankfurt): s3.eu-central-1.wasabisys.com - EU West 1 (London): s3.eu-west-1.wasabisys.com - AP Northeast 1 (Tokyo): s3.ap-northeast-1.wasabisys.com - AP Northeast 2 (Osaka): s3.ap-northeast-2.wasabisys.com - AP Southeast 1 (Singapore): s3.ap-southeast-1.wasabisys.com You can find your bucket's region in the Wasabi console under Buckets — click any bucket and look for the Region field in its Properties. Note the endpoint domain for your region as you will use it as the base URL in Retool. For the AWS region code (needed for v4 signature): Wasabi's us-east-1 maps to AWS region 'us-east-1', eu-central-1 to 'eu-central-1', and so on. The codes are consistent with AWS region naming conventions.

Before creating the resource, store your Wasabi credentials in Retool's configuration variables. Navigate to Settings (gear icon) → Configuration Variables. Create two variables: 1. Name: WASABI_ACCESS_KEY_ID — Value: your Wasabi access key ID — Secret: yes 2. Name: WASABI_SECRET_ACCESS_KEY — Value: your Wasabi secret access key — Secret: yes Now navigate to the Resources tab and click Add Resource. Search for 'REST' and select REST API. In the configuration form: - Name: 'Wasabi Storage' - Base URL: https://s3.wasabisys.com (replace with your regional endpoint, e.g., https://s3.eu-central-1.wasabisys.com) For Authentication, select 'AWS v4' from the dropdown (this matches Wasabi's signature scheme). Fill in: - Access Key ID: {{ retoolContext.configVars.WASABI_ACCESS_KEY_ID }} - Secret Access Key: {{ retoolContext.configVars.WASABI_SECRET_ACCESS_KEY }} - AWS Region: us-east-1 (or your Wasabi bucket's region code) - Service: s3 In the Headers section, add: - Content-Type: application/xml (Wasabi's S3 API uses XML for request/response bodies) Click Save Changes. Verify the resource works by creating a test query: Method GET, Path / — this lists all buckets (GET Service operation). A 200 response with XML content confirms authentication is working correctly.

Open or create a Retool app. In the Code panel, click + to add a new query. Select your Wasabi Storage resource from the Resource dropdown. To list all buckets (the S3 ListBuckets operation): - Method: GET - Path: / (root path lists all buckets for the account) - No additional headers or query parameters are needed for listing buckets Wasabi (like AWS S3) returns XML responses for this operation. Add a JavaScript transformer to parse the XML into a flat array for Retool's Table component. Retool's query data property receives the raw response — use the DOMParser API to parse XML in the transformer. Set the query to Run automatically on page load. Drag a Table component onto the canvas. Set its Data to {{ bucketsQuery.data }}. Configure columns: name, creationDate, region. Add a click handler on the Table row to trigger a second query that lists objects in the selected bucket (built in the next step). For the bucket list query name, use 'bucketsQuery' so you can reference {{ bucketsTable.selectedRow.name }} in subsequent queries.

1// JavaScript transformer to parse Wasabi S3 XML ListBuckets response
2// S3 returns XML; this transformer converts it to an array of bucket objects
3const xmlString = data; // raw XML string from Wasabi
4const parser = new DOMParser();
5const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
6const buckets = xmlDoc.querySelectorAll('Bucket');
7const result = [];
8buckets.forEach(bucket => {
9  const name = bucket.querySelector('Name');
10  const created = bucket.querySelector('CreationDate');
11  result.push({
12    name: name ? name.textContent : 'Unknown',
13    creationDate: created ? new Date(created.textContent).toLocaleDateString() : 'N/A'
14  });
15});
16return result;

Create a second query that lists objects inside the bucket selected in the bucket table. This uses S3's ListObjectsV2 operation. In the Code panel, click + to add a new query. Select your Wasabi Storage resource. Configure: - Method: GET - Path: /{{ bucketsTable.selectedRow.name }} (targets the selected bucket) - Query Parameters: - list-type: 2 (enables ListObjectsV2 operation) - prefix: {{ prefixInput.value || '' }} — simulates folder navigation by filtering by object prefix - max-keys: {{ pagination.pageSize || 100 }} - continuation-token: {{ objectsQuery.continuationToken || '' }} — for pagination through large buckets - delimiter: '/' — returns common prefixes (virtual folders) alongside object keys Set the query to run automatically when bucketsTable.selectedRow.name changes and enable 'Only run when inputs have valid values'. Add a transformer to parse the XML response. The ListObjectsV2 XML response contains Contents elements (individual objects) and CommonPrefixes elements (virtual folder prefixes). Drag a second Table below the bucket table. Set Data to {{ objectsQuery.data }}. Configure columns: key (object name), size (formatted in KB/MB), lastModified, and an action column with a 'Get Link' button. Add a TextInput component above the objects table for the prefix filter, labeled 'Folder prefix'. When the user types a folder path (e.g., 'uploads/images/'), the objects query re-runs with that prefix.

1// Transformer to parse S3 ListObjectsV2 XML response
2const parser = new DOMParser();
3const xmlDoc = parser.parseFromString(data, 'application/xml');
4
5// Parse objects (Contents elements)
6const contents = xmlDoc.querySelectorAll('Contents');
7const objects = [];
8contents.forEach(item => {
9  const key = item.querySelector('Key');
10  const size = item.querySelector('Size');
11  const modified = item.querySelector('LastModified');
12  const storageClass = item.querySelector('StorageClass');
13  const sizeBytes = size ? parseInt(size.textContent) : 0;
14  objects.push({
15    key: key ? key.textContent : '',
16    filename: key ? key.textContent.split('/').pop() : '',
17    sizeBytes: sizeBytes,
18    sizeFormatted: sizeBytes > 1048576
19      ? (sizeBytes / 1048576).toFixed(2) + ' MB'
20      : (sizeBytes / 1024).toFixed(1) + ' KB',
21    lastModified: modified ? new Date(modified.textContent).toLocaleString() : 'N/A',
22    storageClass: storageClass ? storageClass.textContent : 'STANDARD',
23    type: 'file'
24  });
25});
26
27// Parse virtual folders (CommonPrefixes)
28const prefixes = xmlDoc.querySelectorAll('CommonPrefixes');
29prefixes.forEach(prefix => {
30  const pfx = prefix.querySelector('Prefix');
31  if (pfx) {
32    objects.unshift({
33      key: pfx.textContent,
34      filename: pfx.textContent.split('/').filter(Boolean).pop() + '/',
35      sizeBytes: 0,
36      sizeFormatted: '(folder)',
37      lastModified: '',
38      storageClass: '',
39      type: 'folder'
40    });
41  }
42});
43return objects;

Pre-signed URLs allow you to generate temporary, time-limited download links for private Wasabi objects without exposing your credentials. In Retool, pre-signed URL generation requires either a custom JavaScript query or a server-side generation endpoint, since the signing process requires your secret key. The safest approach in Retool is to use a JavaScript query that makes the actual GetObject URL construction. However, since pre-signing with AWS v4 requires HMAC-SHA256 cryptography not natively available in Retool's JavaScript sandbox, the practical approach is to proxy this through a backend endpoint — or use a simpler method: making the object temporarily publicly accessible via a short-lived ACL, then immediately reverting it. For a practical implementation in Retool, create a PATCH query that calls a backend service (or Retool Workflow with a Code block) that uses an AWS SDK-compatible library to generate the signed URL. The Workflow receives the bucket name and object key, generates the signed URL using Node.js crypto, and returns it to the app. Alternatively, for internal teams with bucket-level access control: configure your Wasabi bucket policy to allow your organization's IP ranges read access, then generate direct object URLs in the format https://s3.wasabisys.com/{bucket}/{key} for internal access without signing. For the Retool UI: add an 'Open/Download' button column to the objects table. Wire the button's click event to trigger the URL generation query, then use the resulting URL in a 'Open URL' event handler action to open the file in a new browser tab. Display the generated URL in a Modal with a 'Copy' button for sharing. For complex multi-bucket storage dashboards with automated signed URL generation workflows, RapidDev's team can help architect and build your Retool solution.

1// Retool Workflow Code block: generate Wasabi pre-signed URL
2// This runs in a Workflow with access to Node.js crypto
3const crypto = require('crypto');
4const bucket = startTrigger.data.bucket;
5const key = startTrigger.data.key;
6const region = 'us-east-1'; // adjust to your region
7const endpoint = `s3.wasabisys.com`;
8const expirySeconds = 3600; // 1 hour
9
10const date = new Date();
11const dateStr = date.toISOString().replace(/[:\-]|\.\d{3}/g, '').substring(0, 8);
12const amzDate = date.toISOString().replace(/[:\-]|\.\d{3}/g, '');
13
14// Build the pre-signed URL components
15const credential = `${process.env.WASABI_ACCESS_KEY_ID}/${dateStr}/${region}/s3/aws4_request`;
16const url = `https://${bucket}.${endpoint}/${encodeURIComponent(key)}`
17  + `?X-Amz-Algorithm=AWS4-HMAC-SHA256`
18  + `&X-Amz-Credential=${encodeURIComponent(credential)}`
19  + `&X-Amz-Date=${amzDate}`
20  + `&X-Amz-Expires=${expirySeconds}`
21  + `&X-Amz-SignedHeaders=host`;
22
23return { signedUrl: url }; // Note: full HMAC signing omitted for brevity