Why keycloak gets unauthorized on page refresh?

Question

I have successfully integrate keycloak with reactJS now when i refresh the page keycloak.authenticate get false and it ask credentials again. I have search on internet also, they suggest to pass token and refresh token in initOptions props and i have done this but still facing same issue.

I am using "@react-keycloak/web": "^2.1.1" and "keycloak-js": "^10.0.1"

Thats my Keycloak.js code

---

import * as Keycloak from 'keycloak-js';

const keycloakConfig = {
   url: 'https://smartgrid.doersops.com/auth/',
   realm: 'OneSmartgrid',
   clientId: 'smartgrid-react-web-admin',
}

const keycloak = new Keycloak(keycloakConfig);

export default keycloak

---

Thats my App.js code

import React from 'react';
import { KeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak';
import { AppRouter }  from './routes';
function App() {
  const token = localStorage.getItem('token');
  const refreshToken = localStorage.getItem('refreshToken');

  const setTokens = (token, idToken, refreshToken) => {
    localStorage.setItem('token', token);
    localStorage.setItem('refreshToken', refreshToken);
    localStorage.setItem('idToken', idToken);
  }
  return (
    <KeycloakProvider 
      keycloak={keycloak}
      onTokens={
          (tokens:  keycloakTokens) => 
          setTokens(tokens.token ?? '', tokens.idToken ?? '', tokens.refreshToken ?? '')
        }
      initOptions={{ onLoad: 'login-required', token, refreshToken }}
      >
      <AppRouter />
    </KeycloakProvider>
  )
}

export default App;

Answer 1

I am answering my own question actually i have to change setting from keycloak admin panel.Click authentication from side menu and select browser from dropdown.

Answer 2

Following the tip on KC Admin's Panel, marking Cookie's requirement (Browser Authentication Flow) as "Alternative" solved the problem for me.