How to get visitor IP Address using Javascript?

Introduction

The IP Address is not just an address that represents a unique device on the internet. As developers, we're using the IP Address to identify the user's geographical information.

This can be done by using a service like Greip API to fetch the location data of a specific IP Address. And in this article, we'll be discussing: How to get the user IP Address and how to retrieve the location data of that IP Address.

How to get The IP Address of the user?

Method 1: Using Cloudflare

Cloudflare provides a simple way to get the user IP Address using the CloudFlare’s trace utility which returns a plain-text formatted data contains the IP Address of the user.

Let's take an example:

function fetchData(url) {
  return fetch(url).then(res => res.text());
}

fetchData('https://www.cloudflare.com/cdn-cgi/trace').then(data => {
  let ipRegex = /[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}/
  let ip = data.match(ipRegex)[0];
  console.log(ip); // return the IP Address
});

NOTE: using this way you'll be able to get the IP Address of the user but not the entire location data.

Method 2: Using Amazon

Amazon AWS also provide a similar way that help you retrieve the IP Address of a specific user.

Let's take an example:

fetch("https://checkip.amazonaws.com/").then(res => res.text()).then(data => console.log(data));

NOTE: using this way you'll be able to get the IP Address of the user but not the entire location data.

Method 3: Using Greip Public API

Greip provides a FREE option that allows you to retrieve the IP Address of a specific user without the need to obtain an API Key.

NOTE: This endpoint will be working for lifetime, so you can rely on it anytime.

fetch('https://gregeoip.com/ip').then(data => data.text()).then((data) => {
    var JSONData = JSON.parse(data);
    console.log(JSONData);
})

Method 4: Using Greip API

Greip is another FREE option that allows you to retrieve the IP Address of a specific user along with the entire information related to that user like: location, currency, browser, security threats, etc.

This can be done by following 3 simple steps:

• Create an account at Greip;
• From your account's dashboard, go to the API section;
• Copy your API Key and you're good to go now.

Let's send a request using the API Key we just copied:

fetch('https://gregeoip.com/GeoIP?key=0f273e81f42a930ba5cdda940c584cce').then(data => data.text()).then((data) => {
    var JSONData = JSON.parse(data);
    console.log(JSONData.data.ip); // return the IP Address
    console.log(JSONData.data.countryCode); // return the Country Code
})

Please refer to Greip Documentation page for more information and get the most of this service.

How to customize the website/app content according to the user location?

Actually, this is one of the main goals of using such services that allow you to have the IP Address of the visitor.

Have you noticed how Amazon is showing the products you like when you first-visit their website? Or even Facebook, they show you their website in your language instead of showing the default version (English)!

These are some examples of how the large companies are using GeoIP Services to let them customize their website content in accordance with the user information.

Greip is not just a service that provides you the location data of your visitor, but also protects you from fraud and abuse. Please visit the home page for more information.