Cloudflare Zero Trust Setup Wizard

What it is

A developer tool that automates the creation of Cloudflare Tunnels and Access policies to expose local services securely. It replaces manual dashboard configuration with a guided React-based web portal or terminal script, handling DNS records, tunnel binaries, and macOS launch agents automatically.

Features

• Interactive React wizard guides users through Tunnel, DNS, and Access setup
• Automated installation of cloudflared binary and macOS launch agents
• Identity gate enforcement using Cloudflare Access email OTP
• Real-time status dashboard monitoring tunnel and origin health
• CLI alternative for headless or terminal-preferred workflows
• Automatic reconnection and network switching support

Quickstart

git clone https://github.com/davidbmar/cloudflare-zero-trust-setup.git
cd cloudflare-zero-trust-setup
./portal.sh

Architecture

flowchart TD
    User[Internet User] -->|HTTPS Request| CF_Access[Cloudflare Access Edge]
    CF_Access -->|Check Identity| IdP[Identity Provider]
    IdP -->|OTP/Auth| CF_Access
    CF_Access -->|Allowed| CF_Tunnel[Cloudflare Tunnel Network]
    CF_Tunnel -->|Encrypted Outbound| Daemon[cloudflared daemon]
    Daemon -->|Localhost Proxy| LocalSvc[Local Service :8090]
    subgraph Local Machine
        Daemon
        LocalSvc
        Portal[Setup Portal :5173]
        API[Express API :3001]
        Portal -->|Proxy /api| API
        API -->|Exec/Read| Config[config.env]
        API -->|Manage| Daemon
    end

How it's built

The project combines Bash scripting for system-level operations (installing cloudflared, managing launchd plists) with a TypeScript/React frontend served by a lightweight Express backend. The backend acts as a bridge, executing shell commands to read/write config.env and check system status, while the frontend provides a visual wizard and real-time status dashboard.

How it runs

sequenceDiagram
    participant User as Developer
    participant Portal as React Portal
    participant API as Express Backend
    participant FS as File System
    participant OS as macOS OS
    
    User->>Portal: Open Setup Wizard
    Portal->>API: GET /api/status
    API->>FS: Read config.env
    API->>OS: Check cloudflared process
    OS-->>API: Process status
    API-->>Portal: JSON Status
    
    User->>Portal: Click 'Create Tunnel'
    Portal->>API: POST /api/setup/tunnel
    API->>OS: Exec cloudflared tunnel create
    OS-->>API: Tunnel UUID
    API->>FS: Write config.env
    API-->>Portal: Success
    
    User->>Portal: Click 'Install Launch Agent'
    Portal->>API: POST /api/setup/agent
    API->>FS: Render plist template
    API->>OS: cp plist to LaunchAgents
    OS-->>API: Success
    API-->>Portal: Installed

How to apply & reuse

Use this when you need to demo localhost applications to remote stakeholders without exposing your IP or opening firewall ports. It is ideal for developers who want a permanent, authenticated URL for local development environments, ensuring only specific emails can access the service via Cloudflare's edge network.

At a glance