Merge pull request 'feat: add keycloak-js for arm' (#52) from feature/arm-keycloack into main
All checks were successful
it-academy/dry-wash-pl/pipeline/head This commit looks good
All checks were successful
it-academy/dry-wash-pl/pipeline/head This commit looks good
Reviewed-on: #52
This commit is contained in:
commit
c7162d0045
43
package-lock.json
generated
43
package-lock.json
generated
@ -22,6 +22,7 @@
|
|||||||
"express": "^4.21.1",
|
"express": "^4.21.1",
|
||||||
"framer-motion": "^6.2.8",
|
"framer-motion": "^6.2.8",
|
||||||
"i18next": "^23.16.4",
|
"i18next": "^23.16.4",
|
||||||
|
"keycloak-js": "^23.0.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-hook-form": "^7.53.2",
|
"react-hook-form": "^7.53.2",
|
||||||
@ -4729,6 +4730,25 @@
|
|||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/base64-js": {
|
||||||
|
"version": "1.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||||
|
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "consulting",
|
||||||
|
"url": "https://feross.org/support"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
"node_modules/binary-extensions": {
|
"node_modules/binary-extensions": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||||
@ -8158,6 +8178,11 @@
|
|||||||
"node": ">= 10.13.0"
|
"node": ">= 10.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/js-sha256": {
|
||||||
|
"version": "0.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
|
||||||
|
"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
|
||||||
|
},
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
@ -8251,6 +8276,24 @@
|
|||||||
"node": ">=4.0"
|
"node": ">=4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/jwt-decode": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/keycloak-js": {
|
||||||
|
"version": "23.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-23.0.7.tgz",
|
||||||
|
"integrity": "sha512-OmszsKzBhhm5yP4W1q/tMd+nNnKpOAdeVYcoGhphlv8Fj1bNk4wRTYzp7pn5BkvueLz7fhvKHz7uOc33524YrA==",
|
||||||
|
"dependencies": {
|
||||||
|
"base64-js": "^1.5.1",
|
||||||
|
"js-sha256": "^0.10.1",
|
||||||
|
"jwt-decode": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/keygrip": {
|
"node_modules/keygrip": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
"express": "^4.21.1",
|
"express": "^4.21.1",
|
||||||
"framer-motion": "^6.2.8",
|
"framer-motion": "^6.2.8",
|
||||||
"i18next": "^23.16.4",
|
"i18next": "^23.16.4",
|
||||||
|
"keycloak-js": "^23.0.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-hook-form": "^7.53.2",
|
"react-hook-form": "^7.53.2",
|
||||||
|
34
src/keycloak.ts
Normal file
34
src/keycloak.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import Keycloak from 'keycloak-js';
|
||||||
|
|
||||||
|
const keycloak = new Keycloak({
|
||||||
|
url: 'https://kc.bro-js.ru',
|
||||||
|
realm: 'open',
|
||||||
|
clientId: 'dry-wash',
|
||||||
|
});
|
||||||
|
|
||||||
|
const authLogin = async ({ redirect }) => {
|
||||||
|
let user = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const authenticated = await keycloak.init({ onLoad: 'login-required' });
|
||||||
|
if (authenticated) {
|
||||||
|
user = { ...(await keycloak.loadUserInfo()), ...keycloak.tokenParsed };
|
||||||
|
|
||||||
|
const isOperator =
|
||||||
|
user?.resource_access?.['dry-wash']?.roles.includes('operator');
|
||||||
|
|
||||||
|
if (!isOperator) {
|
||||||
|
redirect();
|
||||||
|
}
|
||||||
|
|
||||||
|
return user;
|
||||||
|
} else {
|
||||||
|
console.log('User is not authenticated');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
keycloak.login();
|
||||||
|
console.error('Failed to initialize adapter:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default authLogin;
|
@ -1,8 +1,30 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { AbsoluteCenter, Spinner } from '@chakra-ui/react';
|
||||||
|
|
||||||
import LayoutArm from '../../components/LayoutArm';
|
import LayoutArm from '../../components/LayoutArm';
|
||||||
|
import authLogin from '../../keycloak';
|
||||||
|
import { URLs } from '../../__data__/urls';
|
||||||
|
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
authLogin({ redirect: () => navigate(URLs.landing.url) }).then((user) =>
|
||||||
|
setUser(user),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!user)
|
||||||
|
return (
|
||||||
|
<AbsoluteCenter>
|
||||||
|
<Spinner />
|
||||||
|
</AbsoluteCenter>
|
||||||
|
);
|
||||||
|
|
||||||
return <LayoutArm />;
|
return <LayoutArm />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user