@limit.es/limit-react-library NPM

Limit React Library

Limit React Library contains helper libraries for the Limit ecosystem

Install

npm install --save @limit.es/limit-react-library

yarn add @limit.es/limit-react-library

Usage

import React, { Component } from 'react'

import MyComponent from 'limit-react-library'
import 'limit-react-library/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Keycloak Authentication

First, configure the redirect url to the site where it will be used.

After, create a silent-check-sso.html file inside the /public folder

<html>
    <body>
        <script>parent.postMessage(location.href, location.origin)</script>
    </body>
</html>

Then, you have to import the <KeycloakWrapper> to access to hooks inside any authenticated component

import React from "react";
import { keycloak } from 'limit-react-library';
...

const { Keycloak, KeycloakWrapper, KeycloakConfigurator } = keycloak;

const customKeycloak = new Keycloak({
  realm: "limit", // realm as configured in Keycloak
  url: "https://keycloak.limit.es/auth/", // URL of the Keycloak server
  clientId: "estudi-projectes", // client id as configured in the realm in Keycloak
});

const Authentication = () => {
  return <KeycloakWrapper customKeycloak={customKeycloak}>
    <KeycloakConfigurator />
    {/* your authenticated components */}
  </KeycloakWrapper>;
};

Use the hooks inside any component:

import React from "react";
...

import { keycloak } from 'limit-react-library';

...

const { useKeycloak } = keycloak;

const AuthenticatedComponent = () => {
  const { isAuthenticated, logout, getToken, updateToken } = useKeycloak();
  ...
  const handleLogout = () => {
    logout();
  };

  return <Grid container spacing={2}>
    <Grid item xs={3}>
      <div>You are {isAuthenticated? "":"not"} authenticated!</div>
        {isAuthenticated && <Button variant="contained" onClick={handleLogout}>Logout</Button>}
    </Grid>
    <Grid item xs={9}>
      <TextWrapper>{`Token: ${getToken()}`}</TextWrapper>
      <Typography component={"p"}>{`Updated token: ${updatedToken?? "-"}`}</Typography>
    </Grid>
    ...
  </Grid>
};

export default AuthenticatedComponent;

If you need use it inside an isolated function, you should add <KeycloakConfigurator /> (see the first example) and use KeycloakUtils library of this way:

import { keycloak } from 'limit-react-library';

const { keycloakFunction: KeycloakUtils } = keycloak;

export const refreshToken = async () => {
  await KeycloakUtils.refresh();
};

License

limit react javascript react library

@emotion/react @emotion/styled @mui/material @mui/styles @react-keycloak/web keycloak-js

@everything-registry/sub-chunk-549 @zalastax/nolb-_lim

0.0.1

2 years ago