Front Attachment Encryptor Plugin

A Front composer plugin that lists all attachments in a message draft and allows users to encrypt them before sending for secure transmission.

Learn more about this project on our Developer Portal and access the AI prompt file that created it.

⚠️ Important: This plugin was created using AI (inclusive of this readme). It's express purpose is to demonstrate how plugins can be quickly scaffolded using a prompt file fed to an AI agent. However, the code has not been reviewed for production readiness, nor should it be used in a production environment without a detailed engineering review. The functionality of the plugins is enabled through local pseudocode rather than functioning public APIs. Treat the programming patterns and informational text throughout this project—including in this readme—with a grain of salt. AI can hallucinate inaccurate information or suggest insecure, incorrect, inefficient, or inelegant best practices.

Features

• 📎 Attachment Listing: View all attachments in your current draft
• 🔒 Individual Encryption: Encrypt attachments one by one
• ⚡ Bulk Encryption: Encrypt all attachments with one click
• 🔍 Debug Mode: Comprehensive debugging tools for development
• 🌙 Dark Mode: Automatic dark/light mode support
• 📱 Responsive: Works well in Front's sidebar layout

Installation & Setup

Prerequisites

• Node.js (version 16 or higher)
• A Front workspace with developer permissions

1. Install Dependencies

npm install

2. Start Development Server

npm run dev

Note the localhost URL where the plugin is running (typically http://localhost:5173)

3. Create Front Developer App

1. In your Front company settings, click Developers
2. Click Create new app
3. Fill in your app details:
   • Name: Attachment Encryptor Plugin
   • Description: Encrypt attachments before sending

4. Add Plugin Feature

1. In your newly created app, click Add feature
2. Select Plugin as the feature type
3. Choose Composer toolbar as the entry point
4. Set the Plugin URL to your localhost address (e.g., http://localhost:5173)

5. Enable Debug Mode (Optional)

To access debugging tools, append ?debug=true to your plugin URL:

http://localhost:5173?debug=true

6. Test the Plugin

1. Open Front and start composing a new message
2. Add one or more attachments to your draft
3. Look for the Attachment Encryptor plugin in the composer toolbar
4. The plugin will display your attachments and allow you to encrypt them

Usage

Main Interface

• Attachment List: Shows all attachments in your draft with filename, size, and content type
• Encrypt Button: Click to encrypt individual attachments
• Encrypt All: Bulk encrypt all non-encrypted attachments
• Status Indicators: Visual badges show which files are encrypted

Debug Mode

When enabled with ?debug=true, you get access to:

• Teammate Information: Current user details
• Draft Information: Complete draft metadata
• Conversation Details: Context about the current conversation
• Attachments: Detailed view of all attachments in messages and drafts
• Technical Documentation: Architecture and implementation details
• Debug Console: Live context JSON and debug logs

Security Notes

• Use established encryption libraries (e.g., Web Crypto API)
• Implement AES-256 or similar strong encryption
• Consider key management and secure key exchange
• Validate encrypted file integrity

Development

Project Structure

src/
├── components/
│   ├── AttachmentEncryptor.tsx  # Main plugin interface
│   └── DebugPanel.tsx           # Debug information panel
├── providers/
│   └── frontContext.tsx         # Front SDK context provider
├── App.tsx                      # Main application component
├── App.css                      # Application styles
├── index.css                    # Global styles
└── main.tsx                     # Application entry point

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

SDK Methods Used

• contextUpdates.subscribe() - Real-time context updates
• downloadComposerAttachment() - Download attachment files
• updateDraft() - Update draft with encrypted attachments
• listMessages() - Retrieve conversation messages

Production Deployment

1. Build the plugin:

   npm run build

2. Deploy the dist folder to your hosting service

3. Update your Front app's plugin URL to point to your production domain

4. Test thoroughly with various file types and sizes

Troubleshooting

Plugin Not Loading

• Check that your localhost server is running
• Verify the plugin URL in your Front app settings
• Check browser console for CSP or CORS errors

Encryption Failing

• Ensure attachments have valid IDs (they're saved in the draft)
• Check that the Front SDK can access the attachment files
• Look at debug logs for specific error messages

Debug Mode Not Working

• Verify the URL includes ?debug=true
• Clear browser cache and reload the plugin

License

MIT License - feel free to use and modify for your needs.