The Magic Behind WhatsApp Web’s QR Code.

WhatsApp is such a big part of our day-to-day life. It’s how we chat with friends, catch up with family, and even get some work done. And let’s face it, while we’re often glued to our phones, we spend a lot of time on our computers too. That’s why Meta created WhatsApp Web.

It’s super useful, but have you ever stopped to think how it actually works? Like, how you scan a QR code on your screen and bam — you’re in? I’ve always been curious about that. So in this article, we’re going to dig into the specifics of how that QR code magic happens and how it connects you so quickly.

What is a QR code and how do they work?

A QR code which is short for “quick response code” which is grid of black and white squares that are able to store data that a machine can read. Computers are able translate the unique pattern into human-readable information. A QR code has 6 main components that all store different parts of the data the QR code is carrying.

• Quiet Zone: The empty white border around the outside of a QR code, which allows the scanning device to detect where the QR code ends.
• Hinder pattern: The three black squares in the bottom-left, top-left, and top-right corners which help the scanning device determine the QR code’s orientation.
• Alignment pattern: A small square near the bottom-right corner, which ensures the QR code can be read, even if it’s skewed or at an angle.
• Timing pattern: An L-shaped line that helps to identify individual squares within the whole code. These help the scanning device detect the dimensions of the QR code.
• Version information: Identifies the version of the QR code.
• Data cells: The rest of the QR code communicates the actual information — the URL, phone number, or other data.

Why QR Codes are the Perfect Solution for Linking WhatsApp Web and Mobile:

Linking a mobile app to a web app is tricky. For WhatsApp, it was important to make sure that the same person using the mobile app was the one logging into the web app. They also needed to protect any data moving between your phone and computer so that it couldn’t be hacked or stolen.

Usability was another issue. The goal was to make both the mobile and web apps feel the same to the user. Also, getting started with WhatsApp Web had to be easy, so people would actually use it.

WhatsApp had a lot of options for connecting the mobile app to the computer. They could have used one-time passwords, special web links, or even Bluetooth. But all these methods had some downsides, like being complicated or less secure.

That’s why WhatsApp went with QR codes. QR codes are secure, making it hard for someone to get into your account. They are also quick and easy to use, which is what I’ll talk about next.

Step-By-Step: How the WhatsApp Web QR Code Mechanism Works

1. You open your browser and navigate to web.whatsapp.com

2. The Browser loads the page by executing various CSS and JavaScript code, but also opens a WebSocket ( wss://w4.web.whatsapp.com/ws )

Quick Definition #1: A WebSocket is used to dynamically update the QR code displayed on a webpage in real-time without requiring the user to refresh the page. Unlike traditional HTTP, where you’d have to reload the page to see a new QR code, the WebSocket keeps the communication channel open to allow for instant updates. It’s like having a constantly updated digital billboard instead of a static paper poster that you have to replace to show new information.

3. Every 20,000 milliseconds the QR code is refreshed via the WebSocket

4. Each time the QR code is refreshed, your browser does a GET request for the new QR code in BASE64 encode.

Quick Definition #2: A GET request is a way for your web browser to ask a web server for a specific piece of information, like the new QR code. The server then responds by sending that information back to your browser. It’s like asking a librarian for a specific book, and then the librarian hands it to you.

Quick Definition #3: Base64 encoding can be used to convert the binary data that makes up the QR code image into a text-based string.

At this stage your browser is ready start the WhatsApp Web session, but it does not know what your ID is (WhatsApp identifier — which is your mobile number). It also does not allow you to type it in because the server wouldn’t be sure that the number really belongs to you. So to let the servers know that the WhatsApp Web session belongs to a specific phone, you need to use the phone to scan the QR code.

5. You grab your phone, which has already been authenticated as you wouldn’t have access to the QR code scanning page otherwise and scan the QR code on the screen.

6. When your phone reads the QR code, it contacts the WhatsApp servers with the information required to ensure a secure connection. Your phone tells the WhatsApp servers my number is XXXX, my authentication credentials are YYYY, and the WebSocket associated with the QR code I just scanned can now receive my data.

7. The server now knows it can direct any traffic, such as messages or calls, to the specific WebSocket that belongs to that QR code you scanned.

Note: The specific WebSocket that the server has open between the Server and the Browser is associated with the unique QR code. So, knowing the QR code, the server knows which WebSocket is associated with it, and in turn it knows where to direct any traffic sent to the account that scanned the QR code.

8. The server and the browser communicate via the WebSocket to fetch all the necessary information required to display your chats in the browser. It retrieves messages & profile pictures from all the chats you’re currently having.

9. The GUI is now redrawn with all your chats displayed. Your browser will continue to receive data through the WebSocket and making changes to the interface as data is arriving.

How does WhatsApp Web remember you?

WhatsApp Web uses a combination of cookies and local storage to maintain a user’s session. When you first log in by scanning a QR code with your mobile device, WhatsApp Web stores encrypted session information in the form of cookies and data in your browser’s local storage. This information acts like a digital fingerprint, unique to your specific session, allowing WhatsApp Web to “remember” you the next time you visit.

The saved session data doesn’t include the content of your messages but rather consists of session-specific metadata, such as authentication tokens. These tokens help WhatsApp Web establish a secure connection to your mobile app without requiring you to scan the QR code every time you access the service.

Wrapping Up: The Ingenious Design Behind WhatsApp Web’s QR Code Mechanism

WhatsApp Web is a marvel of software engineering that addresses both security and usability concerns to provide a seamless experience for users. By using QR codes, WhatsApp has managed to implement an efficient, secure, and user-friendly way to link your mobile application to the web interface. QR codes aren’t just a cool technology; they serve as a reliable security layer and a quick link between different platforms. The entire process is further optimized through the use of WebSockets, allowing for real-time updates without the need to refresh the webpage manually. On top of that, cookies and local storage ensure that returning to WhatsApp Web is just as effortless as your first login, sparing you from repeated QR code scans.

WhatsApp Web’s approach is a testament to the power of thoughtful design and robust security measures working in harmony. It showcases how the right technology can make a process not just secure but also incredibly straightforward for the user. So, the next time you scan that QR code to use WhatsApp Web, you’ll know there’s a lot more going on behind the scenes than meets the eye.