title: Using React to restrict/allow resource based on client ip address
body: <p>I'm building a react app and want to allow/deny access to some components based (mainly filter IP||MAC) on where the client is.</p>
  
  <p>Any way to restrict routing to deny access to a presentation when the client is connecting from the internet allowing the access when it connects via LAN?</p>
  
  <hr>
  
  <ul>
  <li>I think I found an alternative approach, I will maintain the question open looking for alternatives.</li>
  <li>I read that the client should not be able to see its ip address (browser security), and that should be done on the server side (thats a direct approach as mentioned in the above post) (can anyone confirm that).</li>
  <li>The solution is to find the gateway address of the client (normally using NAT) and compare with my gateway address, if equal they are inside LAN.</li>
  <li>I am having a situation that on the computer I am able to see the ip address, on mobile/cellphone <strong>I can't</strong>, need to investigate.</li>
  </ul>
  
  <pre><code>    import React from 'react';
  
      export default () =&gt; {
        const [addrObj, setAddrObj] = React.useState({});
        const fetchAddrData = async () =&gt; 
            await fetch('http://jsonip.com')
              .then(res =&gt; res.json())
              .then(setAddrObj);
  
        React.useEffect(() =&gt; {fetchAddrData()},[])
  
        return (
          &lt;&gt;
           &lt;h3&gt;Sample Page&lt;/h3&gt;    
           &lt;h4&gt;addr: {addrObj.ip}&lt;/h4&gt;
          &lt;/&gt;
        )
      }
  </code></pre>