< Back
# KeyCloak JS
npm : https://www.npmjs.com/package/keycloak-js
## Sample Hook (Poc minimal/unfinished version)
```typescript
import Keycloak, { KeycloakInstance } from 'keycloak-js';
import { useEffect, useState } from 'react';
let initOptions = {
url: 'http://<host>:<port>/auth',
realm: '<realm>',
clientId: '<client>',
};
const useKeyCloak = () => {
const [kcInstance, setKcInstance] = useState<KeycloakInstance>();
useEffect(() => {
if (kcInstance) {
return;
}
const keycloak = Keycloak(initOptions);
keycloak.init({}).then(() => {
setKcInstance(keycloak);
});
}, [kcInstance]);
return kcInstance;
};
export default useKeyCloak;
````
## Usage
```typescript
import useKeyCloak from './hook/useKeyCloak';
function App() {
const keyCloak = useKeyCloak();
const showAccessToken = () => {
if (!keyCloak) {
console.log('todo solve keycloak not loging');
}
if (!keyCloak?.authenticated) {
keyCloak?.login();
}
if (!keyCloak?.isTokenExpired(70)) {
keyCloak?.updateToken(70);
}
console.log(keyCloak?.token);
};
return (
<div className="App">
<button onClick={showAccessToken}>Click To Login</button>
</div>
);
}
```