added Keycloak

package-lock.json

@@ -11,10 +11,12 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@react-keycloak/web": "^3.4.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.7.2",
+        "keycloak-js": "^25.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.23.1",
@@ -3420,6 +3422,46 @@
         }
       }
     },
+    "node_modules/@react-keycloak/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@react-keycloak/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-1yzU7gQzs+6E1v6hGqxy0Q+kpMHg9sEcke2yxZR29WoU8KNE8E50xS6UbI8N7rWsgyYw8r9W1cUPCOF48MYjzw==",
+      "dependencies": {
+        "react-fast-compare": "^3.2.0"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/reactkeycloak"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@react-keycloak/web": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-keycloak/web/-/web-3.4.0.tgz",
+      "integrity": "sha512-yKKSCyqBtn7dt+VckYOW1IM5NW999pPkxDZOXqJ6dfXPXstYhOQCkTZqh8l7UL14PkpsoaHDh7hSJH8whah01g==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.0",
+        "@react-keycloak/core": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/reactkeycloak"
+      },
+      "peerDependencies": {
+        "keycloak-js": ">=9.0.2",
+        "react": ">=16.8",
+        "react-dom": ">=16.8",
+        "typescript": ">=3.8"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -9281,6 +9323,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12251,6 +12306,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-sha256": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.11.0.tgz",
+      "integrity": "sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12415,6 +12475,23 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/keycloak-js": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-25.0.0.tgz",
+      "integrity": "sha512-7vNDYWbi9H2LqeNvkpADL/Y/25KgG+3Byc5epd1eNAXM32FNi1DRMsbdiIHpzrTZhYlxZRWeDGhbLYIwmoMonw==",
+      "dependencies": {
+        "js-sha256": "^0.11.0",
+        "jwt-decode": "^4.0.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -15197,6 +15274,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -6,10 +6,12 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
+    "keycloak-js": "^25.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",

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>

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,6 +2,21 @@ 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(