[FIXED] How can I hide an external API key in a Wordpress PHP file?

Issue

I've spent hours trying to research and solve this but am still struggling unfortunately.

I have created a custom 'courses' post type in Wordpress that involves using embedded Calendly event registrations. I am using the Calendly embed API to notify the parent window when an event registration takes place. The notification payload provides the URI of the event, which I then want to look up using the Calendly API and return the name of the event. I am struggling with hiding the API key in the header:

    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }

I've tried to add a line in wpconfig to define the key:

define( 'CALENDLY_KEY', '**key**' );

But I don't know how to then use this in my function without exposing it via 'echo'.

Any advice would be much appreciated.

Extended code below:

<!-- Calendly widget script -->
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

<script>function isCalendlyEvent(e) {
  return e.data.event &&
         e.data.event.indexOf('calendly') === 0;
};
 
window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
        if (e.data.event == "calendly.event_scheduled") {
            console.log("event scheduled!");
            let event_uri = e.data.payload.event.uri;
            console.log(event_uri);

            fetch(event_uri, {
  "method": "GET",
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }
})
.then(response => response.json())
  .then((json) => {
    console.log(json);
    let ordered_course = json.resource.name;
    console.log(ordered_course);

  })



        }
      console.log(e.data);
    }
  }
);</script>

Solution

You should use dotenv (.env) file for your API key.

You can install support for dotenv (.env) via the vlucas/phpdotenv package with Composer package manager for PHP on your server.

Easier option - if you don't have experience as you say, is to use a WordPress plugin dontenv, this you will create .env file and inside you will write MY_API_KEY=123456, then in your code, you can retrieve this .env key by using getenv('MY_API_KEY');

This is for PHP but your code is JS, so you should install npm package manager then run npm i dontenv then in your code Bearer ${process.env.MY_API_KEY}.

Also, .env files should not be uploaded on GitHub.

Answered By - Viktor Andonov