Using SSL (Secure Origin) with Live Reload feature in Capacitor

Capacitor
1

I am integrating Auth0 into my Ionic 6 Angular app, which requires the library to be run on a server with a secure origin (auth0-spa-js/FAQ.md at 451956f5615bdd7e8fe3c313dbe30d1e31b855f1 · auth0/auth0-spa-js · GitHub). When I run the ionic serve in development mode with live reload, I cannot get the server to run securely on iOS devices.

I have been running ionic capacitor run ios -l --external --ssl to launch an https server, however xcode does not seem to allow a self-signed certificate. I have tried to add the certificate generated by ionic ssl generate to my iOS device without any luck.

Everything works if I run a full build and deploy, but I can’t connect to a development server as xcode outputs the following error message:

Error: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “X.X.X.X” which could put your confidential information at risk.

Has anyone gotten ssl working with the livereload feature of Ionic and Capacitor for iOS?

2

I’ve achieved it by using mkcert: GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like. (replace 192.168.1.xxx with your local ip):

mkcert -install
mkcert -key-file ./ssl/key.pem -cert-file ./ssl/cert.pem 192.168.1.xxx localhost 127.0.0.1 ::1

In an ionic app I’m not sure on how the certificates can be used with ionic capacitor run, I’m pretty sure they must be somewhere in your project, you could try to find anything with .pem extension and replace them. In stencil is pretty straight forward (maybe it helps), in your stencil.config.ts:

export const config: Config = {
    globalScript,
    globalStyle: 'src/global/app.css',
    outputTargets: [{
        baseUrl,
        type: 'www',
        serviceWorker: null,
    }],
    devServer: {
        reloadStrategy: 'pageReload',
        https: {
            cert: readFileSync('./ssl/cert.pem', 'utf-8'),
            key: readFileSync('./ssl/key.pem', 'utf-8'),
        },
    },
};

In ios I had to install the CA and fully trust it. So I’ve started a live-server which served the rootCA.pem and then I can download from mobile device:

cp "$(mkcert -CAROOT)"/rootCA.pem www
live-server www
  • on mobile device visit 192.168.1.xxx:8080/rootCA.pem
  • download the certificate
  • visit Settings > General > Profile > mkcert … > Install
  • navigate to “General” > “About” > “Certificate Trust Settings”. In the section “Enable Full Trust for Root Certificates”, enable your root certificate.
  • restart app

Another way would be to create your own CA with openssl, then create a certificate signed by your CA, use this signed certificate with capacitor and install your CA on your device. This process is quite more complex and not as straight forward as with mkcert, which basically does this but simplified.

3

The canonical solution is in the docs right here: Live Reload | Ionic Documentation

ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'