IP Geolocation and Threat Intelligence - Detect your visitors IP with this API!

This is Goktug Erol, full stack developer. The original place I posted this article is in .

It’s a very interesting and fun API to work with. You can detect your visitor’s data and show & offer them content related to their location or use it for SEO and content improvements of your website.

Here’s an example output from the API.

.

Then go to the Documentation tab.

Here you can use different API endpoints depending on your needs. In this post I used Single IPLookup Endpoint.

I would like to mention that you can use your free API up to 100k lookups.

as an HTTP client, so let’s install it by typing npm i axios.

Go to your JavaScript file and let’s get coding!

`// index.js

import axios from "axios";

export async function getServerSideProps() {

let data = await axios

.get("

Let’s try this again but this time I will use VPN to change my IP address.

Perfect, the API Works well. If I added more properties like currency etc it would also show those values but I just added name and flag properties the API provides (because the website I implemented only uses mexican pesos and I just didn’t want to change the whole configuration for API demonstration).

Regarding to implementing in different areas of the code, well it totally depends on what you do with your app. In this case I used in React and NextJS app.

This is an example of how I implemented it. It’s actually very similar in all JavaScript frameworks.

In case of React + NodeJS Setup, I have my page divided in different components and I just wanted to add this feature to header and footer only.

This is my default function and I just added country object in each component and function

export default function Home({ country }) {

return (

<div>

<Header country={country} />

<Footer country={country} />

</div>

);

}

Then I also had to implement in the same way within the component files.

For example, this is the header component and I added as an image. Before using the API it had a static image link but now the image dynamically changes thanks to this API based on IP address of the people who is viewing the page.

And same thing for the name property. Just like I mentioned the website uses mexican pesos so it’s hardcoded and I didn’t made that part dynamic.

<li className={styles.li}>

<Image src={country.flag} alt="" width={100} height={100} />

<span>{country.name} / $mxn</span>

</li>

I hope this article was helpful. I know there are lots of features and missing parts for people who never used an API in this way but if you have any questions feel free to ask in the comments below.

Goktug Erol