Nominating Presidential Muppets

    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

    Install

    npm i @react-keycloak/razzle

    DownloadsWeekly Downloads

    17

    Version

    2.0.0-beta.7

    License

    MIT

    Unpacked Size

    38.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • irontony
    • panz3r