Husnain Babar

Posted on Jun 20

Detect User Location Without Permission Prompts: An IP Geolocation Guide

#tutorial #javascript #webdev

Every modern web app wants to be "smart" about location. Show prices in the right currency. Default to the user's language. Calculate shipping. Block suspicious traffic. But there's one problem: the only built-in browser API for location requires a permission prompt that users dismiss more often than they accept.

In this guide, I'll walk through how to detect a visitor's approximate location instantly and silently — without ever showing a permission dialog — using IP geolocation APIs.

Why Browser Geolocation Falls Short

The navigator.geolocation API is the standard way to ask for a user's exact GPS coordinates. It works, but it comes with trade-offs that make it impractical for most use cases:

It requires explicit permission. A popup appears asking "This website wants to know your location." Studies show users click "Block" roughly 70% of the time.
It blocks the UI. Nothing happens until the user responds. If they're on the fence, your page sits frozen.
It's inaccurate on desktop. Desktop browsers infer location from Wi-Fi networks and IP data anyway — the same data you could get directly, without the prompt.
Privacy fatigue. Modern users are bombarded with cookie banners, notification requests, and permission prompts. Adding another one erodes trust before the user has even seen your product.

For use cases where you need city-level or country-level accuracy — not GPS precision — there's a better approach.

How IP Geolocation Works

IP geolocation maps a visitor's IP address to a geographic location using databases compiled from regional internet registries (RIRs), ISP records, and network routing data. When a user connects to your server, you already have their IP address. A geolocation lookup takes that IP and returns data like:

Country and ISO country code
Region/state and city
Latitude and longitude (approximate)
Timezone
Currency
ASN (Autonomous System Number) and ISP name
Connection type (residential, mobile, datacenter)
VPN/proxy/tor detection flags

The key advantage: this works instantly, with zero user interaction. No permission prompt, no waiting, no drop-off. Accuracy at the country level is typically 99%+, and city-level accuracy ranges from 80–95% depending on the region.

Building Location-Aware Features

Here's how to implement IP geolocation in a real application.

Server-Side Detection (Node.js / Express)

The most reliable place to detect location is on the server, because that's where you have direct access to the client's real IP address:

const express = require('express');
const app = express();

app.get('/api/locale', async (req, res) => {
  // Get the visitor's IP (account for proxies/load balancers)
  const ip = req.headers['x-forwarded-for']?.split(',')[0].trim()
           || req.socket.remoteAddress;

  // Look up location via GeoIPHub API
  const response = await fetch(
    `https://api.geoiphub.com/v1/lookup/${ip}`
  );
  const geo = await response.json();

  // Use the data to personalize the experience
  const currency = geo.currency?.code || 'USD';
  const timezone = geo.timezone || 'UTC';

  res.json({ country: geo.country_name, currency, timezone });
});

app.listen(3000);

This runs in milliseconds and gives you everything you need before the page even renders.

Client-Side Detection

If you're building a static site or SPA, you can detect location client-side:

async function detectLocation() {
  const res = await fetch('https://api.geoiphub.com/v1/lookup');
  const geo = await res.json();

  return {
    country: geo.country_code,
    city: geo.city,
    currency: geo.currency?.code
  };
}

// Auto-set currency on page load
detectLocation().then(loc => {
  if (loc.currency === 'EUR') {
    setPriceDisplay('€');
  }
});

Handling Edge Cases

VPN and proxy users will appear in the VPN's location, not their real one. For most use cases this is fine. If accuracy matters (fraud detection, compliance), use the API's VPN/proxy detection flags to identify and handle these cases.
Mobile networks can be less precise at the city level. Country detection remains accurate.
IPv6 support is essential — make sure your provider handles it. GeoIPHub does.

Real-World Use Cases

E-commerce localization: Show prices in the visitor's local currency, pre-select the right shipping country, and apply correct tax rates. This alone can lift conversion rates significantly.
Content and language defaults: Automatically serve content in the user's likely language instead of defaulting to English and making them hunt for the language switcher.
Compliance and data residency: Route EU users to EU servers for GDPR compliance, or restrict content in regions where it's not licensed.
Security and fraud prevention: Flag logins from unexpected countries, detect anonymizing services (VPNs, proxies, Tor), and score the risk of each session.
Analytics enrichment: Add geographic dimensions to your analytics — understand where your traffic actually comes from without relying on unreliable client-side signals.

Choosing a Geolocation API

Not all IP geolocation services are equal. When evaluating options, look for:

Data freshness: IP assignments change constantly. A provider that updates daily will outperform one with monthly refreshes.
Response speed: Lookups should complete in under 50ms. Every millisecond adds to your page load time.
Rich data beyond location: ASN, ISP, connection type, and threat intelligence (VPN/proxy detection) add significant value for security use cases.
Fair pricing: A generous free tier for development and a clear pay-as-you-go model — no surprise overage charges.

GeoIPHub checks all these boxes: real-time data updates, sub-50ms response times, and detailed metadata including VPN/proxy detection and threat scoring. It's built for developers who need reliable IP intelligence without the overhead of managing databases themselves.

Wrapping Up

IP geolocation gives you the location awareness your app needs without the friction of permission prompts. It's instant, invisible, and accurate enough for the vast majority of real-world use cases — from e-commerce localization to fraud prevention.

The next time you're tempted to call navigator.geolocation for something that only needs country-level precision, skip the prompt. Look up the IP instead.

DEV Community