diff --git a/package-lock.json b/package-lock.json index 0efe7d1..9a08318 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 00a04b2..a52ee75 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 1e15f55..b4a7aac 100644 --- a/src/App.js +++ b/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 (
+

SWA - Jodel

{!selectedPost && (
@@ -117,7 +119,7 @@ const App = () => {
{comments && } + type={"comments"}>}
)} diff --git a/src/Authentification/Keycloak.js b/src/Authentification/Keycloak.js new file mode 100644 index 0000000..e7fafa8 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/api/posts.api.js b/src/api/posts.api.js index 6f776b6..f4a7cf7 100644 --- a/src/api/posts.api.js +++ b/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"); diff --git a/src/index.js b/src/index.js index 2cb1087..791c321 100644 --- a/src/index.js +++ b/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( - - - + + + );