Block Users from Specific Countries using Hono Ultrafast Web Framework and Vercel Edge Functions
#webdev#javascript#tutorial#programming
Rishi Raj Jain

Rishi Raj Jain @reeshee

About: A fan of web developement.

Joined:
Oct 2, 2019

Block Users from Specific Countries using Hono Ultrafast Web Framework and Vercel Edge Functions

Publish Date: Nov 5 '23
2 0

In this tutorial, we'll explore how to block users from specific countries using the Hono Ultrafast Web Framework in conjunction with Vercel Edge Functions. By the end, you'll have a setup in place to filter and handle users based on their country of origin.

Creating a Hono App with Vercel Template

Let's kick things off by setting up a Hono app with the Vercel template. This will serve as the foundation for our country-based blocking feature.



npm create hono@latest my-app
Enter fullscreen mode Exit fullscreen mode

After running the command above, select the Vercel template option.



? Which template do you want to use?

❯   vercel
Enter fullscreen mode Exit fullscreen mode

Then navigate into your app's directory and install the dependencies:




cd my-app

npm i
Enter fullscreen mode Exit fullscreen mode




Obtaining the Request Header

To identify the country of the incoming request, we'll make use of the x-vercel-ip-country header provided by Vercel Edge Functions. Here's how to access this header in your Hono app:




// File: api/index.ts



// ...



app.get('/', (c) => {



// Read more about this header on https://vercel.com/docs/edge-network/headers

  const INCOMING_COUNTRY_CODE = c.req.header('x-vercel-ip-country')



// ...
Enter fullscreen mode Exit fullscreen mode




Blocking Users

Now that we have the country code, let's create conditional responses based on the user's country. You can define a list of blocked country codes and handle requests accordingly:




// File: api/index.ts



// ...



const BLOCKED_COUNTRY_CODES = ['US', 'FR']



app.get('/', (c) => {

  // ...

  if (!INCOMING_COUNTRY_CODE) return c.html(Detected Country: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">)



// If the user is from a blocked country, return a specific response

  if (BLOCKED_COUNTRY_CODES.includes(INCOMING_COUNTRY_CODE.toUpperCase())) {

    return c.html(Detected Country: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">, I have blocked users from this country.)

  }



// Else, return your actual response

  return c.html(Detected Country: </span><span class="p">${</span><span class="nx">INCOMING_COUNTRY_CODE</span><span class="p">}</span><span class="s2">, Redirecting you to our main website...)

})



// ...
Enter fullscreen mode Exit fullscreen mode




Got latency concerns? It's heck fast.

To measure the latency of such a middleware, I measured the performance of the endpoint from different locations, using SpeedVitals Batch Report. Here's what it has to show about it 👇🏻

TTFB Endpoint Around World

Batch Report Link: https://speedvitals.com/result/TZSKWkx9/

The average TTFB being 33ms around the world! One would love to have such a powerful middleware on the edge for such a speed.

You're Done!

With these steps in place, you've learned how to effectively block users from specific countries based on their IP addresses. This can be a valuable feature for enhancing security and user experience on your website.

Comments 0 total

    Add comment