How do I solve the keycloak refresh /#state on my angular7 project - i'm using keycloak-angular

Question

I have also tried all varying combinations for web origins and valid redirect URIs

I login via keycloak and it continuously redirects me back and forth between my localhost application and this url: http://localhost:4200/#state=166446fd-daf6-4b76-b595-583c01c663df&session_state=57ead1f3-bf41-4117-9ddf-75e37c9248e7&code=8692b58b-0868-4762-b82e-acde9911dd34.57ead1f3-bf41-4117-9ddf-75e37c9248e7.1e8b5b9d-b590-453e-b396-62b46c18cc9f

I have tried it on firefox and chrome but with the same issue - it seems to be looking for the keycloak.json file in the network tab even though I can login to the correct realm via keycloak

GET http://localhost:4200/keycloak.json 404 (Not Found) scheduleTask @ zone.js:2969

ERROR An error happened during Keycloak initialization. core.js:1601

Unhandled Promise rejection: An error happened during Keycloak initialization. ; Zone: ; Task: Promise.then ; Value: An error happened during Keycloak initialization. undefined

static init(): Promise<any> {
    const keycloakAuth: any = Keycloak({
        url: 'http://localhost:8080/auth',
        realm: 'ContractPortal',
        clientId: 'secretkey2',
        'ssl-required': 'external',
        'public-client': true
    });

    KeycloakService.auth.loggedIn = false;

    return new Promise((resolve, reject) => {
        keycloakAuth.init({onLoad: 'login-required'})
            .success(() => {
                console.log(keycloakAuth);
                KeycloakService.auth.loggedIn = true;
                KeycloakService.auth.authz = keycloakAuth;
                KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl
                    + '/realms/angular_keycloak/protocol/openid-connect/logout?redirect_uri='
                    + document.baseURI;
                resolve();
            })
            .error(() => {
                reject();
            });
    });
}

it'd be great if one of you guys can point me in the right direction to solve this issue...

I have found another similar question to what I have asked link but not sure how to implement this solution! this is my provider setup -
providers: [ { provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [KeycloakService] } ],

but OP puts the following in his provider providers: [ KeyCloakService, AssetService, { provide: LocationStrategy, useClass: PathLocationStrategy } ]

Please let me know if you require any other information

Answer 1

For anybody that ran into the same issue - I misunderstood the keycloak.json file and did not know where to get it - so I was exporting the complete json file from keycloak but THIS is not how you should get it!!

First you have to go to your realm > clients and click on installation

• then download the keycloak OIDC json file

• then place it next to the index.html file in your application

This solved my issue - hope it helps somebody else