Set up environment variables

rollup.config.js

@@ -5,11 +5,13 @@ import terser from '@rollup/plugin-terser';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import css from 'rollup-plugin-css-only';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+import dotenv from 'dotenv';
+dotenv.config();
 
 const production = !process.env.ROLLUP_WATCH;
 
-console.log('Environment variables:', process.env);
-
 function serve() {
 	let server;
 
@@ -40,6 +42,11 @@ export default {
 		file: 'public/build/bundle.js'
 	},
 	plugins: [
+		json(),
+		replace({
+      'process.env.YOUTUBE_CLIENT_ID': JSON.stringify(process.env.YOUTUBE_CLIENT_ID),
+			'process.env.YOUTUBE_CLIENT_SECRET': JSON.stringify(process.env.YOUTUBE_CLIENT_SECRET),
+    }),
 		svelte({
 			compilerOptions: {
 				// enable run-time checks when not in production

src/YouTubeService.js

@@ -1,23 +1,16 @@
 class YouTubeService {
   constructor() {
+    this.clientId = process.env.YOUTUBE_CLIENT_ID
+    this.clientSecret = process.env.YOUTUBE_CLIENT_SECRET
     this.redirectUri = "http://localhost:3000";
     this.accessToken = localStorage.getItem("accessToken");
     this.refreshToken = localStorage.getItem("refreshToken");
     this.tokenExpiryTime = localStorage.getItem("tokenExpiryTime");
     this.logTokens(this.accessToken, this.refreshToken, this.tokenExpiryTime);
-    this.fetchClientInfo()
-  }
-
-  async fetchClientInfo() {
-    const fetchConfig = await fetch('/config.json');
-    const config = await fetchConfig.json();
-    this.clientId = config.clientId_youTube;
-    this.clientSecret = config.clientSecret_youTube;
   }
 
   // Exchange authorization code for access and refresh tokens
   async exchangeCodeForTokens(code) {
-    await this.fetchClientInfo();
     const response = await fetch("https://oauth2.googleapis.com/token", {
       method: "POST",
       headers: {