Fix login button and improve CORS

- Fixed login URL from /auth/steam to /api/auth/steam
- Updated all Steam login buttons to custom green design with 'Login to Steam' text
- Enhanced CORS configuration with explicit preflight handling
- Added Steam image proxy endpoint for CORS-free image loading
- Improved environment variable management with .env.local support
- Added ENV_SETUP.md guide for environment configuration

routes/auth.js

@@ -68,6 +68,71 @@ export default async function authRoutes(fastify, options) {
     });
   });
 
+  // Steam image proxy - proxy Steam CDN images to avoid CORS issues
+  fastify.get("/steam/image-proxy", async (request, reply) => {
+    try {
+      const { url } = request.query;
+
+      if (!url) {
+        return reply.status(400).send({
+          error: "BadRequest",
+          message: "Image URL is required",
+        });
+      }
+
+      // Validate that it's a Steam CDN URL
+      const validDomains = [
+        "community.steamstatic.com",
+        "community.cloudflare.steamstatic.com",
+        "cdn.steamstatic.com",
+        "cdn.cloudflare.steamstatic.com",
+        "avatars.steamstatic.com",
+        "avatars.cloudflare.steamstatic.com",
+      ];
+
+      const urlObj = new URL(url);
+      const isValidDomain = validDomains.some(
+        (domain) => urlObj.hostname === domain
+      );
+
+      if (!isValidDomain) {
+        return reply.status(400).send({
+          error: "BadRequest",
+          message: "Invalid Steam CDN URL",
+        });
+      }
+
+      // Fetch the image from Steam
+      const imageResponse = await fetch(url);
+
+      if (!imageResponse.ok) {
+        return reply.status(imageResponse.status).send({
+          error: "FetchError",
+          message: "Failed to fetch image from Steam CDN",
+        });
+      }
+
+      // Get the image buffer
+      const imageBuffer = await imageResponse.arrayBuffer();
+      const contentType =
+        imageResponse.headers.get("content-type") || "image/jpeg";
+
+      // Set appropriate headers
+      reply.header("Content-Type", contentType);
+      reply.header("Cache-Control", "public, max-age=86400"); // Cache for 24 hours
+      reply.header("Access-Control-Allow-Origin", config.cors.origin);
+
+      return reply.send(Buffer.from(imageBuffer));
+    } catch (error) {
+      console.error("❌ Steam image proxy error:", error);
+      return reply.status(500).send({
+        error: "ProxyError",
+        message: "Failed to proxy Steam image",
+        details: error.message,
+      });
+    }
+  });
+
   // Steam login - initiate OAuth flow
   fastify.get("/steam", async (request, reply) => {
     try {