N
Nuxt•8mo ago
hz2222

How can I get the user's ip address

Hi guys how can I get the user's ip address and the url from which page the user came to the page?
14 Replies
Hum+
Hum+•8mo ago
You forward their real isp ip adress from the webserver like NGINX (you add the approriate headers in your reverse proxy) then you read them through the headers with nitro middleware(f.e), or if you dont have access to NGINX, you could altrnatively easily just do a API call once they land on the page, quite cheapskate solution the latter but it works
Hum+
Hum+•8mo ago
like: https://www.ipify.org/
ipify - A Simple Public IP Address API
ipify API is a simple public IP address API, easy enough to integrate into any application in seconds.
Hum+
Hum+•8mo ago
No description
Hum+
Hum+•8mo ago
https://easyengine.io/tutorials/nginx/forwarding-visitors-real-ip/ 
    proxy_set_header    X-Real-IP        $remote_addr;
    proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header    X-Real-IP        $remote_addr;
    proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
to know where the user came from, u can use nitro (nuxt server) middleware to detect what path the user came from f.e: if the user is coming from another page on site or coming from a external domain if you dont have direct access to ur webserver that is hosting ur nuxt app or any web app, your best bet is too just do a useFetch call once u load ur page to grab their ip (after cookie consent) 
// ./server/api/user/getIp.get.ts
export default defineEventHandler(async (event) => {

    const visitor = await $fetch("https://api.ipify.org?format=json");
    const exists = await doesIpExist(visitor.ip) // <-- checking db if ip for this user already exists
    if(exists) return { message: "Already exists" }
    const geoData: GeoLocationResponse = await $fetch(`https://api.ipgeolocation.io/ipgeo?apiKey=${useRuntimeConfig().private.GEO_API_KEY}&ip=${visitor.ip}&fields=geo`);
   
    return { message: "Yayayayayaya" }
})
// ./server/api/user/getIp.get.ts
export default defineEventHandler(async (event) => {

    const visitor = await $fetch("https://api.ipify.org?format=json");
    const exists = await doesIpExist(visitor.ip) // <-- checking db if ip for this user already exists
    if(exists) return { message: "Already exists" }
    const geoData: GeoLocationResponse = await $fetch(`https://api.ipgeolocation.io/ipgeo?apiKey=${useRuntimeConfig().private.GEO_API_KEY}&ip=${visitor.ip}&fields=geo`);
   
    return { message: "Yayayayayaya" }
})
here's an example api call i do in Nuxt to get some geo location based off user ip note: you should try/catch both api calls though in my example the middleware one is basic too 
// ./server/middleware/log.ts
export default defineEventHandler((event) => {
  console.log('New request: ' + getRequestURL(event)) // <-- gets the path where the user comes from & much more

  const ip = getRequestIP(event); // <-- direct h3 util

  const headers = event.node.req.headers;
  // f.e using getHeader(event, 'headerName')
  const cookieHeaders = getHeader(event, 'cookie')

  // Using the getRequestURL to check the path
  const requestedURL = getRequestURL(event)
  console.log('New request to path: ', requestedURL.pathname)

  if (requestedURL.pathname === '/api/test') {
   // do something
  }
})
// ./server/middleware/log.ts
export default defineEventHandler((event) => {
  console.log('New request: ' + getRequestURL(event)) // <-- gets the path where the user comes from & much more

  const ip = getRequestIP(event); // <-- direct h3 util

  const headers = event.node.req.headers;
  // f.e using getHeader(event, 'headerName')
  const cookieHeaders = getHeader(event, 'cookie')

  // Using the getRequestURL to check the path
  const requestedURL = getRequestURL(event)
  console.log('New request to path: ', requestedURL.pathname)

  if (requestedURL.pathname === '/api/test') {
   // do something
  }
})
you could also expose the headers here event.node.req.headers holds the headers from ur incoming requests forwarded by your webserver including the ones like real user (ISP) IP if u setup NGINX to forward it in serverless situations this is problematic, but if u run vps's with f.e ubuntu where you manage ur environment urself, u can easily just add the two extra lines in your NGINX configuration
hz2222
hz2222OP•8mo ago
Thank you!!!
Hum+
Hum+•7mo ago
hz2222
hz2222OP•7mo ago
Can I do the same thing with an Apache server?
Hum+
Hum+•7mo ago
https://www.globo.tech/learning-center/x-forwarded-for-ip-apache-web-server/
Globo.Tech
How to get X-Forwarded-For IP addresses in Apache Web Server - Glob...
This tutorial will show you how to get X-Forwarded-For IP addresses in Apache Web Server. Read now & Identify the originating client IP address
Hum+
Hum+•7mo ago
Yes
hz2222
hz2222OP•7mo ago
Hi , I copied this code into server/middleware/log.ts but I see nothing in the console...
Hum+
Hum+•7mo ago
Try stopping & restarting the server with npm/pnpm dev It should appear
hz2222
hz2222OP•7mo ago
yes thx, now I can see it in the terminal , but i want to send back the url to the backend so I can see which page the users came from the most, because of marketing
Hum+
Hum+•7mo ago
U can add (to, from) in the midddleware function
Hum+
Hum+•7mo ago
https://nuxt.com/docs/guide/directory-structure/middleware#usage
Nuxt
middleware/ · Nuxt Directory Structure
Nuxt provides middleware to run code before navigating to a particular route.
Want results from more Discord servers?
Add your server