Limit React Components
npm install --save limit-react-componentsimport React, { Component } from 'react'
import MyComponent from 'limit-react-components'
import 'limit-react-components/dist/index.css'
class Example extends Component {
render() {
return <MyComponent />
}
}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-components';
...
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-components';
...
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-components';
const { keycloakFunction: KeycloakUtils } = keycloak;
export const refreshToken = async () => {
await KeycloakUtils.refresh();
};MIT © juanmzaragoza