I'm trying to implement an oidc client with keycloak for a react single-page application. The react frontend needs to access a Java-API, which requires a signed JWT from a configured oidc server (in my case keycloak).
We want to avoid storing the client-secret within the react-application, as it seems to be a rather bad practice (as the name already implies). I did manage to get it running when using "Implicit flow"; however, i fail to upgrade it to something like "Authorization code flow with pkce", as described in articles like this.
I'm currently posting a request to the /auth/realms/Test/protocol/openid-connect/auth, with following query parameters:
client_id = "client_id";
response_type = "code";
redirect_uri = "http://localhost/login.html";
scope = "openid";
nonce = "eGT0IRjpaz-USQSg2hoipYb3TEBAaSce";
code_challenge = "ZjFmNzM1YTBlMmMzZjk5MjMwNTk5NzE2Y2Q3M2MxZTdlYzhhYjVkYzRkN2YzN2EyYTBmYWJiNDUw";
code_challenge_method = "S256";
This works so far, and I receive the session_state and code as a query parameter on the login.html site.
However, that's where my confusion starts:
- Why are thous query parameters, shouldn't they be within the hash, so that the response isn't sent to the server?
- How to continue?
As far as I know, the next step would be to exchange these values for an actual token, by calling the
/tokenendpoint. But when I do that, keycloak will at some point start complaining about a missing client_secret, which I don't whant to provide.
Example params (form url encoded):
grant_type = authorization_code
code = <response from /auth>
redirect_uri = http://localhost/login.html
client_id = client_id
client_session = <response from /auth>
So my question: Where did I go wrong? It seems like I'm either using another flow and didn't realize it, misunderstand the flow entirely or I'm just not providing a specific parameter and keycloak complains about another one.
