How to Set up and Use Basic Authentication With WordPress Rest API

The WordPress REST API opens the door to building apps that can talk directly to your site, whether you’re pulling in blog posts for a mobile app, creating content from an external form, or building a custom admin dashboard with JavaScript.

It’s a powerful way to work with WordPress beyond the usual wp-admin interface.

But before your app can interact with your site’s data, you’ll need a way to authenticate those requests. In this tutorial, we’ll walk through a real example using WordPress’s built-in Application Passwords to set up Basic Authentication.

You’ll learn how to build a simple standalone HTML page that connects to your WordPress site, fetching, creating, and deleting posts using the REST API. If you’re looking to understand how the REST API works in practice, this is a solid place to start.

What Is REST API, and How Does It Work?

A REST (Representational State Transfer) API (Application Programming Interface) communicates between different software components over the Internet. It allows developers to access and manipulate data and resources from a web service like WordPress using standard HTTP methods.

For example, using Javascript, you can use a REST API to create, read, update, or delete posts and pages on a WordPress site from another application.

A REST API is based on the principle of statelessness, which means that each request from a client to a server must contain all the information needed to process the request. The server does not store any information about the client’s state or history between requests. This makes the REST API more scalable, reliable, and efficient.

What Is Basic Authentication and Why Is It Important?

Basic authentication checks who you are when you want to use a web service. It works by sending your username and password in a simple way over the internet. The web service then looks to see if your username and password are right and lets you in or not.

Basic authentication is important because it helps to keep your data and resources safe from other people who should not see or change them. If there is no authentication, anyone can see and change your data and resources, which can cause problems or harm.

However, basic authentication also has some problems and dangers. For example, it does not hide your username and password, which means that someone who can see your internet request can also see your username and password easily.

How Does Basic Authentication Work?

Basic authentication is a simple way of verifying a client’s identity who wants to access a protected resource on a server. It works by sending the username and password of the client as part of the HTTP request.

Here are the steps involved in basic authentication:

• The client requests a URL that requires authentication, such as https://example.com/secret.
• The server responds with a 401 Unauthorized Error and a WWW-Authenticate header that indicates the type of authentication required, such as Basic realm=”Example”.
• The client encodes the username and password (or in the case of WordPress, an Application Password) in the format username:password and converts it to a base64 string, such as b3dhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=.
• The client sends the same request again, but this time with an Authorization header that contains the encoded credentials, such as Authorization: Basic b3dhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=.
• The server decodes the credentials and checks if they are valid. If they are, the server grants access to the requested resource and sends a 200 OK status code. If they are not, the server denies access and sends another 401 Unauthorized Error.

Basic authentication should only be used over HTTPS connections or in situations where there is a high level of trust between the client and the server. The client must clear the cache or close the browser to end the session, as there is no explicit logout or password change mechanism within the Basic Authentication process itself.

Authentication Methods for WordPress REST API

The WordPress REST API provides several authentication options designed for specific use cases. These options include Basic Authentication, OAuth Authentication, and Cookie Authentication.

• Basic Authentication: A way to send a username and password (specifically, a WordPress username and an Application Password) with a request. This method is suitable for external applications.
• OAuth Authentication: A way to let users give websites or apps access to their information on other websites without giving them their passwords. This often involves a more complex setup and typically requires a dedicated plugin.
• Cookie Authentication: A way to use cookies to check if a user is allowed to make a request and keep track of their session. This is the native WordPress authentication method for verifying users and their activities when interacting with the REST API from within the WordPress environment (e.g., via a theme or plugin for a logged-in user).

Cookie Authentication is the native WordPress authentication method for verifying users and their activities. For Basic Authentication with the WordPress REST API, you should use Application Passwords, which are a built-in feature of WordPress (since version 5.6) and do not require a separate plugin. OAuth Authentication typically still requires a dedicated plugin.

Understanding WordPress REST API Commands

Let’s look at some of the common REST API commands (HTTP methods) you can use to interact with your WordPress site. These are mentioned below:

• GET: Use this command to retrieve a resource, such as a post or data, from the server.
• POST: Use this command to add a new resource to the server.
• PUT: Use this command to update or edit an existing resource on the server.
• DELETE: Use this command to remove a resource from the server.

Using WordPress REST API Through a Practical Example

If you’re looking to understand the WordPress REST API with a real-world example, this hands-on tutorial is for you. We’ll build a simple HTML + JavaScript web page that lets you fetch, create, and delete posts on a WordPress site, all without touching the WordPress admin dashboard.

What We’re Building

A single HTML page with JavaScript that:

• Lists all posts from your WordPress site
• Lets you create new posts
• Allows deleting posts
• Shows feedback messages

Prerequisites

• A working WordPress site with administrator access
• REST API enabled (it’s on by default in WordPress)
• Access to the site’s files

I have my site already hosted on Cloudways so I’ll just use that for this tutorial.

Step 1: Create the HTML Structure

Create a new file called wp-api-dashboard.html and add this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress API Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .post { background: #f5f5f5; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
        .post h3 { margin-top: 0; }
        button { background: #0073aa; color: white; border: none; padding: 8px 15px; border-radius: 3px; cursor: pointer; }
        button:hover { background: #005177; }
        button.delete { background: #dc3232; }
        button.delete:hover { background: #a00; }
        #new-post-form { margin: 30px 0; padding: 20px; background: #f0f0f1; border-radius: 5px; }
        input, textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; }
        .message { padding: 10px; margin: 10px 0; border-radius: 3px; }
        .success { background: #d1e7dd; color: #0f5132; }
        .error { background: #f8d7da; color: #842029; }
    </style>
</head>
<body>
    <h1>WordPress API Dashboard</h1>
    
    <div id="messages"></div>
    
    <div id="new-post-form">
        <h2>Create New Post</h2>
        <input type="text" id="post-title" placeholder="Post Title">
        <textarea id="post-content" placeholder="Post Content" rows="5"></textarea>
        <button id="create-post">Publish Post</button>
    </div>
    
    <div id="posts-container">
        <h2>Your Posts</h2>
        <button id="refresh-posts">Refresh Posts</button>
        <div id="posts-list"></div>
    </div>

    <script>
        // Our JavaScript will go here
    </script>
</body>
</html>

This gives us:

• A clean, simple interface
• A form to create new posts
• A section to display existing posts
• Basic styling to make it presentable

Step 2: Configure the Dashboard

• Open the file (wp-api-dashboard.html) in your text editor.
• Find these lines and replace them with your WordPress details:

const config = {
    wpSiteUrl: 'https://yourwordpresssite.com', // Replace with your site URL
    username: 'your_username',                  // Your WordPress username
    password: 'your_application_password'       // The app password you generated
};

• wpSiteUrl: Your WordPress site URL (e.g., https://myblog.com).
• username: Your WordPress admin username.
• password: The Application Password you generated (from Users → Profile → Application Passwords).

Step 3: Open the Dashboard in a Browser

• Double-click the wp-api-dashboard.html file to open it in your browser.

• If it doesn’t load posts, you might need to run it on a local server (due to security restrictions). Here’s how:
  • Option 1: Use VS Code with the Live Server extension.
  • Option 2: Use XAMPP/WAMP to host it locally.
  • Option 3: Upload it to a web host (like Netlify Drop).

Step 4: Test It Out!

• Refresh Posts: Click the “Refresh Posts” button to load your WordPress posts.
• Create a Post: Fill in the title and content, then click “Publish Post.”
• Delete a Post: Click “Delete Post” on any post to remove it.

Success! It’s working as you can see from the GIF below.

We can also cross check it from our WordPress dashboard:

How to Protect Your WordPress REST API from Unauthorized Access

While the WordPress REST API is a powerful tool for developers, it also introduces a new surface area that malicious actors can target. Since the API exposes data and operations via HTTP, it’s important to think carefully about how it’s secured.

Before you start experimenting or building features with the REST API, make sure you have a full backup of your site in place. If something goes wrong — whether due to a misconfigured permission or a flawed API request — you’ll want a safe rollback point.

It’s also a good idea to work on a staging site rather than your live website. Testing API requests in a controlled environment ensures you don’t unintentionally expose sensitive data or break functionality for your visitors.

Beyond that, consider these best practices:

• Limit access: Only enable or expose API endpoints that are actually needed. Use permission callbacks to restrict access where possible.
• Use authentication: Even for custom routes, ensure users are properly authenticated before they can modify or view protected content.
• Monitor your site: Keep an eye on API usage and error logs. Unexpected requests or high-frequency access can be signs of abuse.
• Update regularly: Keep WordPress core, plugins, and themes updated to patch known vulnerabilities — some of which may affect exposed API routes.

The REST API isn’t inherently dangerous, but like any tool, it needs to be used with care. A few precautions upfront can save you a lot of headaches later.

Wrapping Up!

That wraps up the tutorial. We looked at how the WordPress REST API works and why it’s useful for interacting with your site’s data from outside the WordPress dashboard. You set up Basic Authentication using Application Passwords, built a standalone HTML page, and used JavaScript to fetch, create, and delete posts.

With this basic setup in place, you now have a working example of how external apps or tools can connect to WordPress. This foundation can be extended further as you start working with other endpoints like pages, media, or custom post types.

If you followed along, you should now have a clearer understanding of how the REST API fits into modern WordPress development.

Abdul Rehman

Abdul is a tech-savvy, coffee-fueled, and creatively driven marketer who loves keeping up with the latest software updates and tech gadgets. He's also a skilled technical writer who can explain complex concepts simply for a broad audience. Abdul enjoys sharing his knowledge of the Cloud industry through user manuals, documentation, and blog posts.

Get Connected on: Twitter Community Forum