How to get client IP address using JavaScript?

Last Updated : 09 Jan, 2025

Imagine your computer as your apartment. Just like each apartment has a unique address for receiving mail, your computer has an IP address that helps it receive information from the internet. This IP address acts like a label that identifies your specific device on the vast network of computers, ensuring the data you request reaches the right place.

Below are the approaches by using we can get the client IP address using JavaScript:

Table of Content

By using the ipify
By using the ipinfo

By using the ipify

The ipify link can be used with the getJSON() method of jQuery to get the current IP address of the user.

Example: The below code uses ipify for SSL-contained websites(having HTTPS protocol) to get the client's IP address.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Getting Client's IP</title>
    <style>
        p, h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Public IP Address of user is:</h3>
        <p id="ip-address"></p>
    </center>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fetch the IP address from the API
            fetch("https://api.ipify.org?format=json")
                .then(response => response.json())
                .then(data => {
                    // Display the IP address on the screen
                    document.getElementById("ip-address").textContent = data.ip;
                })
                .catch(error => {
                    console.error("Error fetching IP address:", error);
                });
        });
    </script>
</body>

</html>

Output:

By using the IPinfo

The ipinfo can also be used to get the IP address in the same way we used the ipify with the get() method by passing a callback function to it.

Example: This code example uses the ipinfo to get the client's IP address in an alert box.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Getting Client's IP</title>

    <style>
        div {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>Getting Client IP Address</h3>
        <p id="ip-address"></p>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fetch the IP address from the API
            fetch("https://ipinfo.io/json") 
                .then(response => response.json())
                .then(data => {
                    // Display the IP address on the screen
					document.getElementById("ip-address").textContent = 
                      	`IP Address: ${data.ip}`;
                })
				.catch(error => {
					console.error("Error fetching IP address:", error);
					document.getElementById("ip-address").textContent = 
                      	"Unable to retrieve IP address.";
                });
        });
    </script>
</body>

</html>

Output:

Note: Sometimes, it will not work on Google Chrome for the default setting. It supports Firefox and Microsoft Edge.