The token has invalid signature

Getting advice
,
1

I am using Keycloak as an auth provider for a React app. I have utilized k8s helm deployment for Keycloak deployment (Used this Bitnami package for Keycloak). On the React side, I am using @react-keycloak/web. I am wrapping the entire app with ReactKeycloakProvider:

<ReactKeycloakProvider authClient={client}>
  <App />
</ReactKeycloakProvider>

To obtain the access token, I am utilizing the useKeycloak() hook from @react-keycloak/web:

const { keycloak } = useKeycloak();
const token = keycloak?.token;

The issue lies with the token signature (Checked using jwt.io). When running Keycloak locally, the signature is valid. However, when using the deployed Keycloak, I am encountering an error - invalid signature. I am using the HS256 algorithm for decoding.

I am seeking assistance in identifying the potential cause of this issue.

2

I hope you’ve seen the deprecation notice for react-keycloak, as it hasn’t been updated in the past 4 years, which might cause these issues.

How do local and remote keycloak differ? Is the client config identical? It might be a misconfigured Keycloak URL setting (e.g., keycloak not referring to itself using the correct hostname or protocol).

3

I don’t think that the deprecation is the issue, as the local Keyclaok has a valid signature.
The keycloak settings for both the local and deployed versions are the same.

image
Is this setting is fine?