From a32a21e8e4fab9dba78a83648086112d5d7ea715 Mon Sep 17 00:00:00 2001 From: Richard Wohlbold Date: Tue, 21 Jun 2022 17:31:00 +0200 Subject: [PATCH] Get authorization code from IdP --- frontend/.env.example | 2 ++ frontend/package-lock.json | 42 ++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/App.tsx | 4 +++ frontend/src/auth/AuthCodeReceiver.tsx | 6 ++++ frontend/src/auth/LoginPage.tsx | 10 ++++++ frontend/src/auth/userManager.ts | 9 ++++++ 7 files changed, 74 insertions(+) create mode 100644 frontend/.env.example create mode 100644 frontend/src/auth/AuthCodeReceiver.tsx create mode 100644 frontend/src/auth/LoginPage.tsx create mode 100644 frontend/src/auth/userManager.ts diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..aef1d87 --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,2 @@ +VITE_OIDC_ISSUER_URL=https://oidc.hpi.de +VITE_OIDC_CLIENT_ID= diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 58c8009..9444915 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.8.2", "@mui/material": "^5.8.2", + "oidc-client-ts": "^2.0.5", "react": "^18.0.0", "react-dom": "^18.0.0", "react-query": "^3.39.0", @@ -2154,6 +2155,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", + "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" + }, "node_modules/csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", @@ -4077,6 +4083,11 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", + "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -4453,6 +4464,18 @@ "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" }, + "node_modules/oidc-client-ts": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.0.5.tgz", + "integrity": "sha512-OXIuuLU2iSEtLblM+xR6+SE0GWjyUMVH6HtKpvZnV2AQt0irWZ+yAXGVB8EgNBu0lAQ/UN40EIme+uC0p7WwKw==", + "dependencies": { + "crypto-js": "^4.1.1", + "jwt-decode": "^3.1.2" + }, + "engines": { + "node": ">=12.13.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -7123,6 +7146,11 @@ "which": "^2.0.1" } }, + "crypto-js": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", + "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" + }, "csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", @@ -8424,6 +8452,11 @@ "object.assign": "^4.1.2" } }, + "jwt-decode": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", + "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -8701,6 +8734,15 @@ "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" }, + "oidc-client-ts": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.0.5.tgz", + "integrity": "sha512-OXIuuLU2iSEtLblM+xR6+SE0GWjyUMVH6HtKpvZnV2AQt0irWZ+yAXGVB8EgNBu0lAQ/UN40EIme+uC0p7WwKw==", + "requires": { + "crypto-js": "^4.1.1", + "jwt-decode": "^3.1.2" + } + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 0630055..a58d2f1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.8.2", "@mui/material": "^5.8.2", + "oidc-client-ts": "^2.0.5", "react": "^18.0.0", "react-dom": "^18.0.0", "react-query": "^3.39.0", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 244e4fe..70610ef 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,6 +3,8 @@ import { useQuery } from 'react-query'; import { Link, Route, Switch } from 'wouter'; import { useState } from 'react'; import { Button, Container, Stack, TextField, Typography } from '@mui/material'; +import AuthCodeReceiver from './auth/AuthCodeReceiver'; +import LoginPage from './auth/LoginPage'; type PollPageProps = { params: { code: string }; @@ -64,6 +66,8 @@ function App() { + + diff --git a/frontend/src/auth/AuthCodeReceiver.tsx b/frontend/src/auth/AuthCodeReceiver.tsx new file mode 100644 index 0000000..d3df3d4 --- /dev/null +++ b/frontend/src/auth/AuthCodeReceiver.tsx @@ -0,0 +1,6 @@ +import { DefaultParams, RouteComponentProps, RouteProps } from "wouter"; + +export default function AuthCodeReceiver(props: RouteComponentProps) { + const params = new URLSearchParams(window.location.search); + return
{params.get("code")}
; +} \ No newline at end of file diff --git a/frontend/src/auth/LoginPage.tsx b/frontend/src/auth/LoginPage.tsx new file mode 100644 index 0000000..41f8620 --- /dev/null +++ b/frontend/src/auth/LoginPage.tsx @@ -0,0 +1,10 @@ +import { Button, Stack } from "@mui/material"; +import { userManager } from "./userManager"; + +export default function LoginPage() { + return + + +} \ No newline at end of file diff --git a/frontend/src/auth/userManager.ts b/frontend/src/auth/userManager.ts new file mode 100644 index 0000000..ed647fd --- /dev/null +++ b/frontend/src/auth/userManager.ts @@ -0,0 +1,9 @@ +import { UserManager, UserManagerSettings } from "oidc-client-ts"; + +const settings: UserManagerSettings = { + authority: import.meta.env.VITE_OIDC_ISSUER_URL, + client_id: import.meta.env.VITE_OIDC_CLIENT_ID, + redirect_uri: window.location.origin + "/auth/callback", + response_type: "code", +}; +export const userManager = new UserManager(settings); \ No newline at end of file