Started with the login function and it works more or less :-)

frontend/src/auth/AuthProvider.js

@@ -0,0 +1,11 @@
+import { createAuthProvider } from "react-token-auth";
+
+export const [useAuth, authFetch, login, logout] = 
+createAuthProvider({
+  accessTokenKey: 'access_token',
+  onUpdateToken: (token) => fetch('/api/refresh', {
+    method: 'POST',
+    body: token.access_token
+  })
+  .then(r => r.json())
+})

frontend/src/components/InputField.js

@@ -5,7 +5,7 @@ function InputField(props) {
   return (
     <label className="input-field">
       <p>{props.LabelName}</p>
-      <input name={props.InputName} type={props.InputType} />
+      <input name={props.InputName} onChange={props.onChange} type={props.InputType} />
     </label>
   );
 }

frontend/src/components/SubmitField.js

@@ -6,7 +6,7 @@ function SubmitField(props) {
   const InputValue = props.LabelName;
   return (
     <label className="input-field" className="btn btn--primary btn--medium">
-      <input type="submit" value={InputValue} />
+      <input type="submit" onClick={props.onClick} value={InputValue} />
     </label>
   );
 }

frontend/src/components/pages/Home.js

@@ -2,6 +2,7 @@ import React from "react";
 import "../../App.css";
 import HeroSection from "../HeroSection";
 import Footer from "../../Footer";
+import { useEffect } from "react/cjs/react.development";
 
 function Home() {
   return (

frontend/src/components/pages/Login.js

@@ -1,28 +1,72 @@
 import React from "react";
+import { useState, useEffect } from "react/cjs/react.development";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
+import { login, useAuth, logout } from "../../auth/AuthProvider";
 
 export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const onSubmitClick = (e) => {
+    e.preventDefault();
+    console.log("You pressed login");
+    let opts = {
+      username: username,
+      password: password,
+    };
+    console.log(opts);
+    fetch("/api/login", {
+      method: "post",
+      body: JSON.stringify(opts),
+    })
+      .then((r) => r.json())
+      .then((token) => {
+        if (token.access_token) {
+          login(token);
+          console.log(token);
+        } else {
+          console.log("Please type in the correct username / password");
+        }
+      });
+  };
+
+  const handleUsernameChange = (e) => {
+    setUsername(e.target.value);
+  };
+
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+
+  const [logged] = useAuth();
+
   return (
     <>
       <div className="sitePage">
         <h1>Login</h1>
-        <form>
-          <InputField
-            LabelName="Benutzername / Kennung"
-            InputType=""
-            InputName="username"
-          />
-          <InputField
-            LabelName="Passwort"
-            InputType="password"
-            InputName="password"
-          />
-          <br />
-          <SubmitField LabelName="Einloggen" />
-        </form>
+        {!logged ? (
+          <form action="#">
+            <InputField
+              LabelName="Benutzername / Kennung"
+              onChange={handleUsernameChange}
+              InputType="text"
+              InputName="username"
+            />
+            <InputField
+              LabelName="Passwort"
+              InputType="password"
+              onChange={handlePasswordChange}
+              InputName="password"
+            />
+            <br />
+            <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
+          </form>
+        ) : (
+          <button onClick={() => logout()}>Logout</button>
+        )}
       </div>
       <Footer />
     </>