How to Sign DMG Files When Building an Electron App?

When building an Electron app for macOS, distributing your application as a DMG (Disk Image) file is a common practice. Signing the DMG file is a crucial step in the release process to guarantee the integrity and authenticity of your app. This article explains how to sign DMG files correctly when building an Electron application.

Why Sign DMG Files?

Signing macOS applications and their distribution packages is a security measure that helps protect users from malware and tampered software. macOS Gatekeeper uses these signatures to verify that the app comes from a trusted developer and has not been altered since it was signed. Unsigned or improperly signed DMG files may trigger warnings or even be blocked from running on users' systems.

Prerequisites for Signing DMG Files

Before starting, ensure you have the following:

• A valid Apple Developer account.
• A Developer ID Application certificate installed in your macOS Keychain. This certificate is used to sign the app and the DMG.
• Xcode command-line tools installed (xcode-select --install).
• Electron-builder or a similar packaging tool configured for your app.

Setting Up Your Electron Project for Signing

Electron-builder is one of the most popular tools to package and sign Electron apps. It supports automatic code signing and DMG signing when configured properly.

Installing Electron-builder

If you haven’t installed electron-builder, add it to your project:

BashCopy code

Or if you use Yarn:

BashCopy code

Configuring package.json

In your package.json file, add a build configuration section specifying the macOS signing options. Here is a simple example:

JsonCopy code

• Replace "Developer ID Application: Your Name (TEAMID)" with the exact name of your Developer ID Application certificate.
• The dmg.sign option enables signing of the DMG.
• dmg.contents configures the layout of the DMG window.

Signing the Electron Application

Electron-builder signs the app automatically during the build process if the identity is set correctly. To build and sign your app, run:

BashCopy code

This command builds your macOS app, signs the application bundle, and creates a signed DMG.

Manually Signing the DMG File

Sometimes, you may need to sign the DMG file manually, especially if you are handling the packaging steps yourself or using custom scripts.

Step 1: Create the DMG File

If you don’t have a DMG yet, create one using electron-builder or tools like appdmg.

Step 2: Sign the DMG File

Use the codesign utility available on macOS to sign the DMG:

BashCopy code

• --sign specifies the signing identity.
• --timestamp adds a secure timestamp to the signature.
• --force overwrites any existing signature.

Step 3: Verify the Signature

After signing, verify the signature with:

BashCopy code

This will confirm whether the DMG is recognized as signed by Gatekeeper.

Common Issues and Troubleshooting

Identity Not Found

If you receive an error about the signing identity not found, check that the Developer ID Application certificate is installed in your keychain and matches the name you provided.

Gatekeeper Still Blocks the DMG

If macOS still blocks the DMG, make sure both the app bundle inside the DMG and the DMG itself are signed. Unsigned components inside the DMG can cause Gatekeeper to reject the package.

Timestamp Missing

Lack of timestamp can cause your signature to become invalid after the certificate expires. Always use the --timestamp option during signing.

Signing DMG files for Electron apps is vital for smooth distribution and user trust on macOS. Using tools like electron-builder can simplify the process by automating the signing of both the app and the DMG. Alternatively, manual signing steps using codesign provide flexibility when needed. Proper signing helps your application pass Gatekeeper checks and provides a professional distribution experience for your users.