I am hosting a React application and corresponding backend on the same Java WildFly server. Bearer tokens are verified when doing requests to a REST API. Until now, the React files were public available and authentication was handled client-side in the React code using the Keycloak JS adapter. This means that the whole application needed to be loaded before the authentication flow was started, after which the application is loaded again.
Flow: request and load index.html --> load scripts --> check authentication client-side --> redirect to Keycloak --> authenticate --> redirect to index.html --> load scripts again --> …
In order to speed up application load time, I want to have the index.html (that loads all necessary application scripts) only available to authenticated users.
Flow: request index.html --> check authentication server-side --> redirect to Keycloak --> authenticate --> redirect to index.html --> check authentication server-side --> load index.html --> load scripts --> …
My web.xml then would look like this:
<security-constraint> <web-resource-collection> <web-resource-name>User only section</web-resource-name> <url-pattern>/api/*</url-pattern> <url-pattern>/react/index.html</url-pattern> </web-resource-collection> <auth-constraint> <role-name>user</role-name> </auth-constraint> </security-constraint>
I tried to set autodetect-bearer-only to true, but then I get the following error when requesting the index.html page:
[org.keycloak.adapters.authentication.ClientIdAndSecretCredentialsProvider] (default task-1) Client ‘clientx’ doesn’t have secret available
This makes sense as the client’s access type is public (it’s used client-side) so there is no client secret.
Is it possible to configure the client in a way that it can be used both at server and client side?