search

mauriciovigolo / keycloak-angular

Easy Keycloak setup for Angular applications.
MIT License
730 stars 280 forks source link

Error connecting shows ERROR undefined #589

Closed jfparrado closed 2 weeks ago

jfparrado commented 3 weeks ago

Bug Report or Feature Request (mark with an x)

i am trying to loging with a user that i created with its corresponding password

Versions.

angular: 17 keycloak image: quay.io/keycloak/keycloak

Repro steps.

I have the following setup in my angular project in app.module.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AssignmentsComponent } from './private/assignments/assignments.component';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { NavbarComponent } from './component/navbar/navbar.component';
import { HomeComponent } from './public/home/home.component';
import { HttpClientModule } from '@angular/common/http';
import {MatTabsModule} from '@angular/material/tabs';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment.development';

@NgModule({
  declarations: [
    AppComponent,
    AssignmentsComponent,
    NavbarComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    KeycloakAngularModule,
    HttpClientModule,
    MatTabsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        realm: 'keycloak',
        url: 'http://localhost:8080',
        clientId: 'login'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

I do have the '/assets/silent-check-sso.html' file. 

 <html>
  <body>
    <script>
      parent.postMessage(location.href, location.origin);
    </script>
  </body>
</html>

and this is the setup of it on docker compose 

igg-auth-keycloak:
    image: quay.io/keycloak/keycloak
    ports:
      - "8080:8080"
      - "8843:8443"
    environment:
      KEYCLOAK_ADMIN: xxx
      KEYCLOAK_ADMIN_PASSWORD: xxx
      KEYCLOAK_HTTP_PORT: 8080
      KEYCLOAK_HTTPS_PORT: 8443
      KC_HTTPS_CERTIFICATE_FILE: /opt/keycloak/demo/certs/fullchain.pem
      KC_HTTPS_CERTIFICATE_KEY_FILE: /opt/keycloak/demo/certs/privkey.pem
    command: 
      - start-dev
      - --import-realm
    volumes:
      - ./keycloak/realm.json:/opt/keycloak/data/import/realm.json
      - ./keycloak/igg-cert/:/opt/keycloak/demo/certs
    networks:
      - common-network

This is my package.json

{
  "name": "igg-doc-management-front-keycloak",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/material": "^17.0.4",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "igg-doc-management-front-keycloak": "file:",
    "keycloak-angular": "15.0",
    "keycloak-js": "^22.0.0",
    "ngx-socket-io": "^4.6.1",
    "rxjs": "~7.8.0",
    "socket.io": "^4.7.4",
    "tslib": "^2.3.0",
    "ws": "^8.16.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.7",
    "@angular/cli": "^17.0.7",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

The log given by the failure.

ERROR undefined

Desired functionality.

I would like to be able to login

mauriciovigolo commented 2 weeks ago

@jfparrado, with the current information, it's difficult to pinpoint the exact issue, but it may be related to your project's configuration. Could you please review the example project? It includes a similar setup using Docker, which might help identify any configuration differences.

As this does not appear to be an issue with the library itself, I will proceed to close this ticket.