Getting a invalid redirect uri error when endpoint has a json string in query parameter

Version: 11.0.0
OS: mac

Currently trying to wrap my React application with Keycloak authentication
I am getting this redirect uri error when the url has a “{” or “}” character in the url

17:34:50,756 WARN [org.keycloak.events] (default task-33) type=LOGIN_ERROR, realmId=hysds, clientId=hysds_ui, userId=null, ipAddress=127.0.0.1, error=invalid_redirect_uri, redirect_uri=http://localhost:3000/tosca/on-demand?query={%22match_all%22:{}}&total=0

I’m currently running this locally to test out Keycloak and if it can integrate with our applications
these are my current keycloak settings:

// using keycloak-js on the frontend
const keycloak = Keycloak({
    realm: "hysds",
    clientId: "hysds_ui",
    url: "http://localhost:8080/auth/",
  });

Anytime I access a page with a json in the query parameter it re-directs to a keycloak page with this error:

We are sorry...
Invalid parameter: redirect_uri

Is there anything I can configure in the settings to allow for special characters in the url?

Thank you

It looks like the application needs to encode the URL to prevent this error

using encodeURI on the URL works :+1: