Angular 12 integration with Keycloak, build problems

Question

I'm trying to execute the following tutorial to integrate an Angular 12 application with Keycloak: Keycloak Integration with Angular Frontend (I've checked other similar tutorials and the instructions are the same).

As described in the article, I've inserted the following lines in src\environments\environment.ts:

import { KeycloakConfig } from 'keycloak-angular';

// Add here your keycloak setup infos
let keycloakConfig: KeycloakConfig = {
  url: 'http://<my-keycloak-ip:8088>/auth',
  realm: '<my-realm-name>',
  clientId: '<my-client-id>',
  "credentials": {
    "secret": "<my-client-secret>"
  }  
};

export const environment = {
...
  keycloak: keycloakConfig,
...
};

When I start the application with ng serve, I got the following build error:

Error: src/environments/environment.ts:14:7 - error TS2322: Type '{ url: string; realm: string; clientId: string; credentials: { secret: string; }; }' is not 
assignable to type 'KeycloakConfig'.
Object literal may only specify known properties, and '"credentials"' does not exist in type 'KeycloakConfig'.

14       "credentials": {
~~~~~~~~~~~~~~~~
15         "secret": "<my-client-secret>"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
17       }
~~~~~~~

I'using Angular v12 and keylcoak-angular 8.2.0 + keycloak-js 13.0.1, in any case, below are the full ng version output and package.json contents.

ng version:

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.4
Node: 12.18.0
Package Manager: npm 6.14.4
OS: win32 x64

Angular: 12.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@schematics/angular             12.0.4
rxjs                            6.5.5
typescript                      4.2.4

package.json:

{
  "name": "<my-angular-app>",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.4",
    "@angular/cdk": "^12.0.4",
    "@angular/common": "~12.0.4",
    "@angular/compiler": "~12.0.4",
    "@angular/core": "~12.0.4",
    "@angular/forms": "~12.0.4",
    "@angular/material": "^12.0.4",
    "@angular/platform-browser": "~12.0.4",
    "@angular/platform-browser-dynamic": "~12.0.4",
    "@angular/router": "~12.0.4",
    "admin-lte": "^3.0.5",
    "keycloak-angular": "^8.2.0",
    "keycloak-js": "^13.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.4",
    "@angular/cli": "~12.0.4",
    "@angular/compiler-cli": "~12.0.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}

Answer 1

I wouldn't follow random "tutorials". Especially if they expose client secret in the Angular app = anyone can read that secret in the browser. So secret won't be secret anymore.

A client application is considered public when an end user could possibly view and modify the code. This includes Single-Page Apps (SPAs) or any mobile or native applications. In both cases, the application can't keep secrets from malicious users.

Public client (client without secret) must be used in the SPA apps and also OIDC flow, which is not using secret - Authorization Code Flow with PKCE. Use mature OIDC certified library e.g. https://github.com/damienbod/angular-auth-oidc-client or configure keycloak-js lib properly (e.g. checkLoginIframe: false, pkceMethod: 'S256' - check documentation).

Answer 2

the latest library guide does not contain any "credentials" in the configuration. try removing this piece at all, it shouldn't be there