How to access astro props inside a script tag?

I am a new user testing out Astro. I currently have the following:

index.astro

---
import App from "../components/App.astro"
import KeycloakApp from "../components/KeycloakApp.astro";
const isAuthEnabled = true;   //switch for local dev vs deployment
var isAuthenticated = true;  //placeholder for keycloak component
if (!isAuthenticated) {
    console.log("redirect")
    return Astro.redirect('/Welcome');
}
---
{isAuthEnabled ? <KeycloakApp isAuthenticated={isAuthenticated} /> : <App />}

KeycloakApp.astro

---
import App from "../components/App.astro"
var {isAuthenticated} = Astro.props;
---
<!-- Keycloak wrapper of the regular App -->
<button id="flip">click me to flip isAuthenticated!</button>
<script>
    function flip() {
        console.log($isAuthenticated);
        isAuthenticated = !{isAuthenticated};
        console.log(isAuthenticated);
    }
</script>
{isAuthenticated && <App />}

How can I access the value of isAuthenticated inside my script? The name isAuthenticated cannot be found.

I am trying to reference the docs here