more env stuff

src/contexts/spotify-context.tsx

@@ -1,6 +1,7 @@
 import { createContext, useCallback, useEffect, useState, PropsWithChildren } from 'react';
 import { SpotifyAuth } from '@/lib/spotify/auth';
 import { useAuth } from './auth-context';
+import { useConfig } from '@/hooks/use-config';
 import type {
   SpotifyContextType,
   SpotifyAuthState,
@@ -23,15 +24,16 @@ export const SpotifyContext = createContext<SpotifyContextType | null>(null);
 export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const { roles } = useAuth();
   const isAdmin = roles?.includes('Admin') || false;
-  
+  const config = useConfig();
+
   const [authState, setAuthState] = useState<SpotifyAuthState>(defaultSpotifyState);
-  
+
   const [currentTrack, setCurrentTrack] = useState<SpotifyTrack | null>(null);
   const [playbackState, setPlaybackState] = useState<SpotifyPlaybackState | null>(null);
-  
+
   const [devices, setDevices] = useState<SpotifyDevice[]>([]);
   const [activeDevice, setActiveDeviceState] = useState<SpotifyDevice | null>(null);
-  
+
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -40,8 +42,8 @@ export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [isResumeLoading, setIsResumeLoading] = useState(false);
 
   const spotifyAuth = new SpotifyAuth(
-    import.meta.env.VITE_SPOTIFY_CLIENT_ID!,
-    import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
+    config.spotifyClientId,
+    config.spotifyRedirectUri
   );
 
   useEffect(() => {

src/hooks/use-config.ts

@@ -0,0 +1,12 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { getConfig } from '@/lib/config'
+
+export function useConfig() {
+  const { data } = useSuspenseQuery({
+    queryKey: ['config'],
+    queryFn: () => getConfig(),
+    staleTime: Infinity,
+  })
+
+  return data
+}

src/lib/config.ts

@@ -0,0 +1,19 @@
+import { createServerFn } from '@tanstack/react-start'
+
+export const getConfig = createServerFn({ method: 'GET' }).handler(async () => {
+  return {
+    apiDomain: process.env.VITE_API_DOMAIN || 'http://localhost:3000',
+    websiteDomain: process.env.VITE_WEBSITE_DOMAIN || 'http://localhost:3000',
+    spotifyClientId: process.env.VITE_SPOTIFY_CLIENT_ID || '',
+    spotifyRedirectUri: process.env.VITE_SPOTIFY_REDIRECT_URI || '',
+  }
+})
+
+export const serverConfig = {
+  apiDomain: process.env.VITE_API_DOMAIN || 'http://localhost:3000',
+  websiteDomain: process.env.VITE_WEBSITE_DOMAIN || 'http://localhost:3000',
+  supertokensUri: process.env.SUPERTOKENS_URI || 'http://localhost:3567',
+  pocketbaseUrl: process.env.POCKETBASE_URL || 'http://localhost:8090',
+  spotifyClientId: process.env.VITE_SPOTIFY_CLIENT_ID || '',
+  spotifyClientSecret: process.env.SPOTIFY_CLIENT_SECRET || '',
+}

src/lib/supertokens/config.ts

@@ -1,7 +1,14 @@
+const getOrigin = (): string => {
+  if (typeof window !== 'undefined') {
+    return window.location.origin;
+  }
+  return process.env.VITE_API_DOMAIN || 'http://localhost:3000';
+};
+
 export const appInfo = {
   appName: 'FLXN',
-  apiDomain: process.env.VITE_API_DOMAIN || 'http://localhost:3000',
-  websiteDomain: process.env.VITE_WEBSITE_DOMAIN || 'http://localhost:3000',
+  apiDomain: getOrigin(),
+  websiteDomain: getOrigin(),
   apiBasePath: '/api/auth',
   websiteBasePath: '/auth',
 }