IP Location Grabbing
Tags: javascript, node, api, tutorial
Published: 2022-05-29 23:28:21

A couple of months ago, for a 12 hour hackathon, I built https://geochattr.netlify.app/ with [Maggie Liu](https://github.com/maggie-j-liu) and [Gautam Paranjape](https://github.com/eternalmoon1234/).

The project is essentially a way of communicating through drawings, and you can chat with people in your city.

The way we got the location to put in that city's chat room is by using your IP.

## Guide

To do this, we're going to have to use an API to get the location information.

I generally found that most have some sort of premium plan, but [IpAPI](https://ipapi.co/) is good enough and has a good amount of accuracy for it to function.

### Quick Method
To get your location, simply make a GET request to https://ipapi.co/json/ from the client. This will give directly give us all of our necessary information to get the user's location.

You can use any library you want from the client. I tend to stick to `axios`, so here is an example in `axios`:

```js
axios.get("https://ipapi.co/json/").then(location => {
    console.log(location.data)
});
```

However, if you're doing this with plain HTML, CSS, JS, you're going to want to use the browser's `fetch` API.

```js
fetch("https://ipapi.co/json/").then(data=>data.json()).then(location=>{
   console.log(location);
})
```

Then, you'll have something that looks like this (obviously I'm using a VPN):

```json
{
    "ip": "89.238.130.72",
    "version": "IPv4",
    "city": "Manchester",
    "region": "England",
    "region_code": "ENG",
    "country": "GB",
    "country_name": "United Kingdom",
    "country_code": "GB",
    "country_code_iso3": "GBR",
    "country_capital": "London",
    "country_tld": ".uk",
    "continent_code": "EU",
    "in_eu": false,
    "postal": "M32",
    "latitude": 53.4507,
    "longitude": -2.3186,
    "timezone": "Europe/London",
    "utc_offset": "+0100",
    "country_calling_code": "+44",
    "currency": "GBP",
    "currency_name": "Pound",
    "languages": "en-GB,cy-GB,gd",
    "country_area": 244820.0,
    "country_population": 66488991,
    "asn": "AS9009",
    "org": "M247 Ltd"
}
```

### More Secure Method

Of course, the client can always disable JavaScript when they want to, meaning that they can disable the GET request to the API. However, we can still get the IP on the server.

For example if a user wants to upload a post, and you want to categorize it based on what city they took it in, you can get the IP as such. We can get the IP from the user like so:
```js
app.post("/upload", (req,res)=>{
    /* ... */
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  console.log(ip); // ip address of the user
  
})
``` 

Then, we can make a GET request to the ipapi.co again, but this time, we're going to send a bit of a different request.

Instead of sending a request to `https://ipapi.co/json`, we'll send a request to `https://ipapi.co/{ip}/json`, where {ip} is the IP that you extracted from the incoming user's request. This would look like, for example, `https://ipapi.co/89.238.130.72/json/`. You should probably use `axios` for server side requests, so follow the example above on how to make the GET request. 

## Conclusion

I hope you learned something new on how to actually do this. I remember getting stuck for an hour or two on how exactly to do this _during_ the hackathon, and I wanted to help prevent that confusion for others in the future. 

If you want to see a cool demo, check out https://ip-grabber-demo.shubhampatilsd.repl.co/ for an interactive map.

The source code is at https://replit.com/@ShubhamPatilsd/ip-grabber-demograbber-demo#index.html

Anyways, leave a reaction on the left if you enjoyed this blog and follow me on [Twitter](https://twitter.com/ShubhamPatilsd)!