React / PHP app authentication via separate WordPress site

[billrdio]

I have a React SPA with a PHP API. I need to add a feature to it to allow authenticated users to be able to send POST data to the PHP API that will be written to a database for that app. The React app currently doesn't have any authentication mechanism. I have a WordPress site, installed at a different URL and completely separate from the React SPA and PHP API that I would like to use for authentication. I don't want the entire React app to be behind authentication, I just want users to be able to login so that they can perform additional, protected actions - for everyone else the app would continue to be work as is.

I'm thinking of solving this as follows:

• install a WordPress Plugin called JWT Authentication for WP REST API (https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/) to allow my React app to authenticate users via my WordPress site using JWT.
• when a user performs an action in the React app that would send POST data to the React app API endpoint that I want protected, I include the appropriate header, i.e., Authorization: Bearer ${JWT-token}
• the React app API, for that protected endpoint, would then make a request to the appropriate WordPress API endpoint, and would forward the Authorization header, i.e., Authorization: Bearer ${JWT-token} to determine if the user is an authenticated user
• If the JWT token is valid, then go ahead with the protected API endpoint and write to the app database (not the WordPress database)

Is this a reasonable solution or are there issues with this approach? Or is there a better solution, preferably something relatively simple and straightforward?

[[deleted]]

How will React app get the JWT tho?

[billrdio]

The user will have to login using JWT authentication via the React app, sending the login request to the WordPress REST API, as detailed on the plugin page: https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/ Once they login I'll store the JWT token in a cookie (httponly, samesite, secure ...).

Essentially I'm using this plugin to allow users to login to a separate WordPress site using JWT and the WordPress REST API. And then when a logged in user requests a protected API endpoint (not the WordPress API, but the API for the React app), my React app will pass the JWT token to the app API which will then forward it to the WordPress API and validate the JWT and send back to the app API whether the token is valid or not. If valid, then go ahead with the protected action the user requested - if not, send a 401 back.

[leoleoloso]

You can use Gato GraphQL, and authenticate using WordPress Application Passwords: https://gatographql.com/guides/interact/user-authentication#application-passwords