WordPress + Astro Secure Deployment Guide: Using Token Instead of IP Whitelist

Why Vercel IP Whitelist Is Not Needed

The Problem with IP Whitelist

Many people consider adding Vercel or Cloudflare IP whitelist to Nginx config to protect the API:

location /wp-json/ {
allow 76.76.21.0/24; # Vercel
allow 103.21.244.0/22; # Cloudflare
deny all;
}

But this has a serious issue:

Vercel’s 76.76.21.0/24 IP range is shared – all applications deployed on Vercel use this IP range. Whitelisting this range means no restriction at all – anyone deployed on Vercel can call your API.

A More Secure Alternative: Token Verification

Using API Token verification is more reliable:

1. Only people with the Token can call the API
2. Even if deployed on Vercel, without the Token you cannot access it
3. Security doesn’t depend on IP ranges

---

Deployment Steps

Step 1: Add Token Verification on WordPress Side

Add to your theme’s functions.php:

// API Token Verification
add_filter('rest_authentication_errors', function($result) {
$auth_header = isset($_SERVER['HTTP_AUTHORIZATION']) ? $_SERVER['HTTP_AUTHORIZATION'] : '';

// Remove "Bearer " prefix
$token = str_replace('Bearer ', '', $auth_header);

$expected_token = 'YOUR_SECRET_TOKEN_HERE';

if ($token !== $expected_token) {
return new WP_Error('rest_forbidden', 'Invalid token', ['status' => 403]);
}
return $result;
});

Replace YOUR_SECRET_TOKEN_HERE with your secure Token.

Step 2: Add Authorization Header on Frontend

Add Token to all WordPress API requests:

.env file:

PUBLIC_WP_API_TOKEN=YOUR_SECRET_TOKEN_HERE

src/lib/wordpress.ts:

const response = await fetch(url.toString(), {
headers: {
'Authorization': 'Bearer ' + import.meta.env.PUBLIC_WP_API_TOKEN,
},
});

Step 3: Vercel Environment Variables Configuration

Add environment variable in Vercel dashboard:

1. Go to Settings → Environment Variables
2. Add:

• Name: PUBLIC_WP_API_TOKEN
• Value: Your Token
• Check: Production, Preview, Development

3. Click Save

Vercel will automatically redeploy.

---

Complete Security Architecture

Public Users → Cloudflare Tunnel → Nginx → WordPress
↓
Basic Auth (/wp-admin/)
↓
Token Verification (/wp-json/)

Path	Protection	Purpose
/wp-admin/	Basic Auth	Admin Panel
/wp-json/	Token Verification	API Interface

---

FAQ

1. Token verification fails, returns 403

Check:

• Does frontend correctly send Authorization: Bearer header?
• Does the Token in PHP code match the frontend?
• Ensure no extra spaces or line breaks

2. Token is empty during local development

During local development, ensure .env has:

PUBLIC_WP_API_TOKEN=YOUR_SECRET_TOKEN_HERE

3. API returns 404 after deployment

• Check if Cloudflare Tunnel is running
• Check if WordPress permalink is set to “Post name”
• Check if Nginx rewrite rules are correct

---

Related File Modifications

• functions.php – WordPress Token verification
• src/lib/wordpress.ts – Frontend API calls
• src/pages/about.astro – About page API call
• src/components/Sidebar.astro – Sidebar API call

---

Summary

• ❌ Not Recommended: IP Whitelist (Vercel shared IP = no restriction)
• ✅ Recommended: Token Verification (only those with Token can access)

This method is both secure and simple, and is the best practice for protecting WordPress REST API.