Hugo, Firebase Auth, Shortcodes - Problem of Variabel in JS to Variable in Hugo

I’m trying to create a website with hugo and firebase auth with google auth. If the user has not logged in, the user can only view part of the article. If the user is logged in, the user can see the entire article.

Param in hugo.toml :

[params]
  firebaseEnabled = true
  firebaseApiKey = "MyAPIKey"
  firebaseAuthDomain = "MyAuthDomain"
  firebaseProjectId = "MyProjectID"
  firebaseStorageBucket = "MyStorageBucket"
  firebaseMessagingSenderId = "MyMessagingSenderId"
  firebaseAppId = "MyAppId"

In HTML I have a navbar for login and logout like this:

<button type="button" class="btn-danger fw-semibold" id="signInButton" style="display: none; border: none; padding: 5px 20px; border-radius: 6px;">Login</button>
<button type="button" class="btn-success fw-semibold" id="signOutButton" style="display: none; border: none; padding: 5px 20px; border-radius: 6px;">Logout</button>

In intro.md :

---
title: "Your Page Title"
---

This is part of article.

{{< hidecontent >}}

This is the entire article.

{{< /hidecontent >}}

In shortcode, I have hidecontent.html like this :

{{$isUserLoggedIn := false}}

{{ if .Site.Params.firebaseEnabled }}
    <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
        import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";
        
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries
    
        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "{{ .Site.Params.firebaseApiKey }}",
            authDomain: "{{ .Site.Params.firebaseAuthDomain }}",
            projectId: "{{ .Site.Params.firebaseProjectId }}",
            storageBucket: "{{ .Site.Params.firebaseStorageBucket }}",
            messagingSenderId: "{{ .Site.Params.firebaseMessagingSenderId }}",
            appId: "{{ .Site.Params.firebaseAppId }}"
        };
    
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);

        const auth = getAuth();
        const provider = new GoogleAuthProvider()

        const signInButton = document.getElementById("signInButton");
        const signOutButton = document.getElementById("signOutButton");

        const userSignIn = async() => {
            signInWithPopup(auth, provider)
            .then((result) => {
                const user = result.user
                console.log(user);
            }).catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message
            })
        }

        const userSignOut = async() => {
            signOut(auth).then(() => {
                alert("You have signed out successfully!");
            }).catch((error) => {})
        }

        onAuthStateChanged(auth, (user) => {
            if(user) {
                signInButton.style.display = "none";
                signOutButton.style.display = "block";
                {{$isUserLoggedIn = false}};
                console.log('User is logged in:', {{$isUserLoggedIn}}); //Debug on console
                document.getElementById('loggedInStatus').innerText = 'true'; //Debug
                document.getElementById("userEmail").innerText = user.email; //Debug
            }else {
                signInButton.style.display = "block";
                signOutButton.style.display = "none";
                {{$isUserLoggedIn = true}};
                console.log('User is not logged in:', {{$isUserLoggedIn}}); //Debug on console
                document.getElementById('loggedInStatus').innerText = 'false'; //Debug
                document.getElementById("userEmail").innerText = 'No Email, you are not login'; //Debug
            }
        })

        signInButton.addEventListener('click', userSignIn);
        signOutButton.addEventListener('click', userSignOut);
        
    </script>
{{ end }}

<!-- Debugging -->
{{$isUserLoggedIn}} <!-- Display the current value of $isUserLoggedIn -->
<p id="loggedInStatus"></p> <!-- Display the login status for debugging -->
<p id="userEmail"></p> <!-- Display the login email for debugging -->
<!-- Debugging -->

{{ if eq $isUserLoggedIn true}}
    {{ .Inner | markdownify }}
{{ else }}
    <h4>You must login to view this content.</h4>
{{ end }}

When user not login the result like this :

{{$isUserLoggedIn}} -> false
<p id="loggedInStatus"></p> -> false
<p id="userEmail"></p> -> No Email, you are not login
In the console -> User is not logged in: false

When user login the result like this :

{{$isUserLoggedIn}} -> false
<p id="loggedInStatus"></p> -> true
<p id="userEmail"></p> -> abcd@gmail.com
In the console -> User is logged in: true

What I want to ask is, why is the result of {{$isUserLoggedIn}} always false, both in login and logout conditions? I suspect {{$isUserLoggedIn}} always takes the initial part that was defined first. How do you make sure the {{$isUserLoggedIn}} value can be updated like in Javascript?

So the code below can run according to user login and logout :

{{ if eq $isUserLoggedIn true}}
    {{ .Inner | markdownify }}
{{ else }}
    <h4>You must login to view this content.</h4>
{{ end }}

Hugo is a static site generator. Template actions are executed when you build the site, not when you visit the site.