CODEWITHSUNDEEP
javascriptangularkeycloakangular14
Razvan Zamfir
Razvan Zamfir

Reputation: 4616

What makes Keycloak Angular throw an error in this Angular 14 app?

I am working on an app in Angular 14 that requires authentication/authorization, reason for witch I use Keycloak Angular .

As per the instructions, I have first installed Keycloak Angular with:

npm install keycloak-angular keycloak-js

Then in fe\src\app\app.module.ts:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './shared/material.module';
import { FlexLayoutModule } from '@angular/flex-layout';

// Components
import { ErrorsComponent } from './shared/error.component';
import { AppComponent } from './app.component';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080/auth',
        realm: 'demo',
        clientId: 'my-app'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}
@NgModule({
  declarations: [
    ErrorsComponent,
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    KeycloakAngularModule
  ],
  exports: [],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have also added silent-check-sso.html to the src\assets\ directory.

The problem

At http://localhost:4200/, I only see a blank page and the browser throws the error:

Refused to display 'http://localhost:8080/' in a frame because it set 'X-Frame-Options' to 'deny'.

Questions

  1. What is causing this error?
  2. What is the easiest and most reliable way to fix it?

Upvotes: 0

Views: 1455

Answers (1)

Zsolt Balint
Zsolt Balint

Reputation: 775

This is due that Keycloak will prevent a website from including any login page within an iframe. This is to prevent clickjacking attacks.

To enable this just fallow this guide from keyclock documentation: https://www.keycloak.org/docs/15.0/server_admin/, just check after "Authorizing Iframes"

enter image description here

And also check if flags: checkLoginIframe is set to false.

Upvotes: 2

Related Questions