Keycloak v.15.0.0 + React | Invalid parameter : redirect uri

Configuring the server
1

Hello,

I followed the steps for javascript adapter provide by Keycloak documentation but i’m having a problem. When i try to access to the keycloak login page when i start the application, it’s impossible to display it. If i change my URL route to go to a specific ressource, i have a keycloak page who is trigger but it tells me : Invalid parameter - redirect uri.

I configured the Valid Redirect URIs

image
image1147×71 6.59 KB

I have Nginx in front of Keycloak and i also configured proxy_set_header we pass to Keycloak

proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

Am i missing something ?

Any advice or suggestions would be great, thanks!

2

If you also have https://my-hostname in the field above (root url) you don’t have to specify it again, it won’t work.

example:
Root URL: http://domain.com
Valid Redirects: /test, /api, /files
will translate in valid http://domain.com/test, etc.

or you can use only * for valid redirects and it will accept any route for http://domain.com

3

As you know, your application redirects the user to keycloak auth endpoint, which shows user a login form.

After a successful login, keycloak needs to redirect your user back to your application. For security reasons, this should be a pre-approved URL on keycloak.

So, you must pay attention to the correct and exact form of this URL.

Let’s say your applications is accessible via https://my-machine:8443/application, and this is the redirect_uri. You should inform this exact url to keycloak.

You can use wildcards, like https://my-machine:8443/*, and you only need to inform the port if your user needs to include the port in the url to access your application.

It’s possible to see witch redirect_uri your application is trying to use, just inspect the url your browser is showing when the “invalid parameter - redirect uri” is shown by keycloak.

https://mykeycloak.example.com/auth/realms/myrealm/protocol/openid-connect/auth?client_id=mycliend&redirect_uri=http%3A%2F%2Fmy-application.example.com%2F&state=8c336aa3-8133-449c-8009-e5177d6f8d70&response_mode=fragment&response_type=code&scope=openid

Just take a look on the ```redirect_uri`` parameter. In this case, is:

redirect_uri=http%3A%2F%2Fmy-application.example.com%2F

You can use an online http decoder to get the original url: http://my-application.example.com/

Check those URLs and make sure you have this redirect_url in your valid redirect URIs list in keycloak.

1 Like