Wp-source basic access authentication

Hello, I am new to Frontity (and relatively new to React) so I apologize if the answer is there and I have just not seen it.

I would like to use the REST API of a site that is protected with basic authentication. The reason is that the site is in development and has not been published. However I would like to develop the theme locally using Frontity.

The quick solution I found was to migrate the WordPress site to my computer and serve it with MAMP but this is not ideal for me, since in the future I will be working with bigger projects.

Is there a way we can specify the user and pass for basic authentication to the wp-source?

Hi @max

Welcome to the community. Great to hear that you’re trying out Frontity on a project that you’re working on.

Will the REST API protection be permanent, or is it only in place because the site is under development? If it’s only temporarily protected then do you only need to access it while your Frontity theme is in development, i.e. from your local dev machine?

If the answer to this last question is yes, i.e. you only need to access the protected API from your dev machine, then it will be fine to put the credentials in your code while you develop the theme. Just remember to remove them when you’re ready to go live! :smile:

If the protection on the API is permanent and the live Frontity site will need to authenticate then you need to look into a proxy to prevent the credentials being exposed in the client side JavaScript.

Hi Michael,

Thank you for your response. The answer to your questions is yes. The site is temporarily protected and I just need to access it from my local dev machine for development. My question then is, how do I set the basic authentication headers to the wp-source?

When the site gets published, the basic auth will be removed and I will deploy the Frontity application without credentials.

Hi @max

I think you’ll need to use the fetch action which will allow you to pass headers to the endpoint.

You may also find this thread helpful.

However, it seems to me that you’ll be adding extra code that you won’t need once the authentication is removed.

Unforunately, wp-source doesn’t support setting custom headers yet.

I’ve opened a Feature Discussion for this: Support for custom headers in Source packages.

We’re currently working on the WordPress preview support feature, which needs authentication via JWT. So I guess it’s a good time to review a general way to solve this problem :slightly_smiling_face:

Thank you Luis and Michael for your input and for opening the Feature Discussion. I started reading the wp-source source code and was able to modify it slightly to send custom headers and got it working partially, but unfortunately that caused a lot of ugly CORS issues. Probably what went wrong here was my lack of front end experience.

Solution for now was to remove the basic auth on the site and install the plugin “Password Protected” https://wordpress.org/plugins/password-protected/ to protect the site with a password and exclude the REST API from that protection and everything worked beautifully.

2 Likes

Awesome. I’m glad you solved it :smile: