How to Dynamically Pass User-Submitted API Credentials for WordPress.org Integration?

I’m currently working on integrating my Bubble app with a WordPress.org site using the WordPress REST API and Application Passwords for authentication. The goal is to allow users of my Bubble app to interact with the WordPress site (like submitting posts, retrieving their own content, etc.) in a secure manner.

The challenge I’m facing is about securely handling the authentication process. I understand that using Application Passwords is the way to go for REST API requests, but I’m stuck on how to dynamically and securely pass the user-submitted WordPress credentials (username and application password) for each API call made from Bubble.

Here’s what I’m trying to achieve:

  • Users provide their WordPress username, domain, and application password through a secure form in the Bubble app.
  • These credentials are then used to dynamically set up the API calls in the Bubble API Connector, ensuring that each user’s actions are authenticated against their own WordPress account.

I’m aware of the potential security implications and want to ensure that these credentials are handled as securely as possible, without exposing them unnecessarily or storing them insecurely.

Questions for the Community:

  1. Has anyone successfully set up a similar dynamic and secure integration between Bubble and WordPress using Application Passwords? How did you manage the dynamic passing of credentials?
  2. Are there best practices or patterns in Bubble for securely handling user-submitted credentials for API calls? Especially interested in any native Bubble features or plugins that could help.
  3. Any tips on ensuring that these credentials are stored and transmitted securely throughout the process?

I was able to figure it out.

essentially when users submit their username and application password on your site you have to encode them using base64. I used a free plugin to do this, then sending the api with authorization key and field: basic base64encoded[username:apppassword]

remove base64encoded so the end result would look like this: basic tuituysafdtgasghfd== or whatever the base64 encoded username:apppassword is.

Sorry if it is a stupid question: how do you pass the dynamic value to the Authorization header in the Api call?
I mean: you can pass dynamic values through parameters for url and body, but I can’t figure out how to do it with headers