Making an Electron App with Ember JS Part #2.5: MacOS Notarisation

This is a quick, cheeky part two-point-five of the blog post series “Making an Electron App with Ember JS” where I go over how I built my app Snipline for the web, Mac, Windows, and Linux.

With the upcoming update to MacOS, 10.15 Catalina, it’s important to notarise your app or your users will not be able to install it! I did not go over this in the previous post but felt it needed addressing.

What is notarisation?

Notarisation is a new feature to the MacOS ecosystem which is required for apps distributed outside of the App Store. This feature allows Apple to scan your software for malicious content so that users can be confident that your app is safe to use. Not only this, but if your signing key is exposed, you can contact Apple to disable unauthorised versions of your app from being opened.

You can read more about this on the Apple Developer website.

Notarising our app

There a few changes that need to be made to notarise our app.

First, we need add electron-notorize to the package.json

+ "electron-notarize": "^0.1.1"

Next, in our ember-electron/electron-forge.config.js file we need to add the following code changes.

+ const { notarize } = require('electron-notarize');
// ...

"osxSign": {
-     "identity": getCodesignIdentity()
+    "identity": getCodesignIdentity(),
+    "gatekeeper-assess": false,
+     "hardened-runtime": true,
+     "entitlements": path.join(rootPath, "ember-electron", "resources-darwin", "entitlements.plist"),
+     "entitlements-inherit": path.join(rootPath, "ember-electron", "resources-darwin", "entitlements.plist")
},
// ...
+  "hooks": {
+    postPackage: async function () {
+      if (process.platform !== 'darwin') {
+          console.log('Skipping notarization - not building for Mac');
+          return;
+      }
+
+      console.log('Notarizing...');
+
+      await notarize({
+          appBundleId: getBundleId(),
+          appPath: path.join(rootPath, "electron-out", "Shopper-darwin-x64", "Shopper.app"),
+          appleId: process.env.APPLE_ID,
+          appleIdPassword: process.env.APPLE_ID_PASSWORD
+      }); 
+    }

What do these changes do? Firstly, gatekeeper needs to be disabled for this to work correctly, and we need to specify an entitlements.plist file which we’ll create next. The postPackage hook deals with the notarisation. We check if we're compiling for MacOS, and then run the notarisation process.

You will need to change the Shopper references to your own app name.

We’re also specifying two new environment variables that will need to be passed to the build command, APPLE_ID and APPLE_ID_PASSWORD. This password is app specific and can be generated from your account at https://appleid.apple.com  - do not use your real Apple ID password here!. See these instructions for more details https://support.apple.com/en-us/HT204397

Next, it’s time to create the entitlements file, create ember-electron/resources-darwin/entitlements.plist and add the following

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
        <true/>
    </dict>
</plist>

Now we can build the new release. Note that this may take some time, as the app gets checked on Apple’s servers. Remember to change the environment variables to your own.

env CODESIGN_IDENTITY="Developer ID Application: <Name> (<ID>)" env BUNDLE_ID="io.exampledomain.desktop" ELECTRON_ENV=production env APPLE_ID_PASSWORD=<password> env APPLE_ID=<appleid> ember electron:make --environment=production

The dmg file

Code signing is no longer needed for .dmg files as Apple now checks the .app file within it. With this in mind, we can no longer use the create-dmg Javascript package as it automatically finds your certificate and applies it to the .dmg build.

Instead, we can use electron-installer-dmg which is already in our dependencies.

# Unzip the generated app
unzip Shopper-darwin-x64-x.x.x.zip

# Generate the dmg installer
./node_modules/.bin/electron-installer-dmg ./electron-out/make/Shopper.app Shopper --out=./electron-out/make/ --icon=./electron-assets/shopper.icns --icon-size=100

That’s all there is to it!

In the next chapter we’ll take a look at building for Linux!