Complete Guide to Code Signing for Electron.js Applications on macOS

Code signing is an essential process for distributing Electron.js applications on macOS. It ensures your app meets Apple’s security requirements and is trusted by end users. This detailed guide will walk you through obtaining, configuring, and using a macOS code signing certificate for your Electron.js app, as well as best practices and cost estimates.

---

Why Code Signing is Important for macOS Apps

Code signing offers several advantages for Electron.js applications distributed on macOS:

1. Prevent Security Warnings: Unsigned apps will display a warning, preventing installation unless the user manually overrides security settings.
2. Meet Apple’s Requirements: Apps distributed outside the Mac App Store must be signed and optionally notarized to avoid warnings.
3. Build User Trust: Signed apps display verified developer information, enhancing credibility.
4. Ensure Integrity: Guarantees the app hasn’t been tampered with after being signed.

---

Types of Developer Certificates for macOS

To sign an Electron.js app for macOS, you’ll need to obtain certificates from Apple through the Apple Developer Program:

1. Developer ID Application Certificate

• Used for distributing apps outside the Mac App Store.
• Required for signing apps that will be notarized.
• Associated with your Apple Developer account.

2. Mac App Store Certificates

• Used for apps distributed via the Mac App Store.
• Requires separate certificates for:
  • Development: For testing and debugging.
  • Distribution: For deploying to the Mac App Store.

Certificate Type	Cost (Per Year)	Use Case
Developer ID Application	$99	Distribution outside App Store
Mac App Store Certificates	Included in $99	Distribution via App Store

---

Step-by-Step Guide to Code Signing an Electron.js App for macOS

Step 1: Enroll in the Apple Developer Program

To obtain a code signing certificate, you must join the Apple Developer Program:

1. Visit Apple Developer Program.
2. Sign in with your Apple ID.
3. Complete enrollment and pay the annual $99 fee.

---

Step 2: Generate a Signing Certificate

1. Open Xcode on your macOS system.
2. Go to Xcode > Preferences > Accounts.
3. Add your Apple ID if not already added.
4. Select your team and click Manage Certificates.
5. Click the “+” button and create a Developer ID Application Certificate (for outside the App Store).

Alternatively, use the Apple Developer Portal:

1. Visit the Certificates, Identifiers & Profiles.
2. Request a new certificate.
3. Download and install the certificate on your Mac.

---

Step 3: Prepare Your Electron.js App for Signing

Install the required dependency:

npm install electron-builder --save-dev

Update the package.json file with the following build configuration:

Example Configuration for macOS Code Signing

{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyElectronApp",
    "files": [
      "dist/**/*",
      "node_modules/**/*"
    ],
    "mac": {
      "target": ["dmg", "zip"],
      "category": "public.app-category.utilities",
      "icon": "build/icon.icns",
      "identity": "Developer ID Application: Your Name (Team ID)"
    },
    "afterSign": "scripts/notarize.js" // Optional: for notarization
  }
}

Key fields:

• identity: Matches the name of your Developer ID Application certificate.
• icon: Path to your app’s .icns file.

---

Step 4: Sign Your Application

Electron apps can be signed using electron-builder or manually via codesign:

Using electron-builder

Build and sign your app in one step:

npm run build

This command automatically uses your Developer ID Application certificate to sign the app.

Using codesign

Manually sign the app binary:

codesign --deep --force --verify --verbose \
--sign "Developer ID Application: Your Name (Team ID)" \
/path/to/your/app/MyElectronApp.app

Verify the signature:

codesign --verify --verbose /path/to/your/app/MyElectronApp.app

---

Step 5: Notarize Your Application (For Outside App Store Distribution)

Notarization ensures macOS recognizes your app as safe. Without notarization, users will encounter warnings when opening the app.

1. Prepare for Notarization

Compress your app:

cd /path/to/your/app/
zip -r MyElectronApp.zip MyElectronApp.app

2. Submit for Notarization

Submit your app to Apple:

xcrun altool --notarize-app \
--primary-bundle-id "com.example.myapp" \
--username "your-apple-id@example.com" \
--password "your-app-specific-password" \
--file MyElectronApp.zip

• Replace your-app-specific-password with an app-specific password generated in your Apple ID account.

Check notarization status:

xcrun altool --notarization-info <RequestUUID> \
--username "your-apple-id@example.com" \
--password "your-app-specific-password"

3. Staple the Notarization Ticket

Attach the notarization ticket to your app:

xcrun stapler staple /path/to/your/app/MyElectronApp.app

---

Step 6: Test Your Application

1. Install and open the signed app on a macOS system.
2. Ensure no security warnings appear.
3. Test functionality to confirm integrity.

---

Best Practices for macOS Code Signing

1. Always Notarize for Distribution Outside the App Store: Avoid user warnings by ensuring your app is notarized.
2. Timestamp Your Signatures: This ensures signatures remain valid even after your certificate expires.
3. Use CI/CD for Automation: Automate the signing and notarization process in your pipeline for efficiency.
4. Test Across macOS Versions: Verify your app’s compatibility and trustworthiness on multiple macOS versions.

---

Conclusion

Code signing is an essential step for distributing Electron.js applications on macOS. By following this guide, you’ll ensure your app is secure, trusted, and compliant with Apple’s requirements. Whether you’re targeting the Mac App Store or distributing directly, proper code signing practices will enhance your app’s credibility and user experience.

Don’t miss our Complete Guide to Code Signing for Electron.js Applications on Windows for a step-by-step approach to signing your app.