The document discusses how a web browser could potentially serve as an IoT gateway and use Bluetooth for authentication. It describes how the Web Bluetooth API allows browsers to connect to Bluetooth Low Energy peripherals. While mobile apps currently communicate with BLE devices, a progressive web application in a browser could do the same. Browsers support protocols needed to communicate with IoT clouds and edge devices via BLE, and have capabilities for processing, storing, and analyzing sensor data. With features like Web Storage APIs and service workers, browsers could perform many of the functions of traditional IoT gateways. The document also explores how a BLE device could authenticate users to web applications by generating JSON web tokens for authentication via a "Login with Bluetooth" option

1. Sooraj Sanker
@soorajsanker

2. Can a Web Browser be an IoT
Gateway?
🤔

3. Can Bluetooth do Web Authentication?
🤔

4. Here are some Application
ideas..

5. Web Bluetooth
The Web Bluetooth API provides the ability to connect and interact with Bluetooth Low
Energy peripherals from a web browser.

6. But why?!
Isn’t it something mobile/native applications already do?
🤔

7. Yes

8. • Consumers are having an Apps overload!
• What if a PWA (Progressive Web Application) can do this?

9. Some DEMO
🎥 📽 📽

10. What are IoT Gateways?

11. • Communicate with embedded devices and IoT Nodes.
• Indirectly talk to the sensors, controllers and other I/O devices
• Manage Communications with an IoT cloud
• Data Read/Write Operations, Commands and service executions.
• Pre-Processing, Data clean-up, Data Aggregation
• Handling Protocol Conversion.
• Handling Data Buffering and Offline storage
IoT Gateways can

12. Want more?

13. • Edge Computing (Aggregation, Averaging etc.)
• Anomaly detection
• Edge Analytics
• Predictions
• Anything else?
IoT Gateways can also do

14. Positioning of the
IoT gateway

15. IoT Devices
• The devices which can talk to IoT Gateways.
• Supports light weight protocols like BLE GATT, Zigbee,
LoRa WAN etc.
• Send sensor data, device characteristics, environment
data etc.
• Accept commands and trigger actions.

16. Talk to IoT Gateway
Device to Gateway communication through lightweight
protocols like
BLE
ZigBee
LoRa WAN
Other Mesh netoworks

17. Talk to the cloud

18. IoT Gateway
Cloud Communication
• More advanced and lightweight protocols are preferred.
• MQTT, COAP, AMQP, WebSocket, HTTPs are preferred.
• Connects to the Internet or Private Cloud.
• Socket connections are preferred in order to have bidirectional
communication links.

19. IoT system

20. What if the
Device-to-gateway
communication is purely through BLE?

22. Let’s talk a bit about BLE

23. • Bluetooth 4.0 introduced a new "Low Energy" mode known as
"Bluetooth Smart", BLE, or just LE.
• Using Generic Attribute Profile (GATT)
• Peripheral and Centrals
BLE

24. Technically the max range is about 300 feet
or 100 meters, but that's very generous and
assumes a powerful radio.
In reality, you will find over 10 or 20 meters
can be challenging.
Depending on
• O/P power of the transmitter.
• Sensitivity of the receiver
• Obstacles
• The antennas
Range

25. Speed
• 2 Mbps max for Bluetooth Classic
• Less than a Mbps for BLE

26. Peripherals and Centrals
• Devices acting in the Peripheral role can receive connections, and devices
acting in the Central role can connect to Peripheral devices.
• A device acting in either Peripheral or Central can host a GATT Server.

27. Peripherals and Centrals

28. GATT Server
• The device containing the
characteristic database that is being
read or written by a GATT client.
• Could be master or slave.
• Can respond to read/ write request.
• Can indicate notifications.

29. GATT Client
• The device that is reading or writing
data from or to the GATT server.
• Can request read/write operations on
the GATT Server.
• Listen for notifications and indications.
• Acknowledge on indications.

30. What are the differences between Classic
Bluetooth and BLE?

