How to access yml variables in javascript ?

I am trying to make a static webpage and I want that only the person with the password that I will give will be able to enter but the thing I also want to hide is so not anyone seeing my repo will be able to see it.

In the main.yml :

- name: run custom code
        run: console.log($message)
        env:
          message: "starting message"
          KEY: ${{ secrets.KEY }}
  

and I want to access it here in the index.js to check if user-input is similar to the password I set in the secrets:

$(document).ready(function(){
        var key = $KEY;//here
        
        $("#submit-btn").click(function(){
            alert("button clicked");
        var nameInput = $("#name").val();
        var keyInput = $("#password").val();
        if (nameInput == "Arihant" && keyInput == key) {
            alert("welcome");
            window.location.replace("./machine.html")

        }else{
            alert("Wrong User");
            
        }
});
});

pls, tell me how I can do it?