Key independent system

src/lib/components/UserAvatar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
+  import { getObjectUrl } from "$lib";
   export let user: any;
 
   async function navToSettings() {
@@ -15,7 +16,7 @@
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
       {#if user.icon}
-        <img src={user.icon} alt="" />
+        <img src={getObjectUrl("profile-pics", user.icon)} alt="" />
       {:else}
         <span class="text-2xl -mt-1">{user.first_name[0]}</span>
       {/if}

src/lib/index.ts

@@ -124,3 +124,45 @@ export async function getImage(adventureTitle: string) {
     return `Error fetching Wikipedia data for "${adventureTitle}".`;
   }
 }
+
+/**
+ * Returns the URL of an object in the specified bucket.
+ * @param bucketName - The name of the bucket.
+ * @param fileName - The name of the file.
+ * @returns The URL of the object.
+ */
+export const getObjectUrl = (bucketName: string, fileName: string): string => {
+  let objectUrl: string;
+  let endpoint: string = "";
+  if (import.meta.env.VITE_MINIO_CLIENT_OVERRIDE) {
+    endpoint = import.meta.env.VITE_MINIO_CLIENT_OVERRIDE as string;
+  } else {
+    endpoint = import.meta.env.VITE_AWS_S3_ENDPOINT as string;
+  }
+
+  // This code is not as clean as it could be, but it works for whats needed. Help is welcome to clean it up!
+  // Currently supports Amazon S3, Google Cloud Storage, DigitalOcean Spaces, and Supabase Storage as well as self-hosted MinIO.
+
+  if (endpoint.includes("amazonaws.com")) {
+    // Amazon S3
+    objectUrl = `https://${bucketName}.s3.${
+      import.meta.env.AWS_REGION
+    }.amazonaws.com/${fileName}`;
+  } else if (endpoint.includes("storage.googleapis.com")) {
+    // Google Cloud Storage
+    objectUrl = `https://storage.googleapis.com/${bucketName}/${fileName}`;
+  } else if (endpoint.includes("digitaloceanspaces.com")) {
+    // DigitalOcean Spaces
+    objectUrl = `https://${bucketName}.${endpoint}/${fileName}`;
+  } else if (endpoint.includes("supabase.co")) {
+    // Supabase Storage
+    endpoint = endpoint.replace("s3", "object/public"); // Remove the version
+    console.log(endpoint);
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  } else {
+    // Default fallback
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  }
+
+  return objectUrl as string;
+};

src/lib/server/s3.ts

@@ -19,7 +19,7 @@ const s3Config: S3ClientConfig = {
     accessKeyId: env.AWS_ACCESS_KEY_ID as string,
     secretAccessKey: env.AWS_SECRET_ACCESS_KEY as string,
   },
-  endpoint: env.AWS_S3_ENDPOINT, // Add the endpoint
+  endpoint: env.VITE_AWS_S3_ENDPOINT, // Add the endpoint
   forcePathStyle: true,
 };
 
@@ -53,7 +53,7 @@ export const ensureBucketExists = async (bucketName: string): Promise<void> => {
           {
             Effect: "Allow",
             Principal: "*", // This allows anyone (public)
-            Action: ["s3:GetBucketLocation", "s3:ListBucket"],
+            Action: "s3:GetBucketLocation",
             Resource: `arn:aws:s3:::${bucketName}`,
           },
           {
@@ -146,10 +146,10 @@ export const deleteObject = async (bucketName: string, fileName: string) => {
 export const getObjectUrl = (bucketName: string, fileName: string): string => {
   let objectUrl: string;
   let endpoint: string = "";
-  if (env.MINIO_CLIENT_OVERRIDE) {
-    endpoint = env.MINIO_CLIENT_OVERRIDE as string;
+  if (env.VITE_MINIO_CLIENT_OVERRIDE) {
+    endpoint = env.VITE_MINIO_CLIENT_OVERRIDE as string;
   } else {
-    endpoint = env.AWS_S3_ENDPOINT as string;
+    endpoint = env.VITE_AWS_S3_ENDPOINT as string;
   }
 
   // This code is not as clean as it could be, but it works for whats needed. Help is welcome to clean it up!