javascript - Keycloak | authorization_endpoint returns 400

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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>
    <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 😟?
                HTTP call return 400 means "400 Bad Request". try fetch URL with this "localhost:8080/auth/realms/Myrealm/protocol/openid-connect/auth"
– Bench Vue
                Sep 22, 2022 at 19:19
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.