react-keycloak-provider
v1.0.9
Published
[](https://github.com/kantorv/react-keycloak-provider/actions/workflows/tests.yml) [](https:/
Downloads
70
Readme
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>