simple login and logout with keycloak templaate

src/App.js

@@ -11,7 +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';
+import KeyCloakService from './services/KeyCloakService';
 
 const App = () => {
     return (
@@ -27,7 +27,7 @@ const App = () => {
                     <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
 
                     {
-                        UserService.isLoggedIn() ? <>
+                        KeyCloakService.isLoggedIn() ? <>
                             <Route exact path='/' element={<Challenges/>}/>
                             <Route element={<Challenges/>}/>
                         </> : <>

src/api/loginTest.js

@@ -0,0 +1,18 @@
+const loginTest = () => {
+    let data = {
+        client_id: 'Id_of_your_client',
+        username: 'test',
+        password: 'test',
+        grant_type: 'password'
+    };
+
+    fetch('http://0.0.0.0:8080/auth/realms/test/protocol/openid-connect/token', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    }).then(res => {
+        console.log('Request complete! response:', res);
+    });
+};
+
+export default loginTest;

src/components/elements/MobileNavMenu.js

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import {Link} from 'react-router-dom';
 import {CHALLENGES_PAGE} from '../../utils/globals';
 import PropsTypes from 'prop-types';
+import KeyCloakService from '../../services/KeyCloakService';
 
 const MobileNavMenuStyle = styled(FlexColumn)`
   gap: 32px;
@@ -21,7 +22,7 @@ const MobileNavMenuStyle = styled(FlexColumn)`
   align-items: flex-start;
   z-index: 3;
 
-  a {
+  a, button {
     cursor: pointer;
 
     div {
@@ -63,12 +64,20 @@ const MobileNavMenu = (props) => {
                         Register
                     </Menu>
                 </FlexRow>
-                <FlexRow as={Link} to='/login' gap='16px'>
+                {KeyCloakService.isLoggedIn() ?
-                    <Svg width='16px' height='16px' src={loginIco}/>
+                    <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
-                    <Menu as='li'>
+                        <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
-                        Sign in
+                        <Menu as='li'>
-                    </Menu>
+                            Sign out
-                </FlexRow>
+                        </Menu>
+                    </FlexRow> :
+                    <FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
+                        <Svg width='16px' height='16px' src={loginIco}/>
+                        <Menu as='li'>
+                            Sign in
+                        </Menu>
+                    </FlexRow>
+                }
             </MobileNavMenuStyle>
         </TransBack>
     );

src/components/elements/NavBar/NavBar.js

@@ -11,6 +11,7 @@ import registerIco from '../../../assets/register_ico.svg';
 import {CHALLENGES_PAGE} from '../../../utils/globals';
 import cupIco from '../../../assets/cup_ico.svg';
 import NavBarStyle from './NavBarStyle';
+import KeyCloakService from '../../../services/KeyCloakService';
 
 const MenuButton = styled(Container)`
   width: 20px;
@@ -55,12 +56,20 @@ const NavBar = () => {
                             Register
                         </Menu>
                     </FlexRow>
-                    <FlexRow as={Link} to='/login' gap='16px'>
+                    {KeyCloakService.isLoggedIn() ?
-                        <Svg width='16px' height='16px' src={loginIco}/>
+                        <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
-                        <Menu as='li'>
+                            <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
-                            Sign in
+                            <Menu as='li'>
-                        </Menu>
+                                Sign out
-                    </FlexRow>
+                            </Menu>
+                        </FlexRow> :
+                        <FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
+                            <Svg width='16px' height='16px' src={loginIco}/>
+                            <Menu as='li'>
+                                Sign in
+                            </Menu>
+                        </FlexRow>
+                    }
                 </FlexRow>
             </FlexRow>
             <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>

src/components/elements/NavBar/NavBarStyle.js

@@ -23,7 +23,7 @@ const NavBarStyle = styled(Container)`
     .ul-desktop {
       display: flex;
 
-      a {
+      a, button {
         cursor: pointer;
 
         div {

src/components/sections/Hero.js

@@ -7,7 +7,6 @@ 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;
@@ -52,12 +51,6 @@ 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>

src/index.js

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

src/pages/Challanges/Challenges.js

@@ -12,7 +12,6 @@ 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);
@@ -121,12 +120,6 @@ 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>

src/services/HttpService.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import UserService from './UserService';
+import KeyCloakService from './KeyCloakService';
 
 const HttpMethods = {
     GET: 'GET',
@@ -11,12 +11,12 @@ const _axios = axios.create();
 
 const configure = () => {
     _axios.interceptors.request.use((config) => {
-        if (UserService.isLoggedIn()) {
+        if (KeyCloakService.isLoggedIn()) {
             const cb = () => {
-                config.headers.Authorization = `Bearer ${UserService.getToken()}`;
+                config.headers.Authorization = `Bearer ${KeyCloakService.getToken()}`;
                 return Promise.resolve(config);
             };
-            return UserService.updateToken(cb);
+            return KeyCloakService.updateToken(cb);
         }
     });
 };

src/services/KeyCloakService.js

@@ -40,7 +40,7 @@ const getUsername = () => _kc.tokenParsed?.preferred_username;
 
 const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
 
-const UserService = {
+const KeyCloakService = {
     initKeycloak,
     doLogin,
     doLogout,
@@ -51,4 +51,4 @@ const UserService = {
     hasRole,
 };
 
-export default UserService;
+export default KeyCloakService;