feat: add keycloak-js for arm

package-lock.json

@@ -22,6 +22,7 @@
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
                 "i18next": "^23.16.4",
+                "keycloak-js": "^23.0.7",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
                 "react-hook-form": "^7.53.2",
@@ -4729,6 +4730,25 @@
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
             "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": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -8158,6 +8178,11 @@
                 "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": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8251,6 +8276,24 @@
                 "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": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",

package.json

@@ -30,6 +30,7 @@
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",
         "i18next": "^23.16.4",
+        "keycloak-js": "^23.0.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.2",

src/keycloak.ts

@@ -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;

src/pages/arm/index.tsx

@@ -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 authLogin from '../../keycloak';
+import { URLs } from '../../__data__/urls';
+
 
 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 />;
 };