How to Build Custom Approval UIs for n8n Workflows Without Native Forms
Most businesses using n8n hit the same wall - how to get clean, professional approval interfaces for human-in-the-loop workflows. Native forms are limited, email approvals create chaos, and messaging apps lack structure. Here's how to build custom UIs that integrate seamlessly with your n8n automation.
The Problem With Native Forms
When analyzing 1,600 production n8n workflows, a surprising pattern emerged - zero used native forms for human interaction. Instead, businesses relied on email chains, messaging apps, or custom-built interfaces. The reasons became clear upon closer examination.
Native forms in n8n lack visual polish, can't represent complex business logic clearly, and don't integrate well with existing systems. Approval workflows especially suffer when decision-makers can't see all relevant data at a glance or track request statuses easily.
Key insight: Human-in-the-loop workflows need interfaces that match your business processes - not generic forms. Custom UIs provide context, reduce errors, and create professional experiences for clients and employees.
Three Building Blocks of Interactive Workflows
The custom UI approach relies on three core components working together:
- Execution ID: Each workflow run gets a unique identifier that links frontend actions to specific instances
- Wake Node: Pauses workflow execution until receiving external input via webhook
- Frontend Interface: Makes HTTP calls to start workflows and submit decisions
This architecture creates a clean separation - n8n handles the automation logic while your custom UI manages human interaction. The workflow remains paused until receiving explicit input, preventing timeouts while waiting for approvals.
Setting Up the Webhook Node
The workflow begins with a webhook node configured to:
- Accept POST requests
- Use a descriptive path like "/approval-ui"
- Respond with JSON containing the execution ID and initial data
When testing with Postman (as shown at 4:30 in the video), you should receive a response containing:
{ "amount": 247.50, "submittedBy": "[email protected]", "description": "Client dinner - 2/22/26", "executionId": "235" } This establishes the communication channel between your UI and the workflow. The execution ID becomes your handle for all subsequent interactions with this specific run.
Processing Data Before Approval
Between the initial webhook and approval step, workflows typically:
- Validate input data
- Enrich with additional context (CRM lookups, database checks)
- Apply business rules
- Prepare the information for human review
In our expense approval example, we simulate this processing with a Set node that:
- Generates a random amount
- Pulls submitter information
- Creates a description
The key is ensuring all necessary context reaches the approval interface clearly. Well-structured data prevents back-and-forth clarification requests that delay decisions.
Implementing the Wake Node
The wake node configuration differs critically from typical implementations:
| Setting | Value | Purpose |
|---|---|---|
| Resume On | Webhook Call | Wait for external input |
| Method | POST | Standard for decision submissions |
| Response | Respond to Webhook | Confirm decision processing |
When testing with Postman (7:15 in the video), you'll see the workflow pause at this node until receiving your approval or rejection. The execution ID in the URL ensures decisions route to the correct workflow instance.
Handling Approval Decisions
After the wake node, an If node routes the workflow based on the approval decision:
Approval Flow: When approved=true, the workflow might update accounting systems, notify stakeholders, and trigger payment processing.
Rejection Flow: When approved=false, the workflow might notify the submitter, request additional documentation, or log the rejection reason.
A Merge node combines both paths before sending a final status update to the UI. This ensures consistent logging and reporting regardless of the decision outcome.
Security Considerations
While functional, our basic implementation has critical security gaps:
- Sequential IDs allow attackers to guess other workflow instances
- No authentication means anyone with the URL can submit decisions
- No rate limiting leaves workflows vulnerable to denial of service
Production implementations must add:
- Session tokens that map to execution IDs
- JWT validation for decision submissions
- IP-based rate limiting
- Decision audit logging
As noted at 11:45 in the video, partial solutions often create false security confidence. Proper implementation requires careful planning around authentication and authorization.
Advanced UI Patterns
Beyond simple approvals, three common patterns emerge:
1. Data Input Forms: Collect structured information that requires backend processing (AI analysis, database writes). Needs loading states and dynamic result rendering.
2. Multi-Step Approvals: Complex workflows with sequential approval gates. Requires tracking progress across multiple wake nodes.
3. Real-Time Dashboards: Monitoring long-running workflows with progress indicators. Needs websockets or polling to track node transitions.
Each pattern requires different frontend architecture but builds on the same core webhook and wake node principles demonstrated here.
Watch the Full Tutorial
See the complete implementation from webhook setup to UI integration in the video below. Pay special attention to the Postman testing at 4:30 and 7:15 which validates the workflow before building the frontend.
Key Takeaways
Custom UIs transform n8n workflows from behind-the-scenes automations into interactive business tools. By combining webhooks, wake nodes, and thoughtful frontend design, you can:
In summary: 1) Replace email approvals with structured interfaces, 2) Maintain workflow power while adding human judgment points, and 3) Create professional experiences that match your brand and processes.
Frequently Asked Questions
Common questions about custom n8n UIs
Analysis of 1,600 n8n workflows showed zero used native forms. Custom UIs provide better visual representation of business logic, real-time status updates, and more professional interfaces for clients.
They also allow for custom branding and user experience flows that native forms can't match while integrating seamlessly with your existing systems and design language.
- Native forms lack visual polish
- Can't represent complex business logic clearly
- Don't integrate well with existing systems
The three building blocks are: 1) Execution ID - unique identifier for each workflow run, 2) Wake node - pauses workflow until external input arrives, 3) Frontend interface - makes HTTP calls to start workflows and submit decisions.
This architecture enables interactive workflows while maintaining n8n's automation power by creating clean separation between the automation logic and human interaction points.
- Execution ID links frontend to specific workflow instances
- Wake node creates waiting points for human input
- Frontend manages the user experience
The wake node pauses workflow execution indefinitely until receiving an external webhook call. This creates a waiting point where human decisions can be collected without the workflow timing out.
The node resumes execution only after receiving the external input, allowing workflows to incorporate manual approval steps while maintaining all the benefits of automation for the rest of the process.
- Pauses execution indefinitely
- Resumes only after webhook call
- Maintains workflow state during pause
Sequential execution IDs can expose workflows to enumeration attacks where attackers guess other workflow instances. Never expose raw execution IDs to end users in production implementations.
Proper solutions implement an abstraction layer that maps temporary tokens to real IDs, and always validate user permissions before processing decisions. Session management and audit logging are critical for security.
- Sequential IDs enable guessing attacks
- Implement token mapping abstraction
- Add permission validation and audit logging
Three primary patterns exist: 1) Approval workflows (expenses, content moderation), 2) Data input forms with backend processing, and 3) Real-time dashboards tracking long-running workflows.
Approval workflows benefit from clear decision interfaces. Data input forms need loading states for backend processing. Dashboards require progress tracking across multiple nodes over time.
- Expense and content approvals
- Structured data collection forms
- Process monitoring dashboards
Wake nodes configured for webhook resumption don't timeout, maintaining workflow state indefinitely while waiting for human input. This solves the timeout problem inherent in other automation platforms.
For production use, implement status tracking to identify stale approvals and automatic cleanup of abandoned workflows. The UI should clearly indicate pending decisions and provide reminders to prevent forgotten requests.
- Wake nodes don't timeout
- Add stale approval tracking
- UI reminders prevent forgotten requests
The technique works with both n8n cloud and self-hosted instances. Cloud implementations require proper CORS configuration and may need proxy endpoints for sensitive workflows.
Self-hosted offers more deployment flexibility but requires maintaining the infrastructure. Cloud instances simplify setup but may need additional security layers depending on your use case.
- Works with both deployment options
- Cloud needs CORS configuration
- Self-hosted offers more flexibility
GrowwStacks specializes in building production-ready human-in-the-loop interfaces for n8n workflows. We design secure approval systems, implement proper session management, and ensure your workflows maintain auditability.
Our team handles everything from initial concept to deployment and maintenance, creating professional interfaces that match your brand while leveraging n8n's full automation capabilities.
- Custom approval system design
- Production-grade security implementation
- End-to-end project delivery
Ready to Transform Your Approval Workflows?
Manual approvals create bottlenecks and frustration. Let GrowwStacks build you a custom n8n interface that streamlines decisions while maintaining control.