31. Bluetooth v2.1
•Wireless headsets
•File transfer between devices
•Wireless printers
•Wireless speakers
Bluetooth low energy (BLE)
•Medical devices for monitoring and reporting
•Sports and fitness devices
•Industrial monitoring sensors
•Home automation
•Geo-based, targeted promotions via beacons
•Public transportation apps
•Remote controls
•PC peripheral devices like wireless mouse and
keyboard
Use Cases

32. BLUETOOTH
V2.1
BLUETOOTH 4.0
(LE)
BLUETOOTH 5
(LE)
Range Up to 100 m Up to 100 m Up to 400 m
Max range
(free field)
Around 100 m
(class 2 outdoors)
Around 100 m
(outdoors)
Around 1,000m
(outdoors)
Frequency 2.402 – 2.481 GHz 2.402 – 2.481 GHz 2.402 - 2.481 GHz
Max data rate 1- 3 Mbit/s 1 Mbit/s 2 Mbit/s
Application
Troughput
0.7-2.1 Mbit/s Up to 305 kbit/s Up to 1,360 kbit/s
Topologies
Point-to-point,
scatternet
Point-to-point,
mesh network
Point-to-point,
mesh network
Network
Standard
IEEE 802.15.1 IEEE 802.15.1 IEEE 802.15.1

33. GATT Specification
GATT Services
collection of characteristics and relationships to other services that encapsulate the behaviour
part of the device.
GATT Characteristics
Attributes that contains single logical value.
GATT Descriptors
Defined attributes that describe a characteristic value.

34. Let’s see if a browser can
cover all these features

35. • Talking to embedded devices and IoT Nodes.
• BLE - Modern Browsers supports this via Web Bluetooth

36. • Talking to public/private IoT cloud.
• Proven, Any browser can do this with a pool of supported
protocols.
• Even GraphQL backend can simply act as an IoT Cloud
• Most of the IoT clouds are supporting javascript SDK’s.

37. • Data Read/Write Operations, Commands and service
executions.
• Leveraging BLE services and characteristics.
• With BLE security layer.

38. • Pre Processing, Data clean-up, Data Aggregation
• Huge data processing, caching and storing are already
present in modern PWAs.
• Modern Browser APIs are capable enough to handle this.

39. • Protocol Conversion.
• Let’s consider BLE as device communication medium
• Huge varieties of cloud communication protocols are
implemented and supported in modern browsers.
• MQTT, HTTPs, CoAP, Web Sockets.
• Directly connect to Kafka, Message Queues, Data Buffers,
Apache NiFi, Azure, AWS, Google Cloud and more .

40. Data Buffering
• Data buffering in gateway level is mostly limited with an external
persistent storage.
• Latest Chrome File system API can read /write data on to the
file system. Just like how a firmware is doing
• Local Storage API can also be used to store the offline data till
an extend.

41. Offline Storage
• Web SQL, indexed DB and client-side libraries can be used
for local storage
• Native File system API can be used to dump raw data for
future reference
• Fall back mechanism can be written to ensure the data is
either successfully sent to the cloud or stored locally.
• Connectivity callbacks and event handlers are much simpler
within the browser.

42. Remote Debugging
• Remote Debugging and analysis is much much simpler with
advanced JavaScript analytics tools
• Chrome allows remote debugging port, so that you can monitor
your gateway more like a server.

43. BLE
Debugging

44. Supported Protocols
HTTP & HTTPS
FTP
SSH
MQTT
WebSocket
SMTP
RTSP
Many more 

45. Storage in Chrome

46. • Local Storage
• Indexed DB
• Cache
• Native File System API
Web Storage

47. Local Storage
•Persistent Key Value Pair storage.
•Nearly 10 MB data can be stored for each
domain.
•Not preferred to store more data.

48. Indexed DB
•Transactional DB System like SQL-
based RDBMS
•10MB to 2GB Storage
•Can be extended with users permission.
•Fixed Column tables are not a mandate
•Store and retrieve data with indexed key.

49. Native File
System API
• New in Chrome 79+
• The new Native File System API allows web apps to
read or save changes directly to files and folders on
the user's device.
• Offline data storage can now be directly to the user
file system just like any gateways.
• Manual user permission acceptance required.
• No limits as long as the device has storage capacity.

