8/6 livestream: AI-Powered Figma to Storybook in Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact sales

8/6 livestream: AI-Powered Figma to Storybook in Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Access Control Lists (ACL) provide fine-grained security for your Builder.io code generation projects. With ACLs, you can control exactly which files and directories users can access, and what operations they're allowed to perform.

ACLs help protect sensitive files like configuration files or API keys while controlling team permissions by giving different access levels to different roles. They prevent accidental modifications to critical parts of your codebase and maintain project security during collaborative development.

When Builder generates or modifies code in your project, ACLs ensure that AI-generated code changes only affect approved directories and team members can only access files relevant to their role.

Critical configuration files remain protected from accidental changes while maintaining security standards across automated and manual changes.The ACL system provides resource-based access control with support for:

  • Resource pattern matching: use flexible glob patterns to match files and directories
  • Allow and deny rules: explicit grant and revoke permissions with proper precedence
  • Multiple permission types: control read, write, and list operations
  • Custom failure messages: provide helpful error messages when access is denied

Each ACL entry defines a single access rule with these components:

interface AclEntry {
  action: "allow" | "deny";        // Whether to grant or deny access
  resource: string;                // What resources (supports glob patterns)
  permissions: Permission[];       // Which operations (read/write/list)
  failMessage?: string;           // Custom error message (deny rules only)
  principals?: string[];           // Array of teams/roles this rule applies to
}

Configure ACL policies in your fusion.config.json file under the accessControl property:

{
  "devCommand": "npm run dev",
  "serverUrl": "http://localhost:3000",
  "accessControl": {
    "entries": [
      {
        "action": "allow",
        "resource": "/public/**",
        "permissions": ["read"]
      },
      {
        "action": "deny",
        "resource": "/admin/**",
        "permissions": ["read", "write"],
        "failMessage": "Admin area access is restricted"
      }
    ]
  }
}

ACL rules are built from a few key components that work together to control access. Understanding these building blocks helps you create effective security policies for your project.

Actions determine whether access is granted or denied:

ActionDescription

allow

grants access to matching resources

deny

denies access to matching resources (always takes precedence)

Permissions specify what operations users can perform:

PermissionDescription

read

view and read files and directories

write

create, modify, and delete files and directories

list

view directory contents and file listings

ACLs use glob patterns to match files and directories, for example:

Pattern exampleDescription

/src/app.js

exact file match

/src/*.js

all .js files in the /src directory

/src/**/*.ts

all TypeScript files in /src and all subdirectories

/**

all files and directories

/assets/**

everything in the assets directory

Glob patterns are case-sensitive and always use forward slashes (/), even on Windows.

The ACL system uses a deny-first precedence model:

  1. Deny rules checked first. If any deny rule matches, access is immediately denied.
  2. Allow rules checked second. If no deny rules matched and an allow rule matches, access is granted.
  3. Default deny. If no rules match, access is denied by default.

In this way, deny rules always take precedence over allow rules, regardless of their order in the policy.

When Builder generates or modifies code, every file operation is checked against your ACL rules:

  • Reading files for context or analysis requires read permission.
  • Creating or modifying files requires write permission.
  • Listing directories to understand project structure requires list permission.
  • Checking if files exist requires read permission.

When an ACL rule denies access, the operation fails with an error message in this format:

ACL denied: [your custom message or default explanation]

The default message gives only the most basic context:

"ACL denied: Access to /src/secrets/api-key.txt denied by rule"

Ideally, provide a custom message so users know exactly why access is denied:

"ACL denied: Database configuration cannot be modified automatically"

This section covers some practical examples of how to configure ACLs for typical project scenarios.

Allow users to read markdown files and work with source code, but restrict TypeScript modifications to keep those files read-only:

{
  "accessControl": {
    "entries": [
      {
        "action": "allow",
        "resource": "/**/*.md",
        "permissions": ["read"]
      },
      {
        "action": "allow",
        "resource": "/src/**",
        "permissions": ["read", "write"]
      },
      {
        "action": "deny",
        "resource": "/src/**/*.ts", 
        "permissions": ["write"],
        "failMessage": "TypeScript files are read-only"
      }
    ]
  }
}

Specify different access levels for different directories:

{
  "accessControl": {
    "entries": [
      {
        "action": "allow",
        "resource": "/docs/**",
        "permissions": ["read", "write", "list"]
      },
      {
        "action": "allow", 
        "resource": "/src/**",
        "permissions": ["read", "write"]
      },
      {
        "action": "allow",
        "resource": "/assets/**",
        "permissions": ["read", "write", "list"]
      },
      {
        "action": "deny",
        "resource": "/config/secrets/**", 
        "permissions": ["read", "write", "list"],
        "failMessage": "Access to secrets is restricted"
      }
    ]
  }
}

Allow public access to documentation but restrict source code:

{
  "accessControl": {
    "entries": [
      {
        "action": "allow",
        "resource": "/docs/**",
        "permissions": ["read", "list"]
      },
      {
        "action": "allow", 
        "resource": "/public/**",
        "permissions": ["read", "list"]
      },
      {
        "action": "allow",
        "resource": "/src/**", 
        "permissions": ["read", "write"]
      },
      {
        "action": "deny",
        "resource": "/src/config/**",
        "permissions": ["write"],
        "failMessage": "Configuration files cannot be modified"
      }
    ]
  }
}

Control access based on file types:

{
  "accessControl": {
    "entries": [
      {
        "action": "allow",
        "resource": "/**/*.md",
        "permissions": ["read", "write"]
      },
      {
        "action": "allow",
        "resource": "/**/*.js",
        "permissions": ["read", "write"],
        "principals": ["developer", "admin"]
      },
      {
        "action": "allow",
        "resource": "/**/*.ts",
        "permissions": ["read"],
        "principals": ["developer", "admin"]
      },
      {
        "action": "deny",
        "resource": "/**/*.ts",
        "permissions": ["write"],
        "failMessage": "TypeScript files are currently read-only"
      }
    ]
  }
}

Explore more advanced features:

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024