'Keycloak Javascript failed to inicialize

I'm trying to use Keycloak with JavaScript this are the steps I followed.

I create a client inside KeyCloak admin panel. enter image description here 2.I copy the .JSON file to my apache folder.

{ "realm": "master", "auth-server-url": "http://localhost:8080/auth", "ssl-required": "external", "resource": "test", "public-client": true, "confidential-port": 0 }

3.I go to my index.html and I add this two lines for call the script.

<html>
    <head>
        <link rel="stylesheet" href="assests/css/styles.css">
        <script src="http://local:8080/auth/js/keycloak.js"></script>
        <script src="assests/js/myLogic.js"></script>


    <script src="keycloak.js"></script>
    <script>
        function initKeycloak() {
            const keycloak = new Keycloak();
            keycloak.init().then(function(authenticated) {
                alert(authenticated ? 'authenticated' : 'not authenticated');
            }).catch(function() {
                alert('failed to initialize');
            });
        }
    </script>

this is what i have in myLogical.js

var keycloak = new Keycloak();

function initKeycloak() { keycloak.init({onLoad: 'login-required'}).then(function() { constructTableRows(keycloak.idTokenParsed); pasteToken(keycloak.token); }).catch(function() { alert('failed to initialize'); }); }

function constructTableRows(keycloakToken) { document.getElementById('row-username').innerHTML = keycloakToken.preferred_username; document.getElementById('row-firstName').innerHTML = keycloakToken.given_name; document.getElementById('row-lastName').innerHTML = keycloakToken.family_name; document.getElementById('row-name').innerHTML = keycloakToken.name; document.getElementById('row-email').innerHTML = keycloakToken.email; }

function pasteToken(token){ document.getElementById('ta-token').value = token; document.getElementById('ta-refreshToken').value = keycloak.refreshToken; }

var refreshToken = function() { keycloak.updateToken(-1)

I tried to download the file keycloak.js and put it directly on my root folder but it happen the same problem. These is the message I got when I try to open the page

javascript keycloak

Solution 1:^[1]

I'm confused about point 1, does keycloak automatically load configuration from json file in Apache folder? Let's assume that no, and I think that where your problem lies, you're not passing config param to keycloak constructor.

How to initialize keycloak:

const initKeycloak = async () => {
    //you can hardcode these values for now just to see if everything works
    const config = { url: 'http://localhost:8080/auth', realm: 'master', clientId: 'test'};

    const keycloak = new Keycloak(config);

    await keycloak
            .init({ onLoad: 'login-required' })
            .then(isAuthenticated => {
                //user is authenticated
             })
             .catch(error => { console.log('keycloak error', error); });
}

Another important thing is that keycloak-js library version (in package.json) must match keycloak server version. Sometimes different versions work with each other but it's always best practice that keycloak-js version matches keycloak server version.

You can also look here: https://github.com/m-s7/react-core/blob/devel/src/services/keycloak-service.ts this is my repo with working keycloak-js implementation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Keycloak Javascript failed to inicialize

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]