App.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Web Client</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" type="image/png" href="favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"
        referrerpolicy="no-referrer">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <!-- See https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter -->
    <script src="http://localhost:8080/auth/js/keycloak.js"></script>
    <script>
        let keycloak = null;
        let cyberchefUrlBase = "https://gchq.github.io/CyberChef/#recipe=JWT_Decode()&input=";

        //Credits: https://jsfiddle.net/magikMaker/7bjaT/
        function base64EncodeUrl(str) {
            return window.btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');
        }

        function initKC() {
            keycloak = new Keycloak({
                url: "http://localhost:8080/auth",
                realm: "demo",
                clientId: "demo"
            });

            keycloak.init().then(function (authenticated) {
                //See https://www.keycloak.org/docs/latest/securing_apps/#javascript-adapter-reference                
                let loginStateDiv = document.getElementById("loginState");
                let decodeAccessTokenLink = document.getElementById("decodeAccessTokenLink");
                let decodeIdentityTokenLink = document.getElementById("decodeIdentityTokenLink");
                loginStateDiv.innerText = "Anonymous";
                loginStateDiv.className = authenticated ? "alert alert-success" : "alert alert-secondary";
                if (authenticated) {
                    loginStateDiv.innerText = "Loading user profile...";
                    keycloak.loadUserProfile()
                        .then(function (profile) {
                            loginStateDiv.innerText = `Welcome user ${profile.username} !`;
                            decodeAccessTokenLink.href = cyberchefUrlBase + base64EncodeUrl(keycloak.token);
                            decodeIdentityTokenLink.href = cyberchefUrlBase + base64EncodeUrl(keycloak
                                .idToken);
                            console.info("USER PROFILE:")
                            console.info(profile);
                        }).catch(function (er) {
                            alert("Failed to load user profile: " + er.error);
                            console.error(er);
                        });
                    console.info("TOKENS:")
                    console.info(keycloak);
                }
            }).catch(function (err) {
                alert("Failed to initialize: " + err.error);
                console.error(err);
            });

            //See https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere
            let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })

        }

        function login() {
            //See https://www.keycloak.org/docs/latest/securing_apps/#login-options
            let options = {
                scope: "openid profile api",
                prompt: "consent"
            }
            keycloak.login(options);
        }

        function logout() {
            //See https://www.keycloak.org/docs/latest/securing_apps/#logout-options
            keycloak.logout();
        }
    </script>
</head>

<body onload="initKC()">
    <div class="container-lg">
        <div class="alert alert-primary" role="alert" id="loginState"></div>
        <button type="button" class="btn btn-primary" onclick="login()" data-bs-toggle="tooltip"
            title="Login user on Keycloak. Open developer Console to see tokens and profile information."
            data-bs-placement="top">Login</button>
        <button type="button" class="btn btn-primary" onclick="logout()" title="Logout user from Keycloak."
            data-bs-toggle="tooltip" data-bs-placement="top">Logout</button>
        <br />
        &#128187; <a target="_blank" id="decodeAccessTokenLink"
            href="https://gchq.github.io/CyberChef/#recipe=JWT_Decode()&input=">Decode Access Token</a><br />
        &#128187; <a target="_blank" id="decodeIdentityTokenLink"
            href="https://gchq.github.io/CyberChef/#recipe=JWT_Decode()&input=">Decode Identity Token</a>
    </div>
</body>

</html>