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
- What is causing this error?
- What is the easiest and most reliable way to fix it?
