From ca378790f171159671a97979f82e6dae4dfe4337 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Mon, 30 Jun 2025 13:22:27 +0200
Subject: [PATCH] first ugly version of authenticated backend requests. needs
 some refactoring, but it works?

---
 backend/muzak/settings.py       |  5 ++++-
 backend/requirements.txt        |  1 +
 frontend/src/app/page.tsx       |  1 +
 frontend/src/app/users/page.tsx | 31 +++++++++++++++++++++++++++++++
 frontend/src/data/fetch.ts      | 13 +++++++++++++
 frontend/tsconfig.json          |  3 ++-
 6 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/users/page.tsx
 create mode 100644 frontend/src/data/fetch.ts

diff --git a/backend/muzak/settings.py b/backend/muzak/settings.py
index 638143e..20cd059 100644
--- a/backend/muzak/settings.py
+++ b/backend/muzak/settings.py
@@ -13,6 +13,7 @@ SECRET_KEY = 'oefjei1lwe918Alkfwuf3ionwu-@kt)6m1e)ah$&^_i9y!qffhm-a$#m6+++'
 DEBUG = True
 
 ALLOWED_HOSTS = ['*']
+CORS_ALLOW_ALL_ORIGINS = True
 
 CURRENT_HOST = 'http://127.0.0.1:8000' # Needs to be set for spotify callback to work.
 
@@ -26,12 +27,14 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'django_htmx',
-    'rest_framework'
+    'rest_framework',
+    'corsheaders',
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    "corsheaders.middleware.CorsMiddleware",
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
diff --git a/backend/requirements.txt b/backend/requirements.txt
index b3f7a79..33e9586 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -4,6 +4,7 @@ pillow
 python-dotenv
 mozilla-django-oidc
 django-htmx
+django-cors-headers
 celery
 djangorestframework
 markdown
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index fcb437a..b8ed722 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,6 +8,7 @@ Log.setLogger(console);
 
 export default function Page() {
   const auth = useAuth();
+  console.log(auth);
 
   switch (auth.activeNavigator) {
     case "signinSilent":
diff --git a/frontend/src/app/users/page.tsx b/frontend/src/app/users/page.tsx
new file mode 100644
index 0000000..a031dcc
--- /dev/null
+++ b/frontend/src/app/users/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { getUser } from "muzak/data/fetch";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+  const [userData, setUserData] = useState<User[]>([]);
+
+  useEffect(() => {
+    async function getUsers() {
+      const user = getUser();
+      const access_token = user?.access_token;
+      const headers = new Headers();
+      headers.set("Authorization", `Bearer ${access_token}`);
+      headers.set("Content-Type", "application/json; charset=utf-8");
+      const users = await fetch("http://127.0.0.1:8001/api/user/", { headers });
+      const userData = await users.json();
+      setUserData(userData);
+    }
+    getUsers();
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-around">
+      {userData.length > 0 ? (
+        userData.map((user) => <div key={user.id}>{user.email}</div>)
+      ) : (
+        <div>Loading users...</div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/data/fetch.ts b/frontend/src/data/fetch.ts
new file mode 100644
index 0000000..145ad20
--- /dev/null
+++ b/frontend/src/data/fetch.ts
@@ -0,0 +1,13 @@
+"use client";
+import { oidcConfig } from "muzak/config/auth";
+import { User } from "oidc-client-ts";
+
+export function getUser() {
+  let oidcStorage = window?.sessionStorage.getItem(
+    `oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`,
+  );
+  if (!oidcStorage) {
+    return null;
+  }
+  return User.fromStorageString(oidcStorage);
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index b7a8edc..290cd52 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -6,7 +6,8 @@
     // Make local stuff available for non-relative import
     "baseUrl": "./",
     "paths": {
-      "muzak/config/*": ["./src/config/*"]
+      "muzak/config/*": ["./src/config/*"],
+      "muzak/data/*": ["./src/data/*"]
     },
 
     "allowJs": false,