50. What about Advanced features?
Edge Computing (Aggregation, Averaging etc.)
Anomaly detection
Edge Analytics
Predictions
Anything else?

51. Data Aggregation
& Averaging
• JavaScript can do this in all modern web
browsers.
• Complex data structures and algorithms are
processed in modern PWA’s
• Threading, Task Queue and Call Stack is
managed by the browser. 

52. Anomaly Detection
& Edge Analytics
• High frequency data stream can be passed
through a trained ML model for anomaly
detection.
• Libraries like TensorflowJS can be used.
• Realtime retraining logic can also be written.

53. Predictions
• Data stream can be passed through the
ML models to predict futuristic output.
• Predictions can be made using AI & ML
libraries like tensorflow JS
• Retraining and replacing new ML models
are possible

54. JS library for adding offline support

55. JS library equipped with web BLE Utilsnpm i web-bluetooth-utils

56. Demo
Explained
Sensor KIT
• The sensor kit is equipped with a Bluetooth Module
• The firmware ensure that it starts the BLE GATT Server
• Which enables the discovery and connection from any BLE Client.
Web
Browser
• A portable web application is running on chrome
• Chrome search for devices which are advertising their availability
• This search can be filtered with device ids or some other parameters
Google
Cloud
• Firebase Realtime database
• Direct data dump and real time subscription
Web
Application
• React JS web application connected to google cloud.
• Realtime subscription from firebase real-time database.

57. Where can we use this?
Connecting to vending machines
Connect to BLE devices where we don’t need 24/7 live connection.
Unlocking automobiles and lockers.
Remote Controls
Web Bluetooth 2 factor Authentication*

58. Can a BLE device act as a
web authenticator?

59. I have some thoughts

60. Before that – Let’s have some fun!

61. Some more demo
🎥 📽 📽

62. Consider a JWT (Token) based
authentication system

63. • Login screen will collect the username and
password1
• Encrypted data will be send to the server2
• Server validate the request
• Server generates JWT expiring in x time3
• All consecutive requests will have this JWT in
the request headers4
• Server validates the JWT and provide
necessary access to the user5
• on Logout server resets the token by setting
the cookie6
Current Login System

64. What if a smart BLE device is your web
authenticator?

65. What if a browser has an option called
“Login with Bluetooth”

66. What if your web application can be
authenticated with your smartphone,
smartwatch or any BLE devices?

67. What if you want to give some
critical access only within a
premise?

68. How can we do that?

69. • Browser shows a login screen “Login with Bluetooth”
1

70. • Browser search for nearby advertising BLE devices
• User chooses the device
2

71. • Browser try to connect to the device
• Smart device validate and establish the connection
3

72. • Smart device generate the JWT with short validity
• Send the token to the Browser
• Browser will use the token to authenticate the server.
4

73. • User get access to the server for that short duration
• Smart device will keep generating and sending tokens
• Browser gets authenticated as long as the peripheral isconnected
5

74. • Usual Logout and peripheral disconnection can cause the Logout
• If the peripheral is static the acces control is limited to a premise
(Geo fenced web access control)
6

75. • Your Laptop/Desktop where you want to access the web authenticator connects with your smart
BLE device1
• Your smart device generate JWT by using super secret or fetch JWT from the server.
• This will have very small validity. May be 5 minutes or lesser.2
• “Bluetooth Login” option on your web application trigger BLE connection using web Bluetooth.
• No need of username and password as the smart device can encode user info within the JWT.3
• Every time before the JWT expires, authentication device publish the new JWT.
• This will ensure that the web access is continued as long as the BLE is connected.4
• The BLE smart authenticator can be fixed inside a building, so that this authenticator will work
only within the BLE range
• Can be considered this as a geo fenced access control5
• Usual logout action can be triggered
6

76. Thank you 
Sooraj Sanker
@soorajsanker
gh/soorajshankar
soorajshankar@gmail.com

77. https://googlechrome.githu
b.io/samples/web-
bluetooth/