Client secret not provided in request error - Keycloak, React, Typescript

Question

So I'm fairly new with using Keycloak and I'm using this tutorial to install it with my React & TS app.

https://blog.devgenius.io/security-in-react-and-webapi-in-asp-net-core-c-with-authentification-and-authorization-by-keycloak-89ba14be7e5a

That author says we should set the Access Type to confidential.

I've done the settings he says there (literally the same) and I get

{"error":"unauthorized_client","error_description":"Client secret not provided in request"}

my keycloak.json (which is in the public/ folder)

{
    "realm": "best-realm",
    "auth-server-url": "http://localhost:28080/auth/",
    "ssl-required": "external",
    "resource": "best-react",
    "verify-token-audience": true,
    "credentials": {
      "secret": "secret"
    },
    "use-resource-role-mappings": true,
    "confidential-port": 0
  }

KeycloakService.tsx

import Keycloak from "keycloak-js";

const keycloakInstance = new Keycloak();

/**
 * Initializes Keycloak instance and calls the provided callback function if successfully authenticated.
 *
 * @param onAuthenticatedCallback
 */
const Login = (onAuthenticatedCallback: Function) => {
  keycloakInstance
    .init({ onLoad: "login-required" })
    .then(function (authenticated) {
      authenticated ? onAuthenticatedCallback() : alert("non authenticated");
    })
    .catch((e) => {
      console.dir(e);
      console.log(`keycloak init exception: ${e}`);
    });
};

const KeyCloakService = {
  CallLogin: Login,
};

export default KeyCloakService;

Why am I getting this error? I've read some posts that access type confidential doesn't work anymore with a JS adapter. But those posts were older than the posting date of that tutorial (it is written in may 2022). So I don't know what to believe.

Can anybody help me understand this error and teach me how to fix it?

Thanks.

score 1 · Accepted Answer · answered Aug 27 '22 at 18:20

In keycloak.js removed "credential" access type option.

Official comment about this since Keycloak 8.0.0

https://www.keycloak.org/docs/latest/release_notes/#credentials-support-removed-from-the-javascript-adapter

You should be use public option in front-end side. The public option with PCKE(Proof Key for Code Exchange) is protect to steal token that is intended for another app.

Understanding benefits of PKCE vs. Authorization Code Grant

This web site shows how to use PCKE from Keycloak

https://www.appsdeveloperblog.com/pkce-verification-in-authorization-code-grant/

Client secret not provided in request error - Keycloak, React, Typescript

1 Answers1