Track IP Address of Client using WebRTC in React App

In this tutorial, we will discuss how we can use the WebRTC to get IP address on UI app in React app.

WebRTC (Web Real-Time Communication) is a powerful technology that enables real-time communication and data transfer between web browsers without the need for plugins or third-party softwar. One of the lesser-known capabilities of WebRTC is its ability to retrieve the client’s IP address from within a React application.

The client’s IP address can provide valuable informtion to web developers, such as their location, language, and other user-specific data. In this tutorial, we will explore how to use WebRTC in a React application to capture the client’s IP address and use it for various purposes.

WebRTC can be used in a React app to obtain the client’s IP address by leveraging the browser’s built-in functionality to establish peer-to-peer connections between devices.

 

Disclaimer: Fetching the client’s IP address using WebRTC or any other method should only be done after obtaining the user’s consent and making them aware of it. IP addresses can potentially reveal sensitive information about the user, and tracking them without their knowledge or consent could be a violation of their privacy. Therefore, it’s essential to use IP address lookup methods responsibly and only for legitimate purposes. Additionally, it’s crucial to inform users that their IP address is being collected and explain how it will be used to prevent any confusion or privacy concerns. More details here.

 

How to Fetch IP Address on Client In React App using WebRTC ?

Here are the general steps to do this:

 

Step 1 – Import the RTCPeerConnection object from the window object in your React component:

const { RTCPeerConnection } = window;

Step 2 – Create a new RTCPeerConnection object:

const peerConnection = new RTCPeerConnection();

Step 3 – Add a single, empty ICE candidate to the RTCPeerConnection object:

peerConnection.addIceCandidate({});

Step 4 – Create a new RTCSessionDescription object and set it as the local description:

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(new RTCSessionDescription(offer));

Step 5 – Extract the client IP address from the RTCIceCandidate object in the icecandidate event:

peerConnection.addEventListener("icecandidate", (event) => {
  const candidate = event.candidate;
  if (candidate) {
    const ipAddress = candidate.candidate.split(" ")[4];
    console.log("Client IP address:", ipAddress);
  }
});

Let’s see the complete App.js file that demonstrates how to obtain the client IP address using WebRTC in a React app:

import React, { useEffect } from "react";

function App() {
  const { RTCPeerConnection, RTCSessionDescription } = window;

  useEffect(() => {
    async function startCapturingIpAddress() {
      const peerConnection = new RTCPeerConnection();

      peerConnection.addIceCandidate({});

      const offer = await peerConnection.createOffer();
      await peerConnection.setLocalDescription(new RTCSessionDescription(offer));

      peerConnection.addEventListener("icecandidate", (event) => {
        const candidate = event.candidate;
        if (candidate) {
          const ipAddress = candidate.candidate.split(" ")[4];
          console.log("Client IP address:", ipAddress);
        }
      });
    }

    startCapturingIpAddress();
  }, [RTCPeerConnection, RTCSessionDescription]);

  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

By following these steps, you should be able to obtain the client IP address in your React app using WebRTC. It’s worth noting that this method may not work in some cases due to various network configurations and firewalls, so it’s not guaranteed to be reliable or accurate.