How to get my system local ip using react js

Question

I need to get local IP of my computer in react js app. Can anyone please suggest a good way to do it?

Bengali

Why do you need to do that? You've tagged electron, so maybe an approach that works with Electron is what you need, e.g. #10750803 – Polysyllable

Local LAN IP? Or public internet-facing IP, if any? IPv4? IPv6? What if your device has more than one active network interface, should it return all the assigned IPs? And yeah...why does your application need to know? – Transistor

@Polysyllable he's asking how we can get unique address of a device (i.e. IPv4) using React.js, not Node.js, because if you follow the approach suggested in the article is to do it on Node.js (Server side), so it'll record the IP of the server not the client. – Tragacanth

@AkashRajawat I believe with electron you can use node modules on the client side – Transistor

@AkashRajawat As I said, they'd tagged Electron, where Node.js code runs on the client side. If you look at the accepted answer, that's exactly what they do. – Polysyllable

Answer 1

Any IP address of your machine you can find by using the os module - and that's native to Node.js:

const os = require('os');

const networkInterfaces = os.networkInterfaces();
const ip = networkInterfaces['eth0'][0]['address']

console.log(networkInterfaces);

Update: Window OS solution

const { networkInterfaces } = require('os');

const getIPAddress = () => {
  const nets = networkInterfaces();
  const results = {};

  for (const name of Object.keys(nets)) {
    for (const net of nets[name]) {
      // Retrieve only IPv4 addresses
      if (net.family === 'IPv4' && !net.internal) {
        if (!results[name]) {
          results[name] = [];
        }
        results[name].push(net.address);
      }
    }
  }
  
  // Return the first IP address for the first NIC found
  const nicNames = Object.keys(results);
  if (nicNames.length > 0) {
    const firstNICAddresses = results[nicNames[0]];
    if (firstNICAddresses.length > 0) {
      return firstNICAddresses[0];
    }
  }
  
  // No IP address found
  return null;
};

const ipAddress = getIPAddress();
console.log(ipAddress);

This solution retrieves all network interfaces and their associated IP addresses using the os.networkInterfaces() method. It then filters out all IPv4 addresses that are internal (e.g., loopback) and stores them in an object indexed by NIC names.

Finally, the code returns the first IP address found for the first NIC in the object, or null if no IP address was found.

Cryptonym

I had to run npm i --save os to get it to work. – Topdrawer

What about on Windows? eth0 isn't Windows – Czarist

@velkoon, I have updated my code with Window OS solution. Upvote if it's usefull for you. :) – Tamtama

@MahmoudMousaHamad I guess you don't need to install it. It's native to NodeJS, see nodejs.org/api/os.html – Rugging

it says: Uncaught TypeError: os.networkInterfaces is not a function and does not work for me – Okeefe

But if the backend code (Node.js server) is deployed on a server, and developer's intention is to get IP addresses of it's user, how this would help? I think this will only provide IP of the server. – Tragacanth

Answer 2

I was working on a React.js application and I needed to programmatically retrieve the local system's IP address.

Since React.js runs in the browser, we can't use Node.js modules like os to get the IP address. Instead, we can use the WebRTC API to achieve this.

import { useEffect, useState } from 'react';

function App() {

  const [localIp, setLocalIp] = useState('');
  console.log('🚀 ~ App ~ localIp:', localIp);

  useEffect(() => {
    const getLocalIP = async () => {
      const ipRegex = /([0-9]{1,3}\.){3}[0-9]{1,3}/;

      const pc = new RTCPeerConnection({
        iceServers: [],
      });

      pc.createDataChannel('');

      pc.createOffer().then((offer) => pc.setLocalDescription(offer));

      pc.onicecandidate = (ice) => {
        if (ice && ice.candidate && ice.candidate.candidate) {
          const ipMatch = ipRegex.exec(ice.candidate.candidate);
          if (ipMatch) {
            setLocalIp(ipMatch[0]);
            pc.onicecandidate = null; 
          }
        }
      };
    };

    getLocalIP();
  }, []);
  
  return (
   <div>{localIp}</>
  );
}

export default App;

Candice

@ruud looks like an answer to me - it's showing a way to retrieve the local IP address, which was the subject of the question. I haven't tested if it works, but it certainly looks like an answer rather than a question. Not sure who flagged this up or why it was reviewed in this way. – Transistor