How to get token from a keycloak confidential client?

Question

For frontend react, I am using ReactKeycloakProvider as a way to require user to login, then token should be stored into Keycloak from 'keycloak-js'.

    <ReactKeycloakProvider 
      authClient={MYKEYCLOAK} 
      initOptions={{onLoad: 'login-required'}}
    >
      <BrowserRouter>
        <MainRouter />
      </BrowserRouter>
    </ReactKeycloakProvider>

For Keycloak, I am using Keycloak v.20.0.2, the client access type is set to confidential as it is required, Client Authenticator is Client Id and Secret.

The problem is that, after user login, I cannot get the token, an error 401 occurs:

    {
       "error":"unauthorized_client",
       "error_description":"Invalid client or Invalid client credentials"
     }

. However, I am expecting to get the token successfully.

I have set the access type into public, then token is retrieved successfully. However, when I set it into confidential, 401 error will occurs. So I think it is because I have not put client secret into the keycloak object.

Also, tried to have a keycloak.json for putting client secret into keycloak config, like this:

import Keycloak from 'keycloak-js';
const KEYCLOAK = new Keycloak('/keycloak.json');

But it can only be recognize when the .json is placed in public folder, which is weird, and infinite loop will occurs.

Offertory

Answer 1

my problem was that client authentication was set to true , once i changed it to false it worked:

Psychokinesis

Brother, you saved my skin. I've been going like a mad man for 4 days trying to figure out what I'm doing wrong. In my blissful ignorance I enabled this option in my early keycloak setup thinking that this is enabling the users to enter their credentials. I fell stupid like a chicken... I've been reading so much about all these client types but I could not figure out that I did the wrong setup. You have my upvote. Thank you! – Collegian

The funny thing is that I'm doing authorization code + PKCE so I don't want client authorization :D. Basically your answer seems to be serving another purpose, yet it enabled me to double check my settings. Cheers! – Collegian

Answer 2

If you are developing a frontend app like with React, then you should use a public client. See the Keycloak docs here:

https://www.keycloak.org/docs/20.0.5/securing_apps/index.html#_javascript_adapter

One important thing to note about using client-side applications is that the client has to be a public client as there is no secure way to store client credentials in a client-side application. This makes it very important to make sure the redirect URIs you have configured for the client are correct and as specific as possible.

To use the JavaScript adapter you must first create a client for your application in the Keycloak Admin Console. Make sure public is selected for Access Type. You achieve this in Capability config by turning OFF client authentication toggle.

Zugzwang

so how will the authentication be done if the client secret/credentials is not stored on the client-side? Will I just have to manually pass my username and password in order to get my token? – Squill

Answer 3

If you added the wrong URL when making your API request to Keycloak, you might receive an "unauthorized_client" error with the message "Invalid client or Invalid client credentials".

To fix this, make sure you're using the correct URL for the Keycloak server in your API request. You can find the correct URL for your Keycloak server in the Keycloak Admin Console under Realm Settings > General > "Issuer URL". https://usw2.auth.ac/auth/realms/{your-realm}/protocol/openid-connect/token/ Once you have the correct URL, update your API request with the new URL and try again. This should resolve the "unauthorized_client" error

Tamelatameless

Answer 4

For client side applications you don't need to turn on the Client authentication and Authorization.

Keycloak doc - https://www.keycloak.org/docs/latest/server_admin/index.html#con-basic-settings_server_administration_guide

Gittens

Answer 5

It could be only due to the fact that you give a wrong client secret to your react app. Double-check your client secret in the credentials tab (inside keycloak) with the one you give to your app.

Bustard