keycloak login and logout test
This commit is contained in:
parent
b4298612b6
commit
3584df00c5
13
src/App.js
13
src/App.js
@ -11,6 +11,7 @@ import Register from './pages/auth/Register';
|
||||
import Login from './pages/auth/Login';
|
||||
import LoginWithEmail from './pages/auth/LoginWithEmail';
|
||||
import RegisterWithEmail from './pages/auth/RegisterWithEmail';
|
||||
import UserService from './services/UserService';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@ -24,8 +25,16 @@ const App = () => {
|
||||
<Route path='/register' element={<Register/>}/>
|
||||
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
|
||||
<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>
|
||||
<Footer/>
|
||||
</ThemeProvider>
|
||||
|
@ -7,6 +7,7 @@ import {Link} from 'react-router-dom';
|
||||
import Media from 'react-media';
|
||||
import codepenIco from '../../assets/codepen_ico.svg';
|
||||
import styled from 'styled-components';
|
||||
import UserService from '../../services/UserService';
|
||||
|
||||
const TitleParagraph = styled(Medium)`
|
||||
font-size: 20px;
|
||||
@ -51,6 +52,12 @@ const desktopRender = () => {
|
||||
<ButtonLink as={Link} to='/'>
|
||||
Join us!
|
||||
</ButtonLink>
|
||||
<button onClick={UserService.doLogin}>
|
||||
test keycloak login
|
||||
</button>
|
||||
<button onClick={() => console.log(UserService.isLoggedIn())}>
|
||||
isLoggedIn
|
||||
</button>
|
||||
</Container>
|
||||
<Svg src={codepenIco} width='212px' height='180px' backgroundColor={theme.colors.green}/>
|
||||
</FlexRow>
|
||||
|
14
src/index.js
14
src/index.js
@ -3,10 +3,16 @@ import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import './normalize.css';
|
||||
import App from './App';
|
||||
import UserService from './services/UserService';
|
||||
import HttpService from './services/HttpService';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
|
||||
const renderApp = () => root.render(
|
||||
<React.StrictMode>
|
||||
<App/>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
UserService.initKeycloak(renderApp);
|
||||
HttpService.configure();
|
@ -12,6 +12,7 @@ import cupIco from '../../assets/cup_ico.svg';
|
||||
import getChallenges from '../../api/getChallenges';
|
||||
import {CALC_PAGES} from '../../utils/globals';
|
||||
import Loading from '../../components/elements/Loading';
|
||||
import UserService from '../../services/UserService';
|
||||
|
||||
const Challenges = () => {
|
||||
const [pageNr, setPageNr] = React.useState(1);
|
||||
@ -120,6 +121,12 @@ const Challenges = () => {
|
||||
<H1 as='h1'>
|
||||
Challenges
|
||||
</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'>
|
||||
Increase your machine learning skills by competing in our exciting challenges.
|
||||
</Body>
|
||||
|
32
src/services/HttpService.js
Normal file
32
src/services/HttpService.js
Normal 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
54
src/services/UserService.js
Normal 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;
|
Loading…
Reference in New Issue
Block a user