Keycloak Invalid Redirect Uri, Page not found error

Issue

I am trying to integrating keycloak with angular but I am facing issue invalid_redirect_uri/Page_not_found error.

Spent hours on googling but failed.

Solution

A quick way to get the right configuration settings is in the upper right corner on the client detail page.

There is a dropdown with the option

Download adapter config

This should present the config to you, as Keycloak expects it to be.

Answered By - Stefan Beller

Read More

Client secret not provided in request error - Keycloak, React, Typescript

Issue

So I'm fairly new with using Keycloak and I'm using this tutorial to install it with my React & TS app.

https://blog.devgenius.io/security-in-react-and-webapi-in-asp-net-core-c-with-authentification-and-authorization-by-keycloak-89ba14be7e5a

That author says we should set the Access Type to confidential.

I've done the settings he says there (literally the same) and I get

{"error":"unauthorized_client","error_description":"Client secret not provided in request"}

my keycloak.json (which is in the public/ folder)

{
    "realm": "best-realm",
    "auth-server-url": "http://localhost:28080/auth/",
    "ssl-required": "external",
    "resource": "best-react",
    "verify-token-audience": true,
    "credentials": {
      "secret": "secret"
    },
    "use-resource-role-mappings": true,
    "confidential-port": 0
  }

KeycloakService.tsx

import Keycloak from "keycloak-js";

const keycloakInstance = new Keycloak();

/**
 * Initializes Keycloak instance and calls the provided callback function if successfully authenticated.
 *
 * @param onAuthenticatedCallback
 */
const Login = (onAuthenticatedCallback: Function) => {
  keycloakInstance
    .init({ onLoad: "login-required" })
    .then(function (authenticated) {
      authenticated ? onAuthenticatedCallback() : alert("non authenticated");
    })
    .catch((e) => {
      console.dir(e);
      console.log(`keycloak init exception: ${e}`);
    });
};

const KeyCloakService = {
  CallLogin: Login,
};

export default KeyCloakService;

Why am I getting this error? I've read some posts that access type confidential doesn't work anymore with a JS adapter. But those posts were older than the posting date of that tutorial (it is written in may 2022). So I don't know what to believe.

Can anybody help me understand this error and teach me how to fix it?

Thanks.

Solution

In keycloak.js removed "credential" access type option.

Official comment about this since Keycloak 8.0.0

https://www.keycloak.org/docs/latest/release_notes/#credentials-support-removed-from-the-javascript-adapter

You should be use public option in front-end side. The public option with PCKE(Proof Key for Code Exchange) is protect to steal token that is intended for another app.

Understanding benefits of PKCE vs. Authorization Code Grant

This web site shows how to use PCKE from Keycloak

https://www.appsdeveloperblog.com/pkce-verification-in-authorization-code-grant/

Answered By - Bench Vue

Read More