SWA-Project/SWA-frontend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added Keycloak

Browse Source
This commit is contained in:
Timo Schneider
2024-06-11 20:43:52 +02:00
parent 0667d96de3
commit 36ca8c76d3
6 changed files with 117 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

4
src/App.js
View File

@@ -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>
)}

10
src/Authentification/Keycloak.js Normal file
View File

@@ -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;

3
src/api/posts.api.js
View File

@@ -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");

21
src/index.js
View File

@@ -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>
);