Running your Phoenix app with HTTPS in development can help you test features like secure cookies and redirects. Here's how to generate a self-signed certificate, import it into your macOS Login keychain, and update your Phoenix config for secure local development.

Step 1: generate a self-signed certificate

Phoenix provides a handy task to generate a self-signed certificate:

mix phx.gen.cert

This creates two files in priv/cert/:

priv/cert/selfsigned.pem        # Certificate
priv/cert/selfsigned_key.pem    # Private key

Step 2: import the certificate into your login keychain

To use this cert in your browser without warnings, you need to trust it. The security command works best with a .p12 bundle of the key and cert.

First, create a .p12 bundle by executing:

openssl pkcs12 -export \
  -inkey priv/cert/selfsigned_key.pem \
  -in priv/cert/selfsigned.pem \
  -out priv/cert/selfsigned.p12 \
  -name "Phoenix Dev Cert"

When prompted, enter a password (e.g., phoenixpass).

Then import the certificate and key in your keychain:

security import priv/cert/selfsigned.p12 \
  -k ~/Library/Keychains/login.keychain-db \
  -P phoenixpass \
  -T /usr/bin/codesign \
  -T /usr/bin/security

Step 3: configure Phoenix for HTTPS

Update config/dev.exs to enable HTTPS using the generated certificate and key:

config :your_app, YourAppWeb.Endpoint,
  https: [
    port: 4001,
    cipher_suite: :strong,
    keyfile: "priv/cert/selfsigned_key.pem",
    certfile: "priv/cert/selfsigned.pem"
  ],
  http: [port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true

Now, you can run your app with:

mix phx.server

And access it securely at https://localhost:4001.