Unable to authenticate the login of application user using Keycloak

Question

I am working over integration of React application with Keycloak. I have installed the Keycloak server version 11.0.2 over my local machine. I am able to access the administrative login and create the admin user. I have also created a custom client and user with credentials using the Keycloak. My react application is hosted over port 9000 of my machine and Keycloak over 8080 (default) port. Now, when I am redirecting to my application URL it is automatically redirecting to the below URL:

http://localhost:8080/auth/realms/{Custom_realm}/protocol/openid-connect/auth?client_id={Custom_Client}&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2F&state=r8yy83fdgd-27f8-4aa9-a679-01sfdsgd9&response_mode=fragment&response_type=code&scope=openid&nonce=27fedfgf89-66be-4484-bbcc-aabb4saddc4

URL is rendering the login page without the CSS. Not sure why the CSS is not getting rendered. Also it is not authenticating and giving error

Cannot POST /realms/{Realm}/login-actions/authenticate

Answer 1

Keycloak redirecting to login page because keycloak application url check user logged in or not before redirecting to application.

To debug your login page rendering without css need to know what changes you have done in that realm theme setting from admin and server themes folder because in default keycloak 11.0.2 it's rendering with css.

Tried to hit POST /authenticate from postman and browser it's working for me.

Authenticate working CURL REQUEST:

curl --location --request POST 'http://localhost:8080/auth/realms/test/login-actions/authenticate?session_code=pmE8VZtaYo4u5IN7vOQ_OLh9Ft_n-pftbBqzk9T2z-k&execution=7d28dd8f-6436-4280-a1da-51cbca5084c1&client_id=account&tab_id=hdEKLv2DNPg' \ --header 'Content-Type: application/x-www-form-urlencoded' \ --header 'Cookie: AUTH_SESSION_ID_LEGACY=16e87095-05df-4ca2-88c6-e0c7e2cf6199.milan-latitude-e5450; KEYCLOAK_SESSION_LEGACY=test/0805f781-d0e3-42cf-b34c-be110547d48c/16e87095-05df-4ca2-88c6-e0c7e2cf6199; KEYCLOAK_IDENTITY_LEGACY=eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI5YmMwNGZkOS1kZDQ3LTRhZmUtOWM1NC0wZWQ1NGFmMmU1MWIifQ.eyJleHAiOjE2MDE1NjYxMjksImlhdCI6MTYwMTUzMDEyOSwianRpIjoiYmJmNmE4ZmQtYzBjMi00MWQxLWJkMGEtY2MwZmVmNmViMzYxIiwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo4MDgwL2F1dGgvcmVhbG1zL3Rlc3QiLCJzdWIiOiIwODA1Zjc4MS1kMGUzLTQyY2YtYjM0Yy1iZTExMDU0N2Q0OGMiLCJ0eXAiOiJTZXJpYWxpemVkLUlEIiwic2Vzc2lvbl9zdGF0ZSI6IjE2ZTg3MDk1LTA1ZGYtNGNhMi04OGM2LWUwYzdlMmNmNjE5OSIsInN0YXRlX2NoZWNrZXIiOiIxV0pWUUN5cDRfcEJJQzZpNENRWnZKMzk2aFBhREdoYmNjWXlDT3VTUm13In0.bteyEEAhIWzbi2MdJAwp9ndCXsTPtjHiGBtMYUglWR0; oauth2_authentication_csrf_insecure=MTYwMDc3ODA2MnxEdi1CQkFFQ180SUFBUkFCRUFBQVB2LUNBQUVHYzNSeWFXNW5EQVlBQkdOemNtWUdjM1J5YVc1bkRDSUFJRFZoTlRaaU1qWTJZVEF6TWpRMk1HUmhaV0pqWWpJNU5UbGtOekl5TURRMXwGvq0FY6TUmmWfUmzaDwnTBf9KC-1Ni5N5pc4IXVcBIQ==; oauth2_consent_csrf_insecure=MTYwMDc3ODIzNXxEdi1CQkFFQ180SUFBUkFCRUFBQVB2LUNBQUVHYzNSeWFXNW5EQVlBQkdOemNtWUdjM1J5YVc1bkRDSUFJRGt3T0RCaVlXSTFZVFJqTVRSbE5HTTVaREUxWldZMFptTTVaREl5TUdNeXxmdLHoVF_3zSxhHR8F2zez-Q37wde7ZnPkb_wt_o-T9g==' \ --data-urlencode 'username=milan' \ --data-urlencode 'password=password'

Answer 2

I made the mistake of setting "Realm Settings" -> "General" -> "Frontend URL" to the homepage URL of the application the realm was for.

Don't do that.

Emptying that field and saving it resolved the issue for me.