Make keycloak work

Author: Alexandra Zwinger

src/App.tsx

@@ -4,18 +4,18 @@ import {Routes, Route} from "react-router-dom";
 import {customTheme} from "./customTheme";
 import React from "react";
 import Navbar from "./components/Navbar";
-// import {ReactKeycloakProvider} from '@react-keycloak/web'
+import {ReactKeycloakProvider} from '@react-keycloak/web'
 
 import CalenderPage from './pages/CalendarPage';
 import Homepage from './pages/Homepage';
 import Settings from './pages/YourStudies';
 import Page404 from './pages/Page404';
 import Score from './pages/Score';
-// import keycloak from "./Keycloak";
+import keycloak from "./Keycloak";
 
 function App() {
     return (
-        /*<ReactKeycloakProvider
+        <ReactKeycloakProvider
             authClient={keycloak}
             initOptions={{ onLoad: 'login-required', checkLoginIframe: false }}
             onEvent={(event, error) => {
@@ -24,7 +24,7 @@ function App() {
                     console.error('Authentication Error:', error);
                 }
             }}
-        >*/
+        >
             <ThemeProvider theme={customTheme}>
                 <CssBaseline/>
                 <GlobalStyles styles={{html: {WebkitFontSmoothing: "auto"}}}/>
@@ -39,7 +39,7 @@ function App() {
                     </Routes>
                 </div>
             </ThemeProvider>
-       /*</ReactKeycloakProvider>*/
+       </ReactKeycloakProvider>
     );
 }
 

src/AxiosConfig.tsx

@@ -1,22 +1,25 @@
 import axios from 'axios';
-/*import keycloak from "./Keycloak";*/
+import keycloak from "./Keycloak";
 
 const axiosInstance = axios.create({
     baseURL: 'http://localhost:8080',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
 });
 
-/*axiosInstance.interceptors.request.use(
+axiosInstance.interceptors.request.use(
     async (config) => {
         const token = keycloak.token;
         if (token) {
             config.headers['Authorization'] = `Bearer ${token}`;
         }
-        console.log(token);
         return config;
     },
     (error) => {
         return Promise.reject(error);
     }
-);*/
+);
 
 export default axiosInstance;

src/Keycloak.ts

@@ -1,11 +1,10 @@
-/* import Keycloak from "keycloak-js";
+import Keycloak from "keycloak-js";
 
 const keycloak = new Keycloak({
   url: 'http://localhost:7070',
-  realm: 'study-buddies-realm',
-  clientId: 'keycloak-client'
+  realm: 'study-buddies',
+  clientId: 'sb-backend'
 });
 
 export default keycloak;
-*/
-export class Keycloak {}
+

src/components/CalendarComponent.tsx

@@ -6,6 +6,8 @@ import {MeetingDto} from '../dtos/MeetingDto';
 import '../styles/Calendar.css';
 import {useTheme} from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import {getMeetings} from "../api/MeetingApi";
+import axiosInstance from "../AxiosConfig";
 
 export default function CalendarComponent(props: { isDialogOpen: boolean }) {
     const [selectedMeeting, setSelectedMeeting] = useState<MeetingDto | null>(null);
@@ -15,10 +17,9 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
 
     const fetchMeetings = async () => {
         try {
-            const response = await fetch('http://localhost:8080/meeting');
+            const response = await getMeetings(axiosInstance);
 
-            const meetings = await response.json();
-            setEvents(meetings.map(({title, date_from, date_until, description, place}: any) => ({
+            setEvents(response.map(({title, date_from, date_until, description, place}: any) => ({
                 title,
                 start: new Date(date_from).toISOString(),
                 end: new Date(date_until).toISOString(),

src/form/MeetingForm.tsx

@@ -11,10 +11,10 @@ import dayjs from 'dayjs';
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {deDE} from "@mui/x-date-pickers/locales";
 import {createMeeting} from "../api/MeetingApi";
-import axios from "axios";
 import {useForm} from "@pankod/refine-react-hook-form";
 import {defaultMeetingDto, MeetingDto} from "../dtos/MeetingDto";
 import {HttpError} from "@refinedev/core";
+import axiosInstance from "../AxiosConfig";
 
 interface MeetingFormProps {
     open: boolean;
@@ -91,7 +91,7 @@ export function MeetingForm({open, onClose}: MeetingFormProps) {
         };
 
         try {
-            await createMeeting(axios, meetingData);
+            await createMeeting(axiosInstance, meetingData);
             onClose();
         } catch (error) {
             console.error('Fehler:', error);