GET http://localhost:9000/oauth2/authorization/oidc 404 (Not Found)

[Hein Smith]

Hi, perhaps someone might be able to assist.

When generating an angular front end with oauth enabled and using the HttpClient calls made to a back end via the proxy teturns: GET http://localhost:9000/oauth2/authorization/oidc 404 (Not Found)

proxy.conf.json

  "/api/test": {
    "target": "http://localhost:8082",
    "secure": false
  },
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  },
  "/management": {
    "target": "http://localhost:8080",
    "secure": false
  }

test.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {catchError, Observable, throwError} from 'rxjs';
import {Test} from "./test";

@Injectable({
  providedIn: 'root',
})
export class TestService {

  private baseURL = `/api`
  constructor(private httpClient: HttpClient) {}


  getAll(): Observable<Test[]> {
    return this.httpClient.get<Test[]>(this.baseURL + '/test')
      .pipe(
        catchError(this.errorHandler)
      )
  }


  errorHandler(error: any) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      // Get client-side error
      errorMessage = error.error.message;
    } else {
      // Get server-side error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }

}

history.json

{
  "actions" : [ {
    "module" : "init",
    "date" : "2024-01-13T15:54:09.573290743Z",
    "properties" : {
      "packageName" : "test",
      "projectName" : "test",
      "baseName" : "test",
      "endOfLine" : "lf",
      "indentSize" : 2
    }
  }, {
    "module" : "prettier",
    "date" : "2024-01-13T15:54:09.582166560Z",
    "properties" : {
      "packageName" : "test",
      "projectName" : "test",
      "baseName" : "test",
      "endOfLine" : "lf",
      "indentSize" : 2
    }
  }, {
    "module" : "typescript",
    "date" : "2024-01-13T15:54:09.588646593Z",
    "properties" : {
      "packageName" : "test",
      "projectName" : "test",
      "baseName" : "test",
      "endOfLine" : "lf",
      "indentSize" : 2
    }
  }, {
    "module" : "angular-core",
    "date" : "2024-01-13T15:54:09.602463806Z",
    "properties" : {
      "packageName" : "test",
      "projectName" : "test",
      "baseName" : "test",
      "endOfLine" : "lf",
      "indentSize" : 2
    }
  }, {
    "module" : "angular-oauth2",
    "date" : "2024-01-14T13:21:54.993699261Z",
    "properties" : {
      "packageName" : "test",
      "projectName" : "test",
      "indentSize" : 2,
      "baseName" : "test",
      "endOfLine" : "lf"
    }
  } ]
}

package.json

{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "description": "test",
  "license": "UNLICENSED",
  "engines": {
    "node": ">=20.10.0"
  },
  "jestSonar": {
    "reportPath": "target/test-results",
    "reportFile": "TESTS-results-sonar.xml"
  },
  "cacheDirectories": [
    "node_modules"
  ],
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --output-path=target/classes/static",
    "watch": "ng build --watch --configuration development",
    "test": "ng test --coverage",
    "lint": "ng lint",
    "eslint:ci": "eslint './**/*.{ts,js}'",
    "eslint": "eslint './**/*.{ts,js}' --fix",
    "prepare": "husky install",
    "prettier:check": "prettier --check '{,src/**/}*.{md,json,yml,html,js,ts,tsx,css,scss,vue,java,xml}'",
    "prettier:format": "prettier --write '{,src/**/}*.{md,json,yml,html,js,ts,tsx,css,scss,vue,java,xml}'"
  },
  "devDependencies": {
    "@angular-eslint/builder": "17.1.1",
    "@angular-eslint/eslint-plugin": "17.1.1",
    "@angular-eslint/eslint-plugin-template": "17.1.1",
    "@angular-eslint/schematics": "17.1.1",
    "@angular-eslint/template-parser": "17.1.1",
    "@typescript-eslint/eslint-plugin": "6.13.2",
    "@typescript-eslint/parser": "6.13.2",
    "eslint": "8.55.0",
    "@angular-builders/jest": "17.0.0",
    "@angular-devkit/build-angular": "17.0.6",
    "@angular/cli": "17.0.6",
    "@angular/compiler-cli": "17.0.6",
    "@types/node": "20.10.3",
    "@types/jest": "29.5.11",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "ts-jest": "29.1.1",
    "jest-preset-angular": "13.1.4",
    "jest-sonar-reporter": "2.0.0",
    "typescript": "5.2.2",
    "eslint-import-resolver-typescript": "3.6.1",
    "eslint-plugin-import": "2.29.0",
    "eslint-plugin-prettier": "5.0.1",
    "@prettier/plugin-xml": "3.2.2",
    "husky": "8.0.3",
    "lint-staged": "15.2.0",
    "prettier": "3.1.0",
    "prettier-plugin-java": "2.5.0",
    "prettier-plugin-packagejson": "2.4.7"
  },
  "dependencies": {
    "keycloak-js": "23.0.1",
    "@angular/animations": "17.0.6",
    "@angular/cdk": "17.0.2",
    "@angular/common": "17.0.6",
    "@angular/compiler": "17.0.6",
    "@angular/core": "17.0.6",
    "@angular/material": "17.0.2",
    "@angular/forms": "17.0.6",
    "@angular/platform-browser": "17.0.6",
    "@angular/platform-browser-dynamic": "17.0.6",
    "@angular/router": "17.0.6",
    "rxjs": "7.8.1",
    "tslib": "2.6.2",
    "zone.js": "0.14.2"
  }
}

As soon as the getAll() method gets invoked the 404 error occurs. Keycloak is used here and is running on port 9080.

Is there perhaps someone who could assist or point me in a direction if the usage of the HttpClient is correct and what might cause this?

[Hein Smith]

Some additional details, the issue seems to occur when hitting a protected endpoint which requests a redirect:

When changing the protected endpoint to unprotected, the call works:

.requestMatchers(new MvcRequestMatcher(introspector, "/api/**")).authenticated()

To:

.requestMatchers(new MvcRequestMatcher(introspector, "/api/**")).permitAll()