TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    react-keycloak logo


    npm version build codecov types size downloads license

    a keycloak adapter for react with a protected route component that support react-router and reach-router


    npm i @digital-wafa/react-keycloak



    you should create an instance of keyclaok using the keycloak-js package or importing the link from your keycloak server directly which is recommanded to avoid compatibily issues.

    const keycloakInstance = new Keycloak({
      url: "your keycloak url",
      realm: "your realm",
      clientId: "your client id",
      ....any other parameters

    Then wrape your component with the keycloak provider, KeycloakProvider accept the following props :

    Props Required Description
    keycloak yes the keycloak instance you created
    loginOptions no keycloak login options
    initOptions no keycloak init options
    loadingComponent only if you use the included ProtectedRoute component the loading component to show when redirecting to keycloak login page

    import { KeycloakProvider } from "@digital-wafa/react-keycloak";
        idpHint: "ei",
        scope: "phone",
      <App />

    finaly you can access the keycloak instance using the useKeycloakContext hook which return the following object:

      keycloak, // keycloak instance
      loginOptions, // keycloak login options
      initOptions, // keycloak init options
      authenticated // is the user authenticated or not
    import { useKeycloakContext } from "@digital-wafa/react-keycloak";
    const {keycloak, authenticated, loginOptions, initOptions} = useKeycloakContext();

    or import the context if you are using a class component

    import { keycloakContext } from "@digital-wafa/react-keycloak"
    class YourClassComponent extends React.Component {
      static contextType = keycloakContext;
      const {keycloak, authenticated, loginOptions, initOptions} = this.context;

    NB: the token is refreshed automatically when it expire using the onTokenExpired event.


    A useful component to protect your routes, it's compatible with react-router-dom and @reach/router

    if the user is authenticated, he will see the desired page, if not he will be redirected to the keycloak login page.

    react-router-dom example:

    import { BrowserRouter as Router, Route } from 'react-router-dom';
    import { ProtectedRoute } from "@digital-wafa/react-keycloak";

    @reach/router example:

    when using @reach/router you don't need to use the ComponentToRender props

    import { Router } from "@reach/router";
    import { ProtectedRoute } from "@digital-wafa/react-keycloak";

    getToken / getRefreshToken

    Get the tokens which are stored automatically in localStorage after the login and the refreshToken actions.
    To use outside your components

    import { getToken, getRefreshToken } from "@digital-wafa/react-keycloak";
    const token = getToken();
    const refreshToken = getRefreshToken()


    npm i @digital-wafa/react-keycloak

    DownloadsWeekly Downloads






    Unpacked Size

    65.5 kB

    Total Files


    Last publish


    • b.anass
    • jmounim