6

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

keycloak realmI 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

tercou1
  • 349
  • 3
  • 8

3 Answers3

4

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

enter image description here

  • 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

tercou1
  • 349
  • 3
  • 8
0

I was researching on the internet and it is the same case, for me my angular page is reloading automatically in infnite loop

I did some changes in keycloak-init.ts file (please find following code and change checkLoginIframe from true to false) Old Code: keycloak.init ({onLoad: 'login-required', "checkLoginIframe": true}) New Code: keycloak.init ({onLoad: 'login-required', "checkLoginIframe": false})

Dharmendra Patel
  • 111
  • 1
  • 2
0
this.loadingService.isLoading$.pipe(delay(100)).subscribe((data => {
      this.loading = data
    }))

    this.isLogging = await this.keycloak.isLoggedIn();
    type roleUser = Array<{ id: number, text: string }>
    if (this.isLogging) {
      this.userProfile = await this.keycloak.loadUserProfile();
      this.userRoles = await this.keycloak.getUserRoles();
    }else { 
      // this.clearSession();
    }
  • if you are using "this.keycloak.loadUserProfile()" Remove this "clear session"
Sanka Gamage
  • 1
  • 2