Background

In the last 3 weeks, we just turned the personal Apple Developer membership into a organization membership, also changed the name as “Boring Design LLC”. I am working on replace old certificates and with new ones.

I just realized that I nearly forgot how to get the new certificates for electron app signing, so here is a cheat sheet for that, maybe it will help me again in the future.

Before Start

If a application is not signed, macOS will show a warning dialog when the app is opened, and the user needs to right-click the app and select “Open” to open the app. If the app is signed with a Apple Developer certificate, the app could be opened by double-clicking.

There is an app called Apprancy, to check the signing status (and more) of an app, like this:

Get the Certificates

We are going to use “electron/osx-sign” to sign the app, it will look up the correct certificate from keychain, so what we need to do is to get prepared with the certificates, download them from Apple Developer website, and install them into the keychain.

  1. Prepare a Certificate Signing Request(CSR) Apple requires a CSR to generate certificates, we could generate it from Keychain Access,:

No need to tune the settings, and remember to check the “Save to disk” option.

  1. Generate and Download Certificate from Apple Developer

Login into Apple Developer -> Account, then jump to Certificates

Click the “+” button to create a new certificate, and notice that we should create 2 certificates, one for “Developer ID Application” and another for “Apple Distribution”.

“Developer ID Application” is used for distributing the app outside of Mac App Store, and “Apple Distribution” is used for distributing the app in Mac App Store.

Download the certificates and install them into the keychain.

Setup Signing

By default, “electron/osx-sign” will look up the correct certificate from keychain, so we don’t need to specify the certificate explicitly. But we could specify the certificate explicitly by setting the identity option in the osxSign option if we have multiple certificates in the keychain.

1
2
3
4
5
{
  "osxSign": {
    "identity": "Developer ID Application: Boring Design LLC (XXXXXXXXXX)"
  }
}

Option reference: https://github.com/electron/osx-sign/blob/main/src/types.ts

Setup Notarize

Notarization is a process to submit the app to Apple for scanning, and Apple will return a ticket if the app is notarized successfully. We could use “electron/notarize” to notarize the app.

I use the following options:

1
2
3
4
5
6
osxNotarize: {
  tool: 'notarytool',
  appleId: process.env.APPLE_ID || "",
  appleIdPassword: process.env.APPLE_PASSWORD || "",
  teamId: process.env.APPLE_TEAM_ID || ""
}

and it requires:

  • Apple ID: your apple developer account email
  • Apple Password: the app-specific password, generate it by following the guide
  • Apple Team ID: the team id, could be found in Apple Developer -> Membership

It could also be used inside the CI environment, like GitHub Actions, by setting the environment variables.

Pack it

After setting up the signing and notarization, we could finally get a signed and notarized app:

That’s perfect, let’s ship it!