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

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

? Which template do you want to use?

❯   vercel

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

cd my-app

npm i

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')

// ...

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...)

})

// ...

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 👇🏻

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.