serafim
/
kilogramm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(auth): registration

This commit is contained in:
Serafim 2025-01-29 16:23:59 +03:00
parent f588f69f66
commit 6f1fd87e90
9 changed files with 181 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/package-lock.json generated
View File

@ -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",

1
frontend/package.json
View File

@ -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",

2
frontend/src/app/app.tsx
View File

@ -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 />} />

14
frontend/src/features/auth/header.scss Normal file
View File

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

62
frontend/src/features/auth/header.tsx Normal file
View File

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

2
frontend/src/features/auth/index.ts Normal file
View File

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

41
frontend/src/features/auth/keycloak.ts
View File

@ -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({
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
checkLoginIframe: false,
pkceMethod: 'S256'
}).then(() => {
if (kc.onTokenExpired) {
kc.onTokenExpired = () => kc.updateToken();
}
})
const initKeycloak = () => {
return kc.init({
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
checkLoginIframe: false,
pkceMethod: 'S256',
});
};
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 };
}

2
frontend/src/shared/components/Page/Page.scss
View File

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

65
keycloak/realm-export.json
View File

@ -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",
"multivalued": "true"
"jsonType.label": "String"
}
}
]
@ -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"
},