added Keycloak

src/App.js

@@ -7,6 +7,7 @@ import {faTimes} from "@fortawesome/free-solid-svg-icons";
 import {postApi} from "./api/posts.api";
 import {locationUtils} from "./utils/location";
 import PostComment from "./components/PostComment";
+import keycloak from "./Authentification/Keycloak";
 
 const App = () => {
     const [posts, setPosts] = useState([]);
@@ -79,6 +80,7 @@ const App = () => {
 
     return (
         <div className="app">
+            <button onClick={() => keycloak.logout()}>Logout</button>
             <h1>SWA - Jodel</h1>
             {!selectedPost && (
                 <div>
@@ -117,7 +119,7 @@ const App = () => {
                     </form>
                     <div className="comments">
                         {comments && <PostCommentList posts={comments} onPostClick={null} vote={vote}
-                                         type={"comments"}></PostCommentList>}
+                                                      type={"comments"}></PostCommentList>}
                     </div>
                 </div>
             )}

src/Authentification/Keycloak.js

@@ -0,0 +1,10 @@
+import Keycloak from "keycloak-js";
+const keycloak = new Keycloak({
+    url: "https://keycloak.anxietyprime.de/",
+    realm: "Jodel",
+    clientId: "jodel-frontend",
+});
+
+keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {});
+
+export default keycloak;

src/api/posts.api.js

@@ -1,5 +1,6 @@
 import axios from "axios"
 import {locationUtils} from "../utils/location";
+import keycloak from "../Authentification/Keycloak";
 
 const path = "https://api.jodel.anxietyprime.de/post";
 
@@ -35,7 +36,7 @@ export const postApi = {
                         "longitude": location.lon,
                         "latitude": location.lat,
                     }
-                });
+                }, { Authorization: `Bearer ${keycloak.token}`});
             }
         } else {
             console.log("Geolocation is not supported by this browser. Could'nt post without valid location");

src/index.js

@@ -2,10 +2,25 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import axios from "axios";
+import keycloak from "./Authentification/Keycloak";
+
+axios.interceptors.request.use(
+    (config) => {
+        if (keycloak.token) {
+            config.headers['Authorization'] = `Bearer ${keycloak.token}`;
+        }
+        return config;
+    },
+
+    (error) => {
+        return Promise.reject(error);
+    }
+);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );