This package has been deprecated

Author message:

Support for Razzle framework has been included into @react-keycloak/ssr, you are advised to migrate to that package.

@react-keycloak/razzle
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-beta.7 • Public • Published

React Keycloak

React Keycloak

Razzle bindings for Keycloak

NPM (scoped)

License lerna GitHub contributors Github Issues

Gitter


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.

buy me a coffee

Dependents (0)

Package Sidebar

Install

npm i @react-keycloak/razzle

Weekly Downloads

0

Version

2.0.0-beta.7

License

MIT

Unpacked Size

38.7 kB

Total Files

7

Last publish

Collaborators

  • irontony
  • panz3r