React-keycloak-provider NPM

React Keycloak Provider

Based on keycloak-js package, wraps it with React Context Provider

usage

// providing
import { KeycloakProvider } from 'react-keycloak-provider';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <KeycloakProvider
      // config={window.location.origin + '/keycloak.json'}
        
      // passed to constructor
      // const keycloak = new Keycloak({ ... })  
      config={{
         url: 'http://localhost:8282/',
         realm: 'demo',
         clientId: 'react-client'
      }}
        
      // passed to keycloak.init({ ... }) 
      initOptions={{
        // 'check-sso' or 'login-required'
        onLoad: 'check-sso',    
        // if  'check-sso' copy 'silent-check-sso.html' to /public folder
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html', 
      }}
    >
      <App />
    </KeycloakProvider>
  </React.StrictMode>
);

// consuming
import { useKeycloakContext } from 'react-keycloak-provider';
import Button from '@mui/material/Button';

const AppBar = ()=> {
    const {keycloak, authenticated} = useKeycloakContext();
    return (
        <div> 
            {authenticated? 
                <Button onClick={keycloak.logout} label="Logout" /> :  
                <Button onClick={keycloak.login} label="Login" />
            } 
        </div>
    )

};

<!-- silent-check-sso.html  -->
<html>
    <body>
        <script>
            parent.postMessage(location.href, location.origin)
        </script>
    </body>
</html>