Keycloak giving 401 Unauthorized error on app startup

Question

I was working on Keycloak for this project and it was working fine till I enabled the client Authentication and Authorization. Before this when ever I started my project it used to redirect me to the Keycloak login page. But after enabling authorization it does not redirect me to the keycloak login page.

client settings I enabled

here is the authorization code and it is giving me unauthorized error.

 const keyCloakOptions = {
    url: process.env.REACT_APP_KEYCLOAK_URL,
    realm: process.env.REACT_APP_KEYCLOAK_REALM,
    clientId: process.env.REACT_APP_KEYCLOAK_CLIENT_ID,
    onLoad: 'login-required',
    KeycloakResponseType: 'code',
  };

  const keycloak = new Keycloak(keyCloakOptions);
  const initOptions = { pkceMethod: 'S256' };

const loadingComponent = (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
    >
      <CircularProgress />
      <Typography>Initializing...</Typography>
    </Box>
  );

<ReactKeycloakProvider
      authClient={keycloak}
      initOptions={initOptions}
      LoadingComponent={loadingComponent}
      onEvent={(event, error) => handleOnEvent(event, error)}
    >...</ReactKeycloakProvider>

here is the payload and call header

api call header

payload

Strange thing is, I have created an instance of KcAdminClient for the same client after enabling the authorization, and it returns 200 Ok message. Here is the instance, header and payload.

import KcAdminClient from '@keycloak/keycloak-admin-client';

const kcAdminClient = new KcAdminClient();

kcAdminClient.setConfig({
  realmName: process.env.REACT_APP_KEYCLOAK_REALM,
  baseUrl: process.env.REACT_APP_KEYCLOAK_URL,
});

kcAdminClient
  .auth({
    username: process.env.REACT_APP_KEYCLOAK_USERNAME,
    password: process.env.REACT_APP_KEYCLOAK_PASSWORD,
    grantType: 'password',
    clientId: process.env.REACT_APP_KEYCLOAK_CLIENT_ID,
    clientSecret: 'L3AdFRCf9NgveC2HJayrxLizyDEgxGzH',
  })
  .then(() => {
    console.log('Successfully authenticated!');
  })
  .catch((err) => {
    console.error('Authentication failed!', err);
  });

export default kcAdminClient;

api header payload

Both are making same calls, one is returning 401 unauthorized message and other is returning 200 OK message. And it does not redirect app to keycloak login page on start up.

I tried to disable Client Authentication and Authorization and then run it again and it worked fine. It redirected me to Keycloak login page.