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 4364294e75
8 changed files with 140 additions and 11 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;