Keycloak | authorization_endpoint returns 400

I have followed the setup instructions for Keycloack using this doc file. I created a new realm named Myrealm and a new client with the name myapp and set the fields: Valid redirect URIs: http://localhost:5500 and Web origins: +

In Realm Settings > Security defenses I have the following value for CSP: frame-src 'self'; frame-ancestors 'self' http://localhost:5500/; object-src 'none';

I've also created a new user my.email@email.com and password password.

In my code I have just a simple webpage that runs on http://localhost:5500 with the following content :

<!DOCTYPE html>
<html>
  <head>
    <script src="./node_modules/keycloak-js/dist/keycloak.min.js"></script>
    <script>
      function initKeycloak() {
        const keycloak = new Keycloak({
          url: "http://localhost:8080/auth",
          realm: "Myrealm",
          clientId: "myapp",
        });
        keycloak
          .init()
          .then(function (authenticated) {
            alert(authenticated ? "authenticated" : "not authenticated");

            const body = new URLSearchParams();

            body.append("username", "my.email@email.com");
            body.append("password", "password");
            body.append("grant_type", "password");
            body.append("client_id", "myapp");
            body.append("realm", "Myrealm");
            fetch(
              "http://localhost:8080/realms/Myrealm/protocol/openid-connect/auth",
              {
                method: "POST",
                body,
              },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                  credentials:'include'
                },
              }
            );
          })
          .catch(function (err) {
            console.log(err);
            alert("failed to initialize");
          });
      }
    </script>
  </head>
  <body onload="initKeycloak()">
    <!-- your page content goes here -->
  </body>
</html>

However, when I open the application the API response is 400 with message Invalid parameter: redirect_uri

What I'm I missing ?

Keycloak | authorization_endpoint returns 400

0 Answers