How to Block Any USA Region from accessing website (JavaScript)

Sometimes, you might need to block any USA region or any region in the world from accessing your website for many reasons. Why I’m writing this, because recently one of my client wanted me to help him block two US states i.e., Pennsylvania and Michigan. So I made a JavaScript code where I used third-party geolocation API to achieve this.

In this article, I will show you how to use blocking access to your website based on geographic location using JavaScript. But keep in mind that it is less common and less reliable than server-side methods. You should know that JavaScript runs on the client-side and can be easily bypassed. However, you can still implement a client-side solution using a third-party geolocation API.

Steps to Block Any USA Region from accessing website

Here is a basic example of how you can use JavaScript along with a geolocation API to block access from specific states like Pennsylvania and Michigan:

Step-by-Step Guide

Sign up for a Geolocation API services:
You can use a service like ipstack, ipinfo, or ip-api.
Integrate the API with JavaScript
Fetch the visitor’s IP information.
Check the state/region information.
Redirect or block access if the visitor is from the specified states.
Example Code using ipinfo.io

I wrote this HTML file, where I have included JavaScript file named i.e., block_states.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block States</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <script src="block_states.js"></script>
</body>
</html>

Now, below is the code which goes right in to our JS file i.e., block_states.js. Where we have used API to get the visitor’s location data and block access if they are from Pennsylvania or Michigan.

All you need to do in the following JS file, replace the YOUR_TOKEN_HERE and you are good to go.

// Function to block access based on state
function blockStates() {
    // Fetch the visitor's IP information
    fetch('https://ipinfo.io/json?token=YOUR_TOKEN_HERE')
        .then(response => response.json())
        .then(data => {
            console.log(data); // Log the data for debugging purposes
            
            // Extract the state information
            const region = data.region;
            
            // List of blocked states
            const blockedStates = ['Pennsylvania', 'Michigan'];
            
            // Check if the visitor is from a blocked state
            if (blockedStates.includes(region)) {
                document.body.innerHTML = '<h1>Access Denied</h1><p>We are sorry, but access to this website is not available from your location.</p>';
            }
        })
        .catch(error => {
            console.error('Error fetching the IP information:', error);
        });
}

// Call the function to block states
blockStates();

Notes:

You will need to sign up for an API key (token) from the geolocation service you choose.
This method can be bypassed easily by tech-savvy users, as they can disable JavaScript, use a VPN, or inspect and modify the code.
Be mindful of user privacy and the security implications of handling IP data on the client side. Always follow best practices for handling user data.