Keycloak with Angular and Spring error: GET http://localhost:8180/auth/realms/Storage/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)

Question

I'm trying to integrate Keycloak with Spring Boot and Angular.

Security works correctly. When I'm trying to access secured endpoint manually through browser localhost:8080/products/1 (products is entity in my database), then I'm redirected to Keycloak login client, after logging in I have access to the endpoint.

I've been folowing this tutorial.

Problem occurs when I'm trying to access localhost:4200 (Angular app main page), in browser console I receive this error:

keycloak.js:1305 GET http://localhost:8180/auth/realms/Storage/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)

Spring configuration file: application-local.yml

keycloak:
  auth-server-url: 'http://localhost:8180/auth'
  realm: 'Storage'
  resource: 'storage-app-client'
  public-client: true
  principal-attribute: test123

Rest of the configuration files is taken from tutorial mentioned above.

Keycloak realm:

Keycloak initialization in Angular:

@Injectable({
  providedIn: 'root'
})
export class KeycloakService
{
  private keycloakAuth: KeycloakInstance;

  constructor()
  {
  }

  init(): Promise<any>
  {
    return new Promise((resolve, reject) =>
    {
      const config = {
        'url': 'http://localhost:8180/auth',
        'realm': 'Storage',
        'clientId': 'storage-app-client'
      };
      // @ts-ignore
      this.keycloakAuth = new Keycloak(config);
      this.keycloakAuth.init({onLoad: 'login-required'})
        .success(() =>
        {
          resolve();
        })
        .error(() =>
        {
          reject();
        });
    });
  }

  getToken(): string
  {
    return this.keycloakAuth.token;
  }

  logout()
  {
    const options = {
      'redirectUri': 'http://localhost:4200',
      'realm': 'Storage',
      'clientId': 'storage-app-client'
    };
    this.keycloakAuth.logout(options);
  }
}

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from "@angular/common/http";
import {MatSliderModule} from '@angular/material/slider';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {RouterModule} from '@angular/router';
import {NavbarComponent} from './components/navbar/navbar.component';
import {MainContentComponent} from './components/main-content/main-content.component';
import {ProductComponent} from './components/products/product/product.component';
import {HomeComponent} from './components/home/home.component';
import {ProductGroupComponent} from './components/productGroups/productGroup/product-group.component';
import {FooterComponent} from './components/footer/footer.component';
import {MatTableModule} from "@angular/material/table";
import {MatButtonModule} from "@angular/material/button";
import {MatPaginatorModule} from "@angular/material/paginator";
import {ProductUpdateComponent} from './components/products/product-update/product-update.component';
import {MatFormFieldModule} from "@angular/material/form-field";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";
import {ProductCreateComponent} from './components/products/product-create/product-create.component';
import {MatSortModule} from "@angular/material/sort";
import {ProductGroupUpdateComponent} from './components/productGroups/product-group-update/product-group-update.component';
import {ProductGroupCreateComponent} from './components/productGroups/product-group-create/product-group-create.component';
import {MatExpansionModule} from "@angular/material/expansion";
import {MatSelectModule} from "@angular/material/select";
import {LogoutComponent} from "./components/logout/logout.component";
import {KeycloakService} from "./services/keycloak-service.service";
import {TokenInterceptor} from "./interceptors/token-interceptor";

export function kcFactory(keycloakService: KeycloakService) {
  return () => keycloakService.init();
}

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    MainContentComponent,
    ProductComponent,
    HomeComponent,
    ProductGroupComponent,
    FooterComponent,
    ProductUpdateComponent,
    ProductCreateComponent,
    ProductGroupUpdateComponent,
    ProductGroupCreateComponent,
    LogoutComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatSliderModule,
    MatToolbarModule,
    MatIconModule,
    RouterModule.forRoot([
      {path: '', component: HomeComponent},
      {path: 'products/update/:id', component: ProductUpdateComponent},
      {path: 'products/add', component: ProductCreateComponent},
      {path: 'groups', component: ProductGroupComponent},
      {path: 'groups/add', component: ProductGroupCreateComponent},
      {path: 'groups/update/:id', component: ProductGroupUpdateComponent},
      {path: 'logout', component: LogoutComponent},
    ]),
    MatTableModule,
    MatButtonModule,
    MatPaginatorModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatInputModule,
    MatSortModule,
    MatExpansionModule,
    MatSelectModule,
    FormsModule
  ],
  providers: [KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: kcFactory,
      deps: [KeycloakService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Keycloak client

Answer 1

I feel your pain. I was following today this tutorial and got stuck in the same GET 404 error:

https://dev.to/anjnkmr/keycloak-integration-in-angular-application-5a43

The error comes from keycloak-js package. After a couple of hours of trying to find the cause I checked the release versions of keycloak-js and found that new version 11 was released 6 days ago (and which I was using).

I switched to version 10.0.2 for keycloak-js package.

To sum up here are the versions:

keycloak: 10.0.1

keycloak-js: 10.0.2

keycloak-angular: 8.0.1 (if you use it)

angular: 10** (in a desperate move I have upgraded from angular 9 to 10, I do not know if it had an impact)

Therefore for me it was the new version of keycloak-js package that caused all of the trouble.

I would suggest you try downgrading the version of keycloak-js to 10.0.2