feat(auth): registration

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@bem-react/classnames": "^1.3.10",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^6.4.1",
         "@mui/material": "^6.4.1",
         "keycloak-js": "^26.1.0",
         "react": "^19.0.0",
@@ -674,6 +675,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.1.tgz",
+      "integrity": "sha512-wsxFcUTQxt4s+7Bg4GgobqRjyaHLmZGNOs+HJpbwrwmLbT6mhIJxhpqsKzzWq9aDY8xIe7HCjhpH7XI5UD6teA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.4.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz",

frontend/package.json

@@ -15,6 +15,7 @@
     "@bem-react/classnames": "^1.3.10",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.1",
     "@mui/material": "^6.4.1",
     "keycloak-js": "^26.1.0",
     "react": "^19.0.0",

frontend/src/app/app.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material';
 import { Root } from '../pages/root';
 import { Search } from '../pages/search';
+import { Header } from '../features/auth';
 import theme from '../features/theme';
 
 import './normalize.css';
@@ -12,6 +13,7 @@ export const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <BrowserRouter>
+        <Header />
         <Routes>
           <Route path='/search' element={<Search />} />
           <Route path='/' element={<Root />} />

frontend/src/features/auth/header.scss

@@ -0,0 +1,14 @@
+.Header {
+    padding: 20px;
+    border-bottom: 1px solid #444444;
+
+    &-Auth {
+        display: flex;
+        justify-content: end;
+    }
+
+    &-Bar {
+        display: flex;
+        justify-content: space-between;
+    }
+}

frontend/src/features/auth/header.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@bem-react/classname';
+import React, { useEffect, useState } from 'react';
+import { Button, IconButton } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import './header.scss';
+import { useNavigate } from 'react-router-dom';
+import useKeycloakAuth from './keycloak';
+
+const name = cn('Header');
+
+export const Header: React.FC = () => {
+    const navigate = useNavigate();
+
+    const {authenticated, keycloak} = useKeycloakAuth();
+
+    return (
+        <header className={name()}>
+            {authenticated ? <div className={name('Bar')}>
+                {!window.location.pathname.includes('/search') ?
+                    <Button
+                        variant='contained'
+                        onClick={() => navigate('/search')}
+                    >
+                        Search
+                    </Button> : <Button
+                        variant='contained'
+                        onClick={() => navigate('/')}
+                    >
+                        Back
+                    </Button>}
+                <div>
+                    <Button
+                        variant='contained'
+                        onClick={() => keycloak.logout()}
+                    >
+                        Logout
+                    </Button>
+                    <IconButton
+                        sx={{alignSelf: 'center', ml: 2}}
+                        onClick={() => document.location = `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/account/`}
+                    >
+                        <SettingsIcon />
+                    </IconButton>
+                </div>
+            </div> : <div className={name('Auth')}>
+                <Button
+                    variant='contained'
+                    onClick={() => keycloak.login()}
+                >
+                    Login
+                </Button>
+                <Button
+                    sx={{ ml: 2 }}
+                    variant='contained'
+                    onClick={() => keycloak.register()}
+                >
+                    Registration
+                </Button>
+            </div>} 
+        </header>
+    );
+}

frontend/src/features/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './header';
+export * from './keycloak';

frontend/src/features/auth/keycloak.ts

@@ -1,4 +1,5 @@
 import Keycloak from 'keycloak-js';
+import { useEffect, useState } from 'react';
 
 const kc = new Keycloak({
     url: process.env.KEYCLOAK_URL as string,
@@ -6,15 +7,33 @@ const kc = new Keycloak({
     clientId: process.env.KEYCLOAK_CLIENT as string,
 });
 
-kc.init({
+const initKeycloak = () => {
-    onLoad: 'check-sso',
+    return kc.init({
-    silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
+        onLoad: 'check-sso',
-    checkLoginIframe: false,
+        silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
-    pkceMethod: 'S256'
+        checkLoginIframe: false,
-}).then(() => {
+        pkceMethod: 'S256',
-    if (kc.onTokenExpired) {
+    });
-        kc.onTokenExpired = () => kc.updateToken();
+};
-    }
-})
 
-export default kc;
+export default function useKeycloakAuth() {
+    const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+
+    useEffect(() => {
+        initKeycloak().then(auth => {
+            setAuthenticated(auth);
+        });
+
+        // Handle token expiration
+        if (kc.onTokenExpired) {
+            kc.onTokenExpired = () => kc.updateToken().then(() => setAuthenticated(true));
+        }
+
+        // Listen for authentication events
+        kc.onAuthSuccess = () => setAuthenticated(true);
+        kc.onAuthError = () => setAuthenticated(false);
+        kc.onAuthLogout = () => setAuthenticated(false);
+    }, []);
+
+    return { authenticated, keycloak: kc };
+}

frontend/src/shared/components/Page/Page.scss

@@ -2,6 +2,8 @@
 
 .Page {
     background-color: $background-secondary;
+    padding: 20px;
+    box-sizing: border-box;
     height: 100%;
     width: 80%;
     margin: auto;

keycloak/realm-export.json

@@ -29,7 +29,7 @@
   "oauth2DevicePollingInterval": 5,
   "enabled": true,
   "sslRequired": "external",
-  "registrationAllowed": false,
+  "registrationAllowed": true,
   "registrationEmailAsUsername": false,
   "rememberMe": false,
   "verifyEmail": false,
@@ -619,7 +619,8 @@
       "protocol": "openid-connect",
       "attributes": {
         "realm_client": "false",
-        "client.use.lightweight.access.token.enabled": "true"
+        "client.use.lightweight.access.token.enabled": "true",
+        "post.logout.redirect.uris": "+"
       },
       "authenticationFlowBindingOverrides": {},
       "fullScopeAllowed": true,
@@ -661,7 +662,8 @@
       "frontchannelLogout": false,
       "protocol": "openid-connect",
       "attributes": {
-        "realm_client": "true"
+        "realm_client": "true",
+        "post.logout.redirect.uris": "+"
       },
       "authenticationFlowBindingOverrides": {},
       "fullScopeAllowed": false,
@@ -695,7 +697,7 @@
       "alwaysDisplayInConsole": false,
       "clientAuthenticatorType": "client-secret",
       "redirectUris": [
-        "http://localhost/"
+        "http://localhost/*"
       ],
       "webOrigins": [
         "http://localhost"
@@ -713,7 +715,7 @@
       "attributes": {
         "client.introspection.response.allow.jwt.claim.enabled": "false",
         "frontchannel.logout.session.required": "true",
-        "post.logout.redirect.uris": "http://localhost/",
+        "post.logout.redirect.uris": "http://localhost/*",
         "oauth2.device.authorization.grant.enabled": "false",
         "backchannel.logout.revoke.offline.tokens": "false",
         "use.refresh.tokens": "true",
@@ -767,8 +769,10 @@
       "serviceAccountsEnabled": false,
       "publicClient": false,
       "frontchannelLogout": false,
+      "protocol": "openid-connect",
       "attributes": {
-        "realm_client": "true"
+        "realm_client": "true",
+        "post.logout.redirect.uris": "+"
       },
       "authenticationFlowBindingOverrides": {},
       "fullScopeAllowed": false,
@@ -926,12 +930,13 @@
           "protocolMapper": "oidc-organization-membership-mapper",
           "consentRequired": false,
           "config": {
-            "id.token.claim": "true",
             "introspection.token.claim": "true",
+            "multivalued": "true",
+            "userinfo.token.claim": "true",
+            "id.token.claim": "true",
             "access.token.claim": "true",
             "claim.name": "organization",
-            "jsonType.label": "String",
+            "jsonType.label": "String"
-            "multivalued": "true"
           }
         }
       ]
@@ -986,8 +991,9 @@
           "consentRequired": false,
           "config": {
             "user.session.note": "AUTH_TIME",
-            "id.token.claim": "true",
             "introspection.token.claim": "true",
+            "userinfo.token.claim": "true",
+            "id.token.claim": "true",
             "access.token.claim": "true",
             "claim.name": "auth_time",
             "jsonType.label": "long"
@@ -1098,8 +1104,9 @@
           "consentRequired": false,
           "config": {
             "user.session.note": "clientHost",
-            "id.token.claim": "true",
             "introspection.token.claim": "true",
+            "userinfo.token.claim": "true",
+            "id.token.claim": "true",
             "access.token.claim": "true",
             "claim.name": "clientHost",
             "jsonType.label": "String"
@@ -1113,8 +1120,9 @@
           "consentRequired": false,
           "config": {
             "user.session.note": "client_id",
-            "id.token.claim": "true",
             "introspection.token.claim": "true",
+            "userinfo.token.claim": "true",
+            "id.token.claim": "true",
             "access.token.claim": "true",
             "claim.name": "client_id",
             "jsonType.label": "String"
@@ -1128,8 +1136,9 @@
           "consentRequired": false,
           "config": {
             "user.session.note": "clientAddress",
-            "id.token.claim": "true",
             "introspection.token.claim": "true",
+            "userinfo.token.claim": "true",
+            "id.token.claim": "true",
             "access.token.claim": "true",
             "claim.name": "clientAddress",
             "jsonType.label": "String"
@@ -1451,6 +1460,7 @@
           "config": {
             "introspection.token.claim": "true",
             "multivalued": "true",
+            "userinfo.token.claim": "true",
             "user.attribute": "foo",
             "id.token.claim": "true",
             "access.token.claim": "true",
@@ -1479,7 +1489,8 @@
           "config": {
             "id.token.claim": "true",
             "access.token.claim": "true",
-            "introspection.token.claim": "true"
+            "introspection.token.claim": "true",
+            "userinfo.token.claim": "true"
           }
         }
       ]
@@ -1630,12 +1641,12 @@
         "config": {
           "allowed-protocol-mapper-types": [
             "oidc-full-name-mapper",
-            "saml-user-attribute-mapper",
             "saml-user-property-mapper",
-            "oidc-sha256-pairwise-sub-mapper",
-            "oidc-usermodel-property-mapper",
-            "oidc-usermodel-attribute-mapper",
             "oidc-address-mapper",
+            "oidc-sha256-pairwise-sub-mapper",
+            "oidc-usermodel-attribute-mapper",
+            "saml-user-attribute-mapper",
+            "oidc-usermodel-property-mapper",
             "saml-role-list-mapper"
           ]
         }
@@ -1648,14 +1659,14 @@
         "subComponents": {},
         "config": {
           "allowed-protocol-mapper-types": [
-            "saml-user-property-mapper",
-            "saml-user-attribute-mapper",
-            "oidc-full-name-mapper",
-            "oidc-usermodel-attribute-mapper",
             "oidc-address-mapper",
-            "saml-role-list-mapper",
             "oidc-usermodel-property-mapper",
-            "oidc-sha256-pairwise-sub-mapper"
+            "saml-user-property-mapper",
+            "oidc-sha256-pairwise-sub-mapper",
+            "saml-role-list-mapper",
+            "oidc-full-name-mapper",
+            "saml-user-attribute-mapper",
+            "oidc-usermodel-attribute-mapper"
           ]
         }
       },
@@ -2400,7 +2411,13 @@
     "cibaBackchannelTokenDeliveryMode": "poll",
     "cibaExpiresIn": "120",
     "cibaAuthRequestedUserHint": "login_hint",
+    "oauth2DeviceCodeLifespan": "600",
+    "clientOfflineSessionMaxLifespan": "0",
+    "oauth2DevicePollingInterval": "5",
+    "clientSessionIdleTimeout": "0",
     "parRequestUriLifespan": "60",
+    "clientSessionMaxLifespan": "0",
+    "clientOfflineSessionIdleTimeout": "0",
     "cibaInterval": "5",
     "realmReusableOtpCode": "false"
   },