Fix incorrect public IP address display on main page by using a server-side endpoint for IP retrieval.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/3e698266-b052-42ed-97e7-da236cf5d31f.jpg

client/src/components/shared/public-ip-card.tsx

@@ -27,22 +27,22 @@ export function PublicIpCard() {
       try {
         setLoading(true);
 
-        // Fetch IPv4
-        const ipv4Response = await fetch('https://api.ipify.org?format=json')
+        // Use our server-side endpoint that handles Replit's environment properly
+        const response = await fetch('/api/public-ip')
           .then(res => res.json())
-          .catch(() => ({ ip: null }));
+          .catch((err) => {
+            console.error('Error fetching from server endpoint:', err);
+            return { ipv4: null, ipv6: null };
+          });
 
-        // Fetch IPv6 (might not be available for all users)
-        const ipv6Response = await fetch('https://api64.ipify.org?format=json')
-          .then(res => res.json())
-          .catch(() => ({ ip: null }));
-
-        setIpv4(ipv4Response.ip);
+        console.log('Server returned IP data:', response);
         
-        // Validate that the IPv6 response is actually an IPv6 address
-        const ipv6Address = ipv6Response.ip;
-        if (isValidIPv6(ipv6Address)) {
-          setIpv6(ipv6Address);
+        // Set the IPv4 address
+        setIpv4(response.ipv4);
+        
+        // Validate and set the IPv6 address if present
+        if (isValidIPv6(response.ipv6)) {
+          setIpv6(response.ipv6);
         } else {
           setIpv6(null); // Not a valid IPv6 address
         }

server/routes.ts

@@ -155,6 +155,25 @@ async function triggerDnsWebhooks(
 export async function registerRoutes(app: Express): Promise<Server> {
   // Setup authentication routes
   setupAuth(app);
+  
+  // Add public IP endpoint for the frontend
+  app.get('/api/public-ip', async (req, res) => {
+    try {
+      console.log('Fetching public IP addresses');
+      // Get IPv4 address using our utility function
+      const ipv4 = await getCurrentIpAddress();
+      console.log(`Resolved IPv4: ${ipv4}`);
+      
+      // Try to get IPv6 as well
+      const ipv6 = await getCurrentIpv6Address();
+      console.log(`Resolved IPv6: ${ipv6}`);
+      
+      res.json({ ipv4, ipv6 });
+    } catch (error) {
+      console.error('Error getting public IP:', error);
+      res.status(500).json({ error: 'Failed to get public IP address' });
+    }
+  });
 
   // DNS Records routes
   app.get("/api/dns-records", requireRole(["admin", "manager", "user", "readonly"]), async (req, res) => {