diff --git a/src/contexts/spotify-context.tsx b/src/contexts/spotify-context.tsx index a072390..e5933c5 100644 --- a/src/contexts/spotify-context.tsx +++ b/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(null); export const SpotifyProvider: React.FC = ({ children }) => { const { roles } = useAuth(); const isAdmin = roles?.includes('Admin') || false; - + const config = useConfig(); + const [authState, setAuthState] = useState(defaultSpotifyState); - + const [currentTrack, setCurrentTrack] = useState(null); const [playbackState, setPlaybackState] = useState(null); - + const [devices, setDevices] = useState([]); const [activeDevice, setActiveDeviceState] = useState(null); - + const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); @@ -40,8 +42,8 @@ export const SpotifyProvider: React.FC = ({ 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(() => { diff --git a/src/hooks/use-config.ts b/src/hooks/use-config.ts new file mode 100644 index 0000000..c6c5e51 --- /dev/null +++ b/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 +} diff --git a/src/lib/config.ts b/src/lib/config.ts new file mode 100644 index 0000000..d019a61 --- /dev/null +++ b/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 || '', +} diff --git a/src/lib/supertokens/config.ts b/src/lib/supertokens/config.ts index ba716ef..852309f 100644 --- a/src/lib/supertokens/config.ts +++ b/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', }