Implement OIDC

frontend/.env.example

@@ -0,0 +1,2 @@
+VITE_OIDC_ISSUER_URL=https://oidc.hpi.de
+VITE_OIDC_CLIENT_ID=

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

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() {
 
       <Switch>
         <Route path='/poll/:code' component={PollPage} />
+        <Route path='/auth/callback' component={AuthCodeReceiver} />
+        <Route path='/auth/login' component={LoginPage} />
         <Route path='/' component={HomePage} />
       </Switch>
     </Container>

frontend/src/auth/AuthCodeReceiver.tsx

@@ -0,0 +1,6 @@
+import { DefaultParams, RouteComponentProps, RouteProps } from "wouter";
+
+export default function AuthCodeReceiver(props: RouteComponentProps<DefaultParams>) {
+    const params = new URLSearchParams(window.location.search);
+    return <div>{params.get("code")}</div>;
+}

frontend/src/auth/LoginPage.tsx

@@ -0,0 +1,10 @@
+import { Button, Stack } from "@mui/material";
+import { userManager } from "./userManager";
+
+export default function LoginPage() {
+    return <Stack>
+        <Button onClick={() => {
+            userManager.signinRedirect();
+        }}>Log In</Button>
+    </Stack>
+}

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