The ESP32 and ESP8266 microcontrollers are powerful.
Using their built-in features, these microcontrollers can wirelessly operate robotics, motors, or sensors from simple web applications. However, if you decide you want to put your inventions on the Internet so you and your friends can securely use these creations, it can be difficult. This is the reason that many IOT developers have started using ngrok to put their ESP32 project on the Internet.
The ngrok tunneling software provides an easy way to create and control tunnels from a computer on one LAN that are accessible to computers on other LANs anywhere on the internet.
If you are already familiar with ESP32 programming, skip to the section about using ngrok called “Put your Project on the Internet”
Getting Started with your ESP32 & ngrok
ESP32 or ESP8266, any microcontroller that has a web page
ngrok and an authentication token
computer to host ngrok
Setting up your ESP32
For this project, I am using a simple web server from the project below. I found this article easy to follow, and the source code was very clean; but, you can use any ESP32 program that creates a web server on your local network
To use ngrok, you do need to configure an Authtoken, so once you unzip your ngrok agent, we need to register this Agent with the ngrok Cloud.
Copy and paste the command from the ngrok Dashboard into your Terminal window, like shown below:
Put your Project on the Internet
Before you can put your ESP32 on the Internet, you do need to know the IP address assigned to your ESP32. Earlier in the tutorial we noted where you can get the IP address from the Arduino IDE, or if you know how to get the IP address of your ESP32 from your Router, you need to do that now.
Run this command to put your ESP32 on the Internet.
ngrok http 192.168.1.1:80
For ngrok, if you have a Free account, you will get a randomly generated address every time you stop and restart ngrok. Your connection will stay active for several hours, and you can turn off the connection anytime by stopping the ngrok Agent.
Alternatively, with a Pro account, you can specify an subdomain to have a easy to remember url every time you start ngrok:
Congratulations! You can access your ESP32 from anywhere on the Internet using ngrok. If you see in your Terminal windows, the public address that anyone can use to see your project is shown below.
Below is a screenshot of my Macbook Pro connecting to ngrok and displaying my ESP32 project with a Free ngrok account.
Add authentication to your ESP32
Now you don’t want strangers turning on and off your devices. You should add some security. If you are new to authentication, you can use HTTP Basic Authentication to protect your ESP32 server with a single option:
Not only can ngrok tunnel the traffic, it can also do authentication for you.
ngrok makes it possible to put any web application on the Internet, and each ngrok agent can connect up to 20 devices, so you can run many projects on a single ngrok Agent. Here's what it looks like in practice:
Next Steps for ESP32 and Security
As we build out our app and what we control with it, we'll have to secure our system better and more reliably. Luckily, with ngrok we can add more components to protect ourselves and our systems. Beyond the Basic Auth and Google, in an enterprise environment, we could plug into our Identity Provider - such as Active Directory, Okta, or others - and layer on IP restrictions to block or allow IPs to refine access as we need.
Or what if.. we used ngrok without an agent?
ngrok recently released a library which can make it possible to put your project on the Internet without requiring an ngrok Agent here.
Patrick McDowell is a Customer Success Manager at Ngrok, focused on improving the adoption of Ngrok for strategic customers. In his personal time he experiments with many new technologies such as various programming languages, micro controllers, single board computers and virtualization