Nonchalantly Perusing Magazines

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

    1.1.0 • Public • Published

    react-keycloak logo

    react-keycloak

    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

    Installation

    npm i @digital-wafa/react-keycloak
    

    Usage

    KeycloakProvider:

    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";
     
     
    <KeycloakProvider
      keycloak={keycloak}
      loginOptions={{
        idpHint: "ei",
        scope: "phone",
      }}
    >
      <App />
    </KeycloakProvider>

    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.


    ProtectedRoute:

    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";
     
    <Router>
        <ProtectedRoute
          RouteComponent={Route}
          ComponentToRender={YourPageComponent}
          path="/your-path"
        />
    <Router>

    @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";
     
    <Router>
        <ProtectedRoute
          RouteComponent={YourPageComponent}
          path="/your-path"
        />
    <Router>

    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()

    Install

    npm i @digital-wafa/react-keycloak

    DownloadsWeekly Downloads

    13

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    65.5 kB

    Total Files

    28

    Last publish

    Collaborators

    • b.anass
    • jmounim