Error /protocol/openid-connect/token 401 (Unauthorized)

[craftedsro]

Hi i got error when trying authenticated and I am stuck at /protocol/openid-connect/token 401 (Unauthorized) after login on keycloack.

I try using keycloak server with auth.js by with next.js and it works.

 Keycloak server version 21.0.2

"keycloak-js": "^21.0.2",
"ra-keycloak": "^1.0.0",
"react": "^18.2.0",

Error occure in

keycloack.mjs

on line 762

req.onreadystatechange = function() {
     if (req.readyState == 4) {
          if (req.status == 200) {
               var tokenResponse = JSON.parse(req.responseText);
                   authSuccess(tokenResponse['access_token'], tokenResponse['refresh_token'], tokenResponse['id_token'], kc.flow === 'standard');
                        scheduleCheckIframe();
                    } else {
                        kc.onAuthError && kc.onAuthError();
                        promise && promise.setError();
                    }
                }
            };

            req.send(params);

App.tsx

const config: KeycloakConfig = {
  url: "http://localhost:8080",
  realm: "test-realm",
  clientId: "test-client",
};

const initOptions: KeycloakInitOptions = {
  onLoad: "login-required",
};

const getPermissions = (decoded: KeycloakTokenParsed) => {
  const roles = decoded?.realm_access?.roles;
  if (!roles) {
    return false;
  }
  if (roles.includes("admin")) return "admin";
  if (roles.includes("user")) return "user";
  return false;
};

const App = () => {
  const [keycloak, setKeycloak] = useState<Keycloak | undefined>(undefined);
  const authProvider = useRef<AuthProvider | undefined>(undefined);
  const dataProvider = useRef<DataProvider | undefined>(undefined);

  useEffect(() => {
    const initKeyCloakClient = async () => {
      const keycloakClient = new Keycloak(config);
      keycloakClient.clientSecret = "tPW4yfVEOurE.....";

      await keycloakClient.init(initOptions);

      authProvider.current = keycloakAuthProvider(keycloakClient, {
        onPermissions: getPermissions,
      });
      dataProvider.current = keyCloakTokenDataProviderBuilder(
        myDataProvider,
        keycloakClient
      );
      setKeycloak(keycloakClient);
    };
    if (!keycloak) {
      initKeyCloakClient();
    }
  }, [keycloak]);

  // hide the admin until the dataProvider and authProvider are ready
  if (!keycloak) return <p>Loading...</p>;

  return (
    <Admin
      authProvider={authProvider.current}
...

Access Settings

Capability Settings

Credentials Settings

[MattMx]

@craftedsro Were you able to resolve this issue? First I had a problem with infinite loops which I resolved it thanks to a lingering pull request in this repository. Sadly now I hit 401 Unauthorized error while trying to use the demo code in a fresh react-admin vite app.