login fails with self-signed certificate

[hourdays]

I get the following error when trying to log in:
{“message”:“Error: self signed certificate in certificate chain”}

Here are the steps I followed:

1. How to Create Your Own SSL Certificate Authority for Local HTTPS Development (https://deliciousbrains.com/ssl-certificate-authority-for-local-https-development/) except that I replace "dev.mergebot.com" by "localhost" and I remove "DNS.2 = dev.mergebot.com.192.168.1.19.xip.io"
2. I add the myCA.pem in my macOS Mojave (10.14.6) Keychain system keychain and set trust to "Always trust"
3. I generate the localhost CSR private key and CRT signed by myCA thus end up with the following files (in order of creation): myCA.key, myCA.pem, localhost.key, localhost.csr, localhost.ext and finally localhost.crt (and also myCA.srl).
4. I copy localhost.key and localhost.crt to grove middletier and rename them to server.key and server.crt.
5. I add the following lines in middletier .env file:

GROVE_HTTPS_ENABLED_IN_BACKEND=true
GROVE_ENABLE_HTTPS_IN_MIDDLETIER=true
GROVE_MIDDLETIER_SSLCERT=server.crt
GROVE_MIDDLETIER_SSLKEY=server.key

5. In MarkLogic Server, I create a Certificate Template named "localhost" and organizationName = "MarkLogic Corporation" then click ok then go to the "Import" tab and upload the localhost.crt and localhost.key files generated at step 3.
6. In MarkLogic Server, I set my Data Hub FINAL DB application server to use SSL certificate "localhost" as well as set "ssl require client certificate" to false and "ssl client issuer authority verification" to false (I tried to set them both to true and loaded myCA.pem through Security > Certificate Authorities but it did not work)
7. I add the following lines in ui .env file:

VUE_APP_ENABLE_HTTPS_IN_FRONTEND=true
VUE_APP_HTTPS_ENABLED_IN_MIDDLETIER=true

8. I also use the following vue.config.js:

const fs = require('fs');

module.exports = {
  "lintOnSave": false,
  "configureWebpack": {
    "devtool": "eval-source-maps"
  },
  "devServer": {
    disableHostCheck: true, // to fix Invalid Host header on production server (see https://github.com/vuejs-templates/webpack/issues/1205)
    "https": {
      key: fs.readFileSync('../middletier/server.key'),
      cert: fs.readFileSync('../middletier/server.crt'),
      ca: fs.readFileSync('../certificates/localhost/myCA.pem')
    },
    "proxy": {
      "/api": {
        "target": "https://localhost:9003",
        "secure": false
      },
      "/v1": {
        "target": "https://localhost:9003",
        "secure": false
      }
    }
  },
  "transpileDependencies": [
    "vuetify"
  ]
}

Note that I tried to use "secure":true but I ended up with error UNABLE_TO_VERIFY_LEAF_SIGNATURE even though I have a reference to ca certificate... obviously not enough so it may require npm install ssl-root-cas as mentioned here: https://stackoverflow.com/questions/20082893/unable-to-verify-leaf-signature.
Another approach is to build and serve static files from middletier as mentioned here marklogic-community/grove-cli#12 but I get a different look and feel for some unknown reason so I commented out #GROVE_UI_BUILD_PATH=../ui/dist in middletier .env file.

Anyway in the end, adding NODE_TLS_REJECT_UNAUTHORIZED=0 to middletier .env allowed me to work around the issue so as a temporary solution although It's not secure.
I guess that at least the login password is not sent unencrypted especially since all of the above is working with SSO through LDAP integration (BTW I did not have to do anything special on the LDAP config side).

N.B.: I added mlFinalSimpleSsl=true to gradle.properties in order to be able to use the QuickStart against Final DB.