first ugly version of authenticated backend requests.

needs some refactoring, but it works?

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

backend/requirements.txt

@@ -4,6 +4,7 @@ pillow
 python-dotenv
 mozilla-django-oidc
 django-htmx
+django-cors-headers
 celery
 djangorestframework
 markdown

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

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

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

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,