Headless WordPress+React前端：用户认证与内容创建方案咨询

Hey Kasper, great to see you building a Headless WordPress + React setup for user-generated content—let’s walk through the best way to tackle your requirements step by step.

1. Should You Use a JWT Authentication Plugin? Absolutely—It’s the Optimal Solution #

Since you’re working with a decoupled stack (React frontend + WP backend), you need a way to authenticate users without relying on WP’s native cookie-based auth (which doesn’t play well with cross-domain requests). JWT is the perfect stateless, industry-standard solution here.

Here’s how to set it up:

• Install the JWT Authentication for WP REST API plugin (it’s the most popular and well-maintained option for this use case).
• Add these lines to your wp-config.php file to enable JWT and handle CORS (critical for React’s cross-domain requests):

  define('JWT_AUTH_SECRET_KEY', 'your-random-secure-secret-key-here'); // Generate a strong key with a tool like random.org
  define('JWT_AUTH_CORS_ENABLE', true);
  

• Test that the endpoint works by sending a POST request to /wp-json/jwt-auth/v1/token with a valid WP username and password—you should get a JWT token in return.

2. "Non-WP Users": What You Actually Need (And How to Build It) #

First, a quick clarification: WordPress’s content system relies on user IDs to associate content with creators, so you can’t fully bypass WP’s user system. When you say "non-WP users," I assume you mean users who don’t need access to the WP admin dashboard—only your React frontend.

Here’s the safest, most controllable way to implement this:

Option A: Custom REST Registration Endpoint (Recommended) #

The default /wp/v2/users registration endpoint is locked to admins by default (for good security reasons). Instead, build a custom endpoint to handle user signups:

1. Create a simple WP plugin (save this as custom-user-auth.php in /wp-content/plugins/):

   <?php
   /**
    * Plugin Name: Custom User Auth for Headless WP
    */
   
   add_action('rest_api_init', function () {
     register_rest_route('custom-auth/v1', '/register', [
       'methods' => 'POST',
       'callback' => 'custom_register_user',
       'permission_callback' => '__return_true', // Allow anonymous access to signup
     ]);
   });
   
   function custom_register_user(WP_REST_Request $request) {
     $params = $request->get_params();
     $username = sanitize_user($params['username']);
     $email = sanitize_email($params['email']);
     $password = $params['password'];
   
     // Basic validation
     if (empty($username) || empty($email) || empty($password)) {
       return new WP_REST_Response(['error' => 'Missing required fields'], 400);
     }
     if (username_exists($username) || email_exists($email)) {
       return new WP_REST_Response(['error' => 'Username or email already taken'], 409);
     }
     // Add password strength checks here if needed
   
     // Create user with a limited role (e.g., "Author" or a custom role)
     $user_id = wp_create_user($username, $password, $email);
     if (is_wp_error($user_id)) {
       return new WP_REST_Response(['error' => $user_id->get_error_message()], 500);
     }
   
     // Assign a role that lets them create content but not access the admin
     $user = new WP_User($user_id);
     $user->set_role('author'); // Or create a custom role with only content creation permissions
   
     // Generate JWT token for immediate login
     $jwt_payload = apply_filters('jwt_auth_token_before_sign', [
       'iss' => get_bloginfo('url'),
       'iat' => time(),
       'exp' => time() + (DAY_IN_SECONDS * 7), // 7-day expiration
       'data' => [
         'user' => [
           'id' => $user_id,
           'username' => $username,
           'email' => $email,
         ],
       ],
     ]);
     $token = JWT::encode($jwt_payload, get_option('jwt_auth_secret_key'));
   
     return new WP_REST_Response([
       'success' => true,
       'token' => $token,
       'user' => [
         'id' => $user_id,
         'username' => $username,
         'email' => $email,
       ],
     ], 201);
   }
   

2. Activate the plugin in your WP admin. Your React frontend can now send a POST request to /wp-json/custom-auth/v1/register with username, email, and password to create a user and get a JWT token instantly.

Option B: Unlock Default User Endpoint (Not Recommended) #

If you insist on using the default /wp/v2/users endpoint, you can modify its permissions with hooks—but this is riskier (it opens up your site to potential spam/bot signups):

add_filter('rest_authentication_errors', function ($result) {
  if (!empty($result)) return $result;
  $request = wp_get_rest_request();
  if ($request->get_route() === '/wp/v2/users' && $request->get_method() === 'POST') {
    return true; // Allow anonymous signups
  }
  return $result;
});

Stick with Option A for better control and security.

3. Let Users Create Content via React #

Once users are authenticated with JWT, here’s how to let them submit content:

1. Store the JWT token in React (use localStorage or sessionStorage—just make sure your site uses HTTPS to prevent token theft).
2. Send authenticated requests to WP’s REST API. For example, if you have a custom post type user_content, your React code might look like this:

   const submitUserContent = async (title, content) => {
     const token = localStorage.getItem('jwt_token');
     try {
       const response = await fetch('/wp-json/wp/v2/user_content', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${token}`
         },
         body: JSON.stringify({
           title: title,
           content: content,
           status: 'publish' // Or 'draft' if you want to moderate content first
         })
       });
       return await response.json();
     } catch (error) {
       console.error('Error submitting content:', error);
     }
   };
   

3. Configure permissions: Use a plugin like User Role Editor to make sure your user role (e.g., "Author") has permissions to create/edit your custom post type (look for permissions like edit_user_content or publish_user_content).

4. Critical Security Tips #

• Always use HTTPS to protect JWT tokens during transmission.
• Set a reasonable JWT expiration time (7 days is a good balance between convenience and security).
• Add CAPTCHA (like reCAPTCHA) to your signup/login forms to block bots.
• Avoid giving users more permissions than they need—create a custom role if the default ones are too broad.

内容的提问来源于stack exchange，提问作者Kasper Gantzhorn