Client-Side API Integration

Finding Your Public IP Address

A web browser is intentionally designed to protect your privacy. One way it does this is by not providing a direct way for a script running on a webpage to find out your computer's IP address. For security reasons, JavaScript can't just ask the browser, "What's our public IP?"

So how do we get it? We ask someone else. We need to make a request to an external server that can see our public IP address and report it back to us. Think of it like looking in a mirror. You can't see your own face without a reflective surface. In our case, the external service is our digital mirror.

The modern tool for making these network requests in JavaScript is the fetch API(). It allows us to send a request to a URL and process the response. Because network requests can take time, this process is asynchronous. We use the async and await keywords to handle this gracefully, telling our code to wait for the response before continuing.

Making the Request

Let's use a simple, free service called ipify. It does one thing: it returns your public IP address as plain text. To get the IP, we'll write an asynchronous function that calls the ipify API endpoint.

async function getMyIp() {
  try {
    // Send a request to the ipify API
    const response = await fetch('https://api.ipify.org');

    // The response body is a stream, so we use .text() to read it
    const ip = await response.text();

    console.log('My public IP is:', ip);
    return ip;
  } catch (error) {
    console.error('Failed to get IP address:', error);
    return null;
  }
}

// Call the function
getMyIp();

In this code, the try...catch block is essential. It lets us handle potential problems, like the user being offline or the ipify service being temporarily unavailable. If the fetch call fails, the catch block executes, preventing our entire application from crashing.

Handling Different Responses

While ipify returns plain text, many APIs return data in JSON format(). This is a structured way to send information that is easy for machines to parse and for humans to read. A service like AbstractAPI, for example, returns not only your IP but also geographic information and other details in a JSON object.

Let's see how we would handle a JSON response.

// Replace YOUR_API_KEY with an actual key from AbstractAPI
const apiKey = 'YOUR_API_KEY';

async function getIpDetails() {
  try {
    const response = await fetch(`https://ipgeolocation.abstractapi.com/v1/?api_key=${apiKey}`);

    // Use .json() to automatically parse the JSON response body
    const data = await response.json();

    console.log('API Response:', data);
    console.log('My public IP is:', data.ip_address);
    return data;
  } catch (error) {
    console.error('Failed to get IP details:', error);
    return null;
  }
}

getIpDetails();

Notice the key difference: instead of response.text(), we use response.json(). This built-in method reads the response stream, parses it as JSON, and returns a JavaScript object we can immediately work with.

The diagram above shows why client-side requests only reveal your public IP. The router acts as a gateway, using a single public address for all external communication, while assigning private IP addresses to devices on the local network. These private IPs (like 192.168.1.101) are not visible to the outside internet.

IPv4, IPv6, and Limitations

The internet is transitioning from an older IP standard, IPv4, to a newer one, IPv6, which offers a vastly larger number of possible addresses. Some services provide different endpoints depending on which type of address you want to check for. Your network might support one, the other, or both.

For ipify, you can explicitly request your IPv4 or IPv6 address.

Address Type	`ipify` Endpoint
IPv4	`https://api.ipify.org`
IPv6	`https://api64.ipify.org`
Smart (tries both)	`https://api64.ipify.org`

When you use api64.ipify.org, it will return an IPv6 address if your network supports it; otherwise, it will fall back to your IPv4 address.

This client-side method is powerful but has a key limitation: it creates a dependency on an external service. If ipify or AbstractAPI goes down, your code will fail. For mission-critical applications, you might need a fallback service or a different strategy entirely.

Now, let's test your understanding of how to retrieve IP addresses on the client side.

Quiz Questions 1/6

Why can't a script running in a web browser directly access the computer's public IP address?

Quiz Questions 2/6

What is the fundamental technique for a client-side JavaScript application to determine its own public IP address?

JavaScript IP Address Retrieval