s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

keycloak login and logout test

Browse Source
This commit is contained in:
mattyl006 2022-08-29 15:16:18 +02:00
parent b4298612b6
commit 3584df00c5
6 changed files with 121 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.js
View File

@ -11,6 +11,7 @@ import Register from './pages/auth/Register';
import Login from './pages/auth/Login'; import Login from './pages/auth/Login';
import LoginWithEmail from './pages/auth/LoginWithEmail'; import LoginWithEmail from './pages/auth/LoginWithEmail';
import RegisterWithEmail from './pages/auth/RegisterWithEmail'; import RegisterWithEmail from './pages/auth/RegisterWithEmail';
import UserService from './services/UserService';
const App = () => { const App = () => {
return ( return (
@ -24,8 +25,16 @@ const App = () => {
<Route path='/register' element={<Register/>}/> <Route path='/register' element={<Register/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/> <Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/> <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
<Route exact path='/' element={<LandingPage/>}/>
<Route element={<LandingPage/>}/> {
UserService.isLoggedIn() ? <>
<Route exact path='/' element={<Challenges/>}/>
<Route element={<Challenges/>}/>
</> : <>
<Route exact path='/' element={<LandingPage/>}/>
<Route element={<LandingPage/>}/>
</>
}
</Routes> </Routes>
<Footer/> <Footer/>
</ThemeProvider> </ThemeProvider>

7
src/components/sections/Hero.js
View File

@ -7,6 +7,7 @@ import {Link} from 'react-router-dom';
import Media from 'react-media'; import Media from 'react-media';
import codepenIco from '../../assets/codepen_ico.svg'; import codepenIco from '../../assets/codepen_ico.svg';
import styled from 'styled-components'; import styled from 'styled-components';
import UserService from '../../services/UserService';
const TitleParagraph = styled(Medium)` const TitleParagraph = styled(Medium)`
font-size: 20px; font-size: 20px;
@ -51,6 +52,12 @@ const desktopRender = () => {
<ButtonLink as={Link} to='/'> <ButtonLink as={Link} to='/'>
Join us! Join us!
</ButtonLink> </ButtonLink>
<button onClick={UserService.doLogin}>
test keycloak login
</button>
<button onClick={() => console.log(UserService.isLoggedIn())}>
isLoggedIn
</button>
</Container> </Container>
<Svg src={codepenIco} width='212px' height='180px' backgroundColor={theme.colors.green}/> <Svg src={codepenIco} width='212px' height='180px' backgroundColor={theme.colors.green}/>
</FlexRow> </FlexRow>

14
src/index.js
View File

@ -3,10 +3,16 @@ import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import './normalize.css'; import './normalize.css';
import App from './App'; import App from './App';
import UserService from './services/UserService';
import HttpService from './services/HttpService';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode> const renderApp = () => root.render(
<App /> <React.StrictMode>
</React.StrictMode> <App/>
</React.StrictMode>
); );
UserService.initKeycloak(renderApp);
HttpService.configure();

7
src/pages/Challanges/Challenges.js
View File

@ -12,6 +12,7 @@ import cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import {CALC_PAGES} from '../../utils/globals'; import {CALC_PAGES} from '../../utils/globals';
import Loading from '../../components/elements/Loading'; import Loading from '../../components/elements/Loading';
import UserService from '../../services/UserService';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -120,6 +121,12 @@ const Challenges = () => {
<H1 as='h1'> <H1 as='h1'>
Challenges Challenges
</H1> </H1>
<button onClick={UserService.doLogout}>
test keycloak logout
</button>
<button onClick={() => console.log(UserService.isLoggedIn())}>
isLoggedIn
</button>
<Body margin='0 0 12px 0' maxWidth='400px'> <Body margin='0 0 12px 0' maxWidth='400px'>
Increase your machine learning skills by competing in our exciting challenges. Increase your machine learning skills by competing in our exciting challenges.
</Body> </Body>

32
src/services/HttpService.js Normal file
View File

@ -0,0 +1,32 @@
import axios from 'axios';
import UserService from './UserService';
const HttpMethods = {
GET: 'GET',
POST: 'POST',
DELETE: 'DELETE',
};
const _axios = axios.create();
const configure = () => {
_axios.interceptors.request.use((config) => {
if (UserService.isLoggedIn()) {
const cb = () => {
config.headers.Authorization = `Bearer ${UserService.getToken()}`;
return Promise.resolve(config);
};
return UserService.updateToken(cb);
}
});
};
const getAxiosClient = () => _axios;
const HttpService = {
HttpMethods,
configure,
getAxiosClient,
};
export default HttpService;

54
src/services/UserService.js Normal file
View File

@ -0,0 +1,54 @@
import Keycloak from 'keycloak-js';
const _kc = new Keycloak({
url: 'http://0.0.0.0:8080/',
realm: 'test',
clientId: 'test'
});
const initKeycloak = (onAuthenticatedCallback) => {
_kc.init({
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
pkceMethod: 'S256',
})
.then((authenticated) => {
if (!authenticated) {
console.log('user is not authenticated..!');
}
onAuthenticatedCallback();
})
.catch(console.error);
};
const doLogin = _kc.login;
const doLogout = _kc.logout;
const getToken = () => _kc.token;
const isLoggedIn = () => {
return _kc.authenticated;
};
const updateToken = (successCallback) =>
_kc.updateToken(5)
.then(successCallback)
.catch(doLogin);
const getUsername = () => _kc.tokenParsed?.preferred_username;
const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
const UserService = {
initKeycloak,
doLogin,
doLogout,
isLoggedIn,
getToken,
updateToken,
getUsername,
hasRole,
};
export default UserService;