How to Serve a Local App over HTTPS with ngrok

The short answer

Run your app locally as usual, then start an ngrok HTTP tunnel pointed at the app's port, for example ngrok http 3000. ngrok gives you a public forwarding address that begins with https. Your local app can keep running over plain HTTP. ngrok handles the encrypted connection between the visitor's browser and its own servers, then forwards the traffic through the tunnel to your machine.

Some readers mean something else by "ngrok http to https." Two common variants change the steps, and both are covered below. In the first, your local app already serves HTTPS and you want ngrok to connect to it that way. In the second, you want plain-HTTP visitors moved to HTTPS. If you only need an HTTPS link to a local HTTP app, the basic command is enough.

Why HTTPS matters for camera and microphone access

Modern browsers expose the camera and microphone only to pages loaded in a secure context. A secure context generally means a page served over HTTPS, or a page opened on the same machine through localhost. If you open your local app from another device on your network over plain HTTP, such as a phone, the browser typically refuses camera and microphone requests or doesn't offer them at all. An ngrok HTTPS address meets the secure-context requirement, so other devices can test camera and microphone features.

Meeting the secure-context requirement is only the first step. HTTPS lets the browser ask for permission. The user still has to grant access. After that, the app still has to capture video or audio successfully, and capture working doesn't mean picture or sound quality is good. Test each of these separately.

Step by step

• 1. Install ngrok and sign in to your ngrok account. Current versions require an authtoken from your account dashboard before tunnels will start.
• 2. Save the authtoken once with the config command shown below.
• 3. Start your local app and note the port it listens on.
• 4. In a separate terminal, run ngrok http followed by that port number.
• 5. In the ngrok terminal output, find the forwarding line and copy the address that begins with https.
• 6. Open that HTTPS address in the browser or on the device you want to test.

ngrok config add-authtoken YOUR_AUTHTOKEN
ngrok http 3000

Replace 3000 with your app's actual port. Keep the ngrok terminal open while you test. Closing it or pressing Ctrl+C ends the tunnel, and the address stops working.

If your local app already uses HTTPS

By default, ngrok connects to your local app over plain HTTP. If the app accepts only HTTPS, give ngrok the full local address including the https scheme, instead of only a port number. ngrok then uses HTTPS for the local connection as well. Local apps often use self-signed certificates. In that case, check the ngrok documentation for your version to see how it handles certificate verification on the local side.

If you want HTTP visitors moved to HTTPS

Recent ngrok versions give HTTP tunnels an HTTPS public address by default. Older versions and some configurations also offered a plain-HTTP address. If you see one, share only the HTTPS address, because a page loaded over plain HTTP won't count as a secure context. The flags that control which schemes are offered have changed between versions. Check the help output of your installed version, by running ngrok http --help, before you rely on a specific option.

Verify the result

• Make sure the address bar shows the HTTPS address and that the browser doesn't show a certificate warning for the page.
• Open the browser's developer console on the page and run the check below. It should return true.
• Trigger your app's camera or microphone feature and confirm that the browser shows a permission prompt.
• After you grant access, confirm a live video preview appears or the microphone level responds when you speak. Then judge picture and sound quality separately.

window.isSecureContext

Free ngrok plans may show an ngrok notice page before visitors reach your app. That page belongs to ngrok, and continuing past it loads your app normally.

Common problems

• The page loads but shows an invalid host or blocked request error: some development servers reject requests addressed to an unfamiliar hostname. Either add the ngrok hostname to your dev server's allowed-hosts setting, or run ngrok with --host-header=rewrite so the request arrives addressed to your local host.
• ngrok reports an authentication error: the authtoken is missing or wrong. Run the config command again with the token from your dashboard.
• The tunnel connects but you get a connection error: your local app isn't running, or it listens on a different port than the one you gave ngrok.
• No camera prompt appears even over HTTPS: the site's camera permission may have been blocked earlier. Reset it in the browser's site settings. Also check that the operating system allows the browser to use the camera.

Protecting your data while the tunnel is open

An ngrok address is public. Anyone who has it can reach your local app while the tunnel runs. HTTPS encrypts traffic in transit, but it doesn't limit who can visit. Keep these risks in mind when the app handles camera or microphone streams.

• Share the address only with the people who are testing.
• Add a login. ngrok supports access controls such as basic authentication on some plans and versions, so check what your account offers.
• Don't expose apps that contain real personal data, recordings or credentials.
• Stop the tunnel as soon as testing is finished.

What this guide does not cover

No version-specific documentation, plan limits or pricing were available for this guide. Treat flag names, notice-page behavior and access-control features as subject to change, and confirm them against the ngrok documentation for your installed version and account plan.