React Keycloak
Table of Contents
Install
React Keycloak requires:
- React 16.0 or later
- razzle 3 or later
-
keycloak-js
9.0.2 or later
yarn add @react-keycloak/razzle
or
npm install --save @react-keycloak/razzle
Support
version | keycloak-js version |
---|---|
v2.0.0+ | 9.0.2+ |
v1.x | >=8.0.2 <9.0.2 |
Getting Started
Setup Razzle App
N.B: This setup requires you to install
cookie-parser
middleware.
Edit your app server.js
as follow
...
import { ServerPersistors, SSRKeycloakProvider } from '@react-keycloak/razzle'
// Create a function to retrieve Keycloak configuration parameters -- 'see examples/razzle-app'
import { getKeycloakConfig } from './utils'
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST)
const server = express()
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.use(cookieParser()) // 1. Add cookieParser Express middleware
.get('/*', (req, res) => {
const context = {}
// 2. Create an instance of ServerPersistors.ExpressCookies passing the current request
const cookiePersistor = ServerPersistors.ExpressCookies(req)
// 3. Wrap the App inside SSRKeycloakProvider
const markup = renderToString(
<SSRKeycloakProvider
keycloakConfig={getKeycloakConfig()}
persistor={cookiePersistor}
>
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
</SSRKeycloakProvider>
)
...
})
...
Edit your client.js
as follow
import { ClientPersistors, SSRKeycloakProvider } from '@react-keycloak/razzle'
// Create a function to retrieve Keycloak configuration parameters -- 'see examples/razzle-app'
import { getKeycloakConfig } from './utils'
// 1. Wrap the App inside SSRKeycloakProvider
hydrate(
<SSRKeycloakProvider
keycloakConfig={getKeycloakConfig()}
persistor={ClientPersistors.Cookies}
>
<BrowserRouter>
<App />
</BrowserRouter>
</SSRKeycloakProvider>,
document.getElementById('root')
)
...
HOC Usage
When a page requires access to Keycloak
, wrap it inside the withKeycloak
HOC.
...
import { withKeycloak } from '@react-keycloak/razzle'
const Home = ({ keycloak, keycloakInitialized: initialized, isServer }) => {
console.log('Is running on server:', isServer)
console.log('Keycloak is initialized:', initialized)
return (
<div className="Home">
<div className="Home-header">
<img src={logo} className="Home-logo" alt="logo" />
<h2>Welcome to Razzle</h2>
</div>
<p className="Home-intro">
To get started, edit <code>src/App.js</code> or <code>src/Home.js</code>
and save to reload.
</p>
<div>
{!keycloak.authenticated ? (
<button onClick={() => keycloak.login()}>Login</button>
) : (
<button onClick={() => keycloak.logout()}>Logout</button>
)}
</div>
<ul className="Home-resources">
<li>
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
</li>
<li>
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
</li>
<li>
<a href="https://palmer.chat">Community Slack</a>
</li>
</ul>
</div>
)
}
export default withKeycloak(Home)
Hook Usage
Alternately, when a component requires access to Keycloak
, you can also use the useKeycloak
Hook.
...
import { useKeycloak } from '@react-keycloak/razzle'
const Home = () => {
const [keycloak, initialized, isServer] = useKeycloak()
console.log('Is running on server:', isServer)
console.log('Keycloak is initialized:', initialized)
return (
<div className="Home">
<div className="Home-header">
<img src={logo} className="Home-logo" alt="logo" />
<h2>Welcome to Razzle</h2>
</div>
<p className="Home-intro">
To get started, edit <code>src/App.js</code> or <code>src/Home.js</code>
and save to reload.
</p>
<div>
{!keycloak.authenticated ? (
<button onClick={() => keycloak.login()}>Login</button>
) : (
<button onClick={() => keycloak.logout()}>Logout</button>
)}
</div>
<ul className="Home-resources">
<li>
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
</li>
<li>
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
</li>
<li>
<a href="https://palmer.chat">Community Slack</a>
</li>
</ul>
</div>
)
}
export default Home
Examples
See inside examples/razzle-app
folder of @react-keycloak/react-keycloak-examples
repository for a sample implementation.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
If you found this project to be helpful, please consider buying me a coffee.