feat: Certificate viewer

Show certificates with an interface modeled after firefox's certificate
viewer so that they can be inspected before trusting.

The current implementation assumes that each certificate has a unique
fingerprint (collisions are astronomically unlikely).

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

11 files changed, 638 insertions, 29 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index a669d28..321e6be 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -91,12 +91,30 @@
       },
       "details": {
         "title": "More info",
-        "warning": "You should only trust certificates that you've verified to be valid. Trusting invalid certificates allows attackers to steal your passwords and data.",
-        "acceptButton": {
+        "tabsLabel": "Certificates in the certificate chain",
+        "trustWarning": "You should only trust certificates that you've verified to be valid. Trusting invalid certificates allows attackers to steal your passwords and data.",
+        "trustButton": {
           "pending": "Trust this certificate temporarily",
           "rejected": "You have already rejected this certificate",
           "accepted": "You have already accepted this certificate"
-        }
+        },
+        "subject": "Subject",
+        "issuer": "Issuer",
+        "commonName": "Common Name",
+        "country": "Country",
+        "state": "State",
+        "locality": "Locality",
+        "organization": "Organization",
+        "organizationUnit": "Organization Unit",
+        "validity": "Validity",
+        "validStart": "Not Before",
+        "validExpiry": "Not After",
+        "fingerprint": "Fingerprint",
+        "fingerprintUnknown": "Unknown",
+        "miscellaneous": "Miscellaneous",
+        "serialNumber": "Serial Number",
+        "download": "Download",
+        "downloadPEM": "PEM Certificate"
       }
     },
     "crashed": {
diff --git a/packages/main/src/infrastructure/electron/impl/electronShell.ts b/packages/main/src/infrastructure/electron/impl/electronShell.ts
index be1cbe3..f7f7001 100644
--- a/packages/main/src/infrastructure/electron/impl/electronShell.ts
+++ b/packages/main/src/infrastructure/electron/impl/electronShell.ts
@@ -18,7 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { app, shell } from 'electron';
+import { writeFile } from 'node:fs/promises';
+
+import { app, dialog, shell } from 'electron';
 import { getLogger } from 'loglevel';
 
 import type MainEnv from '../../../stores/MainEnv';
@@ -34,6 +36,17 @@ const electronShell: MainEnv = {
   openAboutDialog(): void {
     app.showAboutPanel();
   },
+  async saveTextFile(filename: string, value: string): Promise<void> {
+    const result = await dialog.showSaveDialog({
+      defaultPath: filename,
+    });
+    if (result.canceled || result.filePath === undefined) {
+      log.debug('Saving file', filename, 'canceled');
+      return;
+    }
+    await writeFile(result.filePath, value, 'utf8');
+    log.debug('Saved file', filename, 'to', result.filePath);
+  },
 };
 
 export default electronShell;
diff --git a/packages/main/src/stores/MainEnv.ts b/packages/main/src/stores/MainEnv.ts
index 8923322..f9dc209 100644
--- a/packages/main/src/stores/MainEnv.ts
+++ b/packages/main/src/stores/MainEnv.ts
@@ -28,4 +28,6 @@ export default interface MainEnv {
   openURLInExternalBrowser(url: string): void;
 
   openAboutDialog(): void;
+
+  saveTextFile(filename: string, value: string): Promise<void>;
 }
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index d8f3166..1d46dc9 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -20,12 +20,13 @@
 
 import type { UnreadCount } from '@sophie/service-shared';
 import {
-  CertificateSnapshotIn,
+  type Certificate,
+  type CertificateSnapshotIn,
   defineServiceModel,
   ServiceAction,
-  ServiceStateSnapshotIn,
+  type ServiceStateSnapshotIn,
 } from '@sophie/shared';
-import { Instance, getSnapshot, cast } from 'mobx-state-tree';
+import { type Instance, getSnapshot, cast, flow } from 'mobx-state-tree';
 
 import type { ServiceView } from '../infrastructure/electron/types';
 import { getLogger } from '../utils/log';
@@ -129,6 +130,35 @@ const Service = defineServiceModel(ServiceSettings)
     toggleDeveloperTools(): void {
       self.serviceView?.toggleDeveloperTools();
     },
+    downloadCertificate: flow(function* downloadCertificate(
+      fingerprint: string,
+    ) {
+      const { state } = self;
+      if (state.type !== 'certificateError') {
+        log.warn(
+          'Tried to save certificate',
+          fingerprint,
+          'when there is no certificate error',
+        );
+        return;
+      }
+      let { certificate } = state;
+      while (
+        certificate !== undefined &&
+        certificate.fingerprint !== fingerprint
+      ) {
+        certificate = certificate.issuerCert as Certificate;
+      }
+      if (certificate === undefined) {
+        log.warn(
+          'Tried to save certificate',
+          fingerprint,
+          'which is not part of the current certificate chain',
+        );
+        return;
+      }
+      yield getEnv(self).saveTextFile('certificate.pem', certificate.data);
+    }),
   }))
   .actions((self) => {
     function setState(state: ServiceStateSnapshotIn): void {
@@ -272,6 +302,11 @@ const Service = defineServiceModel(ServiceSettings)
         case 'dismiss-all-popups':
           self.dismissAllPopups();
           break;
+        case 'download-certificate':
+          self.downloadCertificate(action.fingerprint).catch((error) => {
+            log.error('Error while saving certificate', error);
+          });
+          break;
         default:
           log.error('Unknown action to dispatch', action);
           break;
diff --git a/packages/renderer/src/components/errorPage/CertificateDetails.tsx b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
index 044cb5c..51e7920 100644
--- a/packages/renderer/src/components/errorPage/CertificateDetails.tsx
+++ b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
@@ -19,22 +19,41 @@
  */
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import type { Certificate } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
+import SingleCertificateDetails from './SingleCertificateDetails';
+import TrustCertificateDialog from './TrustCertificateDialog';
+
 const SUMMARY_ID = 'Sophie-CertificateDetails-header';
 const DETAILS_ID = 'Sophie-CertificateDetails-content';
 
+function getCertificateChain(endEntityCertificate: Certificate): Certificate[] {
+  const chain: Certificate[] = [];
+  let certificate: Certificate | undefined = endEntityCertificate;
+  while (certificate !== undefined) {
+    chain.push(certificate);
+    certificate = certificate.issuerCert as Certificate;
+  }
+  return chain;
+}
+
+const DetailsBox = styled(Box)(({ theme }) => ({
+  padding: `0 ${theme.spacing(2)}`,
+}));
+
 function CertificateDetails({
   service,
 }: {
@@ -43,8 +62,9 @@ function CertificateDetails({
   const { t } = useTranslation(undefined, {
     keyPrefix: 'error.certificateError.details',
   });
+  const [certificateIndex, setCertificateIndex] = useState(0);
 
-  const { state } = service;
+  const { id: serviceId, state } = service;
   const { type: errorType } = state;
 
   if (errorType !== 'certificateError') {
@@ -54,6 +74,22 @@ function CertificateDetails({
 
   const { certificate, trust } = state;
 
+  const chain = getCertificateChain(certificate);
+
+  if (chain.length === 0) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const id = `${serviceId}-certificateDetails`;
+
+  const trustCertificateDialog = (
+    <TrustCertificateDialog
+      trust={trust}
+      onClick={() => service.temporarilyTrustCurrentCertificate()}
+    />
+  );
+
   return (
     <Accordion
       disableGutters
@@ -67,23 +103,81 @@ function CertificateDetails({
       >
         <Typography>{t('title')}</Typography>
       </AccordionSummary>
-      <AccordionDetails>
-        <Typography sx={{ wordWrap: 'break-word' }}>
-          {JSON.stringify(certificate)}
-        </Typography>
-        <Typography mt={2}>
-          <WarningAmberIcon fontSize="small" /> <strong>{t('warning')}</strong>
-        </Typography>
-        <Box mt={1}>
-          <Button
-            disabled={trust !== 'pending'}
-            onClick={() => service.temporarilyTrustCurrentCertificate()}
-            color="error"
-            variant="outlined"
-          >
-            {t(`acceptButton.${trust}`)}
-          </Button>
-        </Box>
+      <AccordionDetails
+        sx={{
+          px: 0,
+          pt: 0,
+        }}
+      >
+        {chain.length >= 2 ? (
+          <>
+            <Tabs
+              aria-label={t<string>('tabsLabel')}
+              value={certificateIndex < chain.length ? certificateIndex : false}
+              onChange={(_event, value) => setCertificateIndex(value as number)}
+              variant="fullWidth"
+            >
+              {chain.map((member, i) => (
+                <Tab
+                  key={member.fingerprint}
+                  value={i}
+                  id={`${id}-tab-${i}`}
+                  aria-controls={`${id}-tabpanel-${i}`}
+                  label={
+                    member.subjectName === ''
+                      ? member.fingerprint
+                      : member.subjectName
+                  }
+                />
+              ))}
+            </Tabs>
+            <DetailsBox
+              sx={(theme) => ({
+                paddingTop: 1,
+                borderTop: `1px solid ${theme.palette.divider}`,
+              })}
+            >
+              {chain.map((member, i) => (
+                <div
+                  key={member.fingerprint}
+                  role="tabpanel"
+                  hidden={certificateIndex !== i}
+                  id={`${id}-tabpanel-${i}`}
+                  aria-labelledby={`${id}-tab-${i}`}
+                >
+                  {certificateIndex === i && (
+                    <>
+                      <SingleCertificateDetails
+                        detailsId={id}
+                        certificate={member}
+                        onIssuerClick={
+                          i < chain.length - 1
+                            ? () => setCertificateIndex(i + 1)
+                            : undefined
+                        }
+                        onDownloadClick={() =>
+                          service.downloadCertificate(member.fingerprint)
+                        }
+                      />
+                      {i === 0 && trustCertificateDialog}
+                    </>
+                  )}
+                </div>
+              ))}
+            </DetailsBox>
+          </>
+        ) : (
+          <DetailsBox>
+            <SingleCertificateDetails
+              detailsId={id}
+              certificate={chain[0]}
+              onDownloadClick={() =>
+                service.downloadCertificate(chain[0].fingerprint)
+              }
+            />
+            {trustCertificateDialog}
+          </DetailsBox>
+        )}
       </AccordionDetails>
     </Accordion>
   );
diff --git a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
new file mode 100644
index 0000000..107d9f1
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
@@ -0,0 +1,369 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import AttachmentIcon from '@mui/icons-material/Attachment';
+import Link from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import type { Certificate, CertificatePrincipal } from '@sophie/shared';
+import type { TFunction } from 'i18next';
+import { observer } from 'mobx-react-lite';
+import React, { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const SingleCertificateDetailsRoot = styled('table')(({ theme }) => ({
+  width: '100%',
+  borderSpacing: `${theme.spacing(2)} 0`,
+}));
+
+const Header = styled('th')({
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  verticalAlign: 'top',
+});
+
+const SectionHeader = styled(Header)(({ theme }) => ({
+  padding: `${theme.spacing(2)} 0`,
+}));
+
+const SubHeader = styled(Header)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+
+const Cell = styled('td')({
+  verticalAlign: 'top',
+});
+
+function Section({ id, label }: { id: string; label: string }): JSX.Element {
+  return (
+    <tr>
+      <SectionHeader id={id} scope="colgroup">
+        {label}
+      </SectionHeader>
+      <Cell aria-hidden="true" />
+    </tr>
+  );
+}
+
+function Row({
+  id,
+  label,
+  headers,
+  children,
+}: {
+  id: string;
+  label: string;
+  headers: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <tr>
+      <SubHeader id={id} scope="row">
+        {label}
+      </SubHeader>
+      <Cell headers={`${headers} ${id}`}>{children}</Cell>
+    </tr>
+  );
+}
+
+function OptionalRow({
+  id,
+  label,
+  value,
+  headers,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  headers: string;
+}): JSX.Element | null {
+  if (value === '') {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  return (
+    <Row id={id} label={label} headers={headers}>
+      {value}
+    </Row>
+  );
+}
+
+function DateTimeRow({
+  id,
+  label,
+  value,
+  locales,
+  headers,
+}: {
+  id: string;
+  label: string;
+  value: number;
+  locales: readonly string[];
+  headers: string;
+}): JSX.Element {
+  // Electron provides `validStart` and `validExpiry` in seconds,
+  // but `Date` expects milliseconds.
+  const date = new Date(value * 1000);
+  const dateStr = new Intl.DateTimeFormat([...locales], {
+    dateStyle: 'long',
+    timeStyle: 'long',
+  }).format(date);
+
+  return (
+    <Row id={id} label={label} headers={headers}>
+      {dateStr}
+    </Row>
+  );
+}
+
+function Principal({
+  id,
+  label,
+  principal: {
+    country,
+    state,
+    locality,
+    organizations,
+    organizationUnits,
+    commonName,
+  },
+  t,
+  onIssuerClick,
+}: {
+  id: string;
+  label: string;
+  principal: CertificatePrincipal;
+  t: TFunction;
+  onIssuerClick?: (() => void) | undefined;
+}): JSX.Element {
+  return (
+    <>
+      <Section id={id} label={label} />
+      <OptionalRow
+        id={`${id}-country`}
+        label={t<string>('country')}
+        value={country}
+        headers={id}
+      />
+      <OptionalRow
+        id={`${id}-state`}
+        label={t<string>('state')}
+        value={state}
+        headers={id}
+      />
+      <OptionalRow
+        id={`${id}-locality`}
+        label={t<string>('locality')}
+        value={locality}
+        headers={id}
+      />
+      {/*
+        eslint-disable react/no-array-index-key --
+        These entries can freely contain repetitions, so we can only tell them apart by index.
+      */}
+      {organizations.map((value, i) => (
+        <OptionalRow
+          key={i}
+          id={`${id}-organization-${i}`}
+          label={t<string>('organization')}
+          value={value}
+          headers={id}
+        />
+      ))}
+      {organizationUnits.map((value, i) => (
+        <OptionalRow
+          key={i}
+          id={`${id}-organizationUnit-${i}`}
+          label={t<string>('organizationUnit')}
+          value={value}
+          headers={id}
+        />
+      ))}
+      {/* eslint-enable react/no-array-index-key */}
+      {commonName !== '' && (
+        <Row
+          id={`${id}-commonName`}
+          label={t<string>('commonName')}
+          headers={id}
+        >
+          {onIssuerClick === undefined ? (
+            commonName
+          ) : (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid -- This is a `button`.
+            <Link
+              component="button"
+              variant="body1"
+              onClick={onIssuerClick}
+              sx={{ verticalAlign: 'baseline' }}
+            >
+              {commonName}
+            </Link>
+          )}
+        </Row>
+      )}
+    </>
+  );
+}
+
+Principal.defaultProps = {
+  onIssuerClick: undefined,
+};
+
+function parseFingerprint(fingerprint: string): {
+  algorithm: string | undefined;
+  formattedValue: string;
+} {
+  const separatorIndex = fingerprint.indexOf('/');
+  if (separatorIndex <= 0) {
+    return {
+      algorithm: undefined,
+      formattedValue: fingerprint,
+    };
+  }
+  return {
+    algorithm: fingerprint.slice(0, separatorIndex).toUpperCase(),
+    formattedValue: fingerprint.slice(separatorIndex + 1),
+  };
+}
+
+function Fingerprint({
+  id,
+  label,
+  fallbackAlgorithmLabel,
+  value,
+}: {
+  id: string;
+  label: string;
+  fallbackAlgorithmLabel: string;
+  value: string;
+}) {
+  const { algorithm, formattedValue } = parseFingerprint(value);
+  return (
+    <>
+      <Section id={id} label={label} />
+      <OptionalRow
+        id={`${id}-fingerprint`}
+        label={algorithm ?? fallbackAlgorithmLabel}
+        headers={id}
+        value={formattedValue}
+      />
+    </>
+  );
+}
+
+function SingleCertificateDetails({
+  detailsId,
+  certificate: {
+    subject,
+    issuer,
+    validStart,
+    validExpiry,
+    fingerprint,
+    serialNumber,
+  },
+  onIssuerClick,
+  onDownloadClick,
+}: {
+  detailsId: string;
+  certificate: Certificate;
+  onIssuerClick?: (() => void) | undefined;
+  onDownloadClick: () => void;
+}): JSX.Element {
+  const {
+    t,
+    i18n: { languages },
+  } = useTranslation(undefined, {
+    keyPrefix: 'error.certificateError.details',
+  });
+
+  const id = `${detailsId}-${fingerprint}-certificate`;
+
+  return (
+    <SingleCertificateDetailsRoot>
+      <tbody>
+        <Principal
+          id={`${id}-subject`}
+          label={t<string>('subject')}
+          principal={subject}
+          t={t}
+        />
+        <Principal
+          id={`${id}-issuer`}
+          label={t<string>('issuer')}
+          principal={issuer}
+          t={t}
+          onIssuerClick={onIssuerClick}
+        />
+        <Section id={`${id}-validity`} label={t<string>('validity')} />
+        <DateTimeRow
+          id={`${id}-validity-validStart`}
+          label={t<string>('validStart')}
+          value={validStart}
+          locales={languages}
+          headers={`${id}-validity`}
+        />
+        <DateTimeRow
+          id={`${id}-validity-validExpiry`}
+          label={t<string>('validExpiry')}
+          value={validExpiry}
+          locales={languages}
+          headers={`${id}-validity`}
+        />
+        <Section
+          id={`${id}-miscellaneous`}
+          label={t<string>('miscellaneous')}
+        />
+        <OptionalRow
+          id={`${id}-miscellaneous-serialNumber`}
+          label={t<string>('serialNumber')}
+          value={serialNumber}
+          headers={`${id}-miscellaneous`}
+        />
+        <Row
+          id={`${id}-miscellaneous-download`}
+          label={t<string>('download')}
+          headers={`${id}-miscellaneous`}
+        >
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- This is a `button`. */}
+          <Link
+            component="button"
+            variant="body1"
+            onClick={onDownloadClick}
+            sx={{ verticalAlign: 'baseline' }}
+          >
+            <AttachmentIcon fontSize="inherit" /> {t('downloadPEM')}
+          </Link>
+        </Row>
+        <Fingerprint
+          id={`${id}-fingerprint`}
+          label={t<string>('fingerprint')}
+          fallbackAlgorithmLabel={t<string>('fingerprintUnknown')}
+          value={fingerprint}
+        />
+      </tbody>
+    </SingleCertificateDetailsRoot>
+  );
+}
+
+SingleCertificateDetails.defaultProps = {
+  onIssuerClick: undefined,
+};
+
+export default observer(SingleCertificateDetails);
diff --git a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
new file mode 100644
index 0000000..630cbe0
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function TrustCertificateDialog({
+  trust,
+  onClick,
+}: {
+  trust: 'pending' | 'rejected' | 'accepted';
+  onClick: () => void;
+}): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'error.certificateError.details',
+  });
+
+  return (
+    <>
+      <Typography mt={2}>
+        <WarningAmberIcon fontSize="inherit" />{' '}
+        <strong>{t('trustWarning')}</strong>
+      </Typography>
+      <Box mt={1}>
+        <Button
+          disabled={trust !== 'pending'}
+          onClick={onClick}
+          color="error"
+          variant="outlined"
+        >
+          {t(`trustButton.${trust}`)}
+        </Button>
+      </Box>
+    </>
+  );
+}
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index 4510ec0..dcaf96e 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -123,6 +123,12 @@ const Service = defineServiceModel(ServiceSettings)
           action: 'dismiss-all-popups',
         });
       },
+      downloadCertificate(fingerprint: string): void {
+        dispatch({
+          action: 'download-certificate',
+          fingerprint,
+        });
+      },
     };
   })
   .actions((self) => ({
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index e3da192..b1d05f8 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -32,7 +32,10 @@ export { ThemeSource } from './schemas/ThemeSource';
 
 export { Translation } from './schemas/Translation';
 
-export type { CertificateSnapshotIn } from './stores/Certificate';
+export type {
+  CertificatePrincipal,
+  CertificateSnapshotIn,
+} from './stores/Certificate';
 export { default as Certificate } from './stores/Certificate';
 
 export type {
diff --git a/packages/shared/src/schemas/ServiceAction.ts b/packages/shared/src/schemas/ServiceAction.ts
index cfaba08..c0f07d6 100644
--- a/packages/shared/src/schemas/ServiceAction.ts
+++ b/packages/shared/src/schemas/ServiceAction.ts
@@ -67,6 +67,10 @@ export const ServiceAction = /* @__PURE__ */ (() =>
     z.object({
       action: z.literal('dismiss-all-popups'),
     }),
+    z.object({
+      action: z.literal('download-certificate'),
+      fingerprint: z.string().nonempty(),
+    }),
   ]))();
 
 /*
diff --git a/packages/shared/src/stores/Certificate.ts b/packages/shared/src/stores/Certificate.ts
index 8b2d007..363406d 100644
--- a/packages/shared/src/stores/Certificate.ts
+++ b/packages/shared/src/stores/Certificate.ts
@@ -30,12 +30,20 @@ const CertificatePrincipal = /* @__PURE__ */ (() =>
     country: types.string,
   }))();
 
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+export interface CertificatePrincipal
+  extends Instance<typeof CertificatePrincipal> {}
+
 const Certificate = /* @__PURE__ */ (() =>
   types.model('Certificate', {
     data: types.string,
     issuer: CertificatePrincipal,
     issuerName: types.string,
     issuerCert: types.maybe(types.late((): IAnyModelType => Certificate)),
+    subject: CertificatePrincipal,
     subjectName: types.string,
     serialNumber: types.string,
     validStart: types.number,