spotify controls
This commit is contained in:
yohlo
135
src/app/routes/api/spotify/callback.ts
Normal file
135
src/app/routes/api/spotify/callback.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyAuth } from '@/lib/spotify/auth'
|
||||
|
||||
const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
|
||||
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
|
||||
const SPOTIFY_REDIRECT_URI = import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/callback').methods({
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
// Helper function to get return path from state parameter
|
||||
const getReturnPath = (state: string | null): string => {
|
||||
if (!state) return '/';
|
||||
try {
|
||||
const decodedState = JSON.parse(atob(state));
|
||||
return decodedState.returnPath || '/';
|
||||
} catch {
|
||||
return '/';
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const url = new URL(request.url)
|
||||
const code = url.searchParams.get('code')
|
||||
const state = url.searchParams.get('state')
|
||||
const error = url.searchParams.get('error')
|
||||
|
||||
const returnPath = getReturnPath(state);
|
||||
|
||||
// Check for OAuth errors
|
||||
if (error) {
|
||||
console.error('Spotify OAuth error:', error)
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_error=' + encodeURIComponent(error),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (!code || !state) {
|
||||
console.error('Missing code or state:', { code: !!code, state: !!state })
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_error=missing_code_or_state',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
console.log('Token exchange attempt:', {
|
||||
client_id: SPOTIFY_CLIENT_ID,
|
||||
redirect_uri: SPOTIFY_REDIRECT_URI,
|
||||
has_code: !!code,
|
||||
has_state: !!state,
|
||||
})
|
||||
|
||||
// Exchange code for tokens
|
||||
const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
code,
|
||||
redirect_uri: SPOTIFY_REDIRECT_URI,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!tokenResponse.ok) {
|
||||
const errorText = await tokenResponse.text()
|
||||
console.error('Token exchange error:', {
|
||||
status: tokenResponse.status,
|
||||
statusText: tokenResponse.statusText,
|
||||
body: errorText,
|
||||
redirect_uri: SPOTIFY_REDIRECT_URI,
|
||||
})
|
||||
|
||||
// Return more detailed error info
|
||||
const errorParam = encodeURIComponent(`${tokenResponse.status}: ${errorText}`)
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const tokens = await tokenResponse.json()
|
||||
|
||||
console.log('Token exchange successful:', {
|
||||
has_access_token: !!tokens.access_token,
|
||||
has_refresh_token: !!tokens.refresh_token,
|
||||
expires_in: tokens.expires_in,
|
||||
})
|
||||
|
||||
console.log('Decoded return path:', returnPath);
|
||||
|
||||
// Create response with redirect to original path
|
||||
const response = new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_auth=success',
|
||||
},
|
||||
})
|
||||
|
||||
// Set secure cookies for tokens
|
||||
const isSecure = process.env.NODE_ENV === 'production'
|
||||
const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`
|
||||
|
||||
response.headers.append('Set-Cookie', `spotify_access_token=${tokens.access_token}; ${cookieOptions}`)
|
||||
|
||||
if (tokens.refresh_token) {
|
||||
// Refresh token doesn't expire, set longer max age
|
||||
const refreshCookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${60 * 60 * 24 * 30}` // 30 days
|
||||
response.headers.append('Set-Cookie', `spotify_refresh_token=${tokens.refresh_token}; ${refreshCookieOptions}`)
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Spotify callback error:', error)
|
||||
// Try to get return path from query params if available, otherwise use default
|
||||
const url = new URL(request.url);
|
||||
const state = url.searchParams.get('state');
|
||||
const returnPath = getReturnPath(state);
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_error=callback_failed',
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
195
src/app/routes/api/spotify/playback.ts
Normal file
195
src/app/routes/api/spotify/playback.ts
Normal file
@@ -0,0 +1,195 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyWebApiClient } from '@/lib/spotify/client'
|
||||
|
||||
// Helper function to get access token from cookies
|
||||
function getAccessTokenFromCookies(request: Request): string | null {
|
||||
const cookieHeader = request.headers.get('cookie')
|
||||
if (!cookieHeader) return null
|
||||
|
||||
const cookies = Object.fromEntries(
|
||||
cookieHeader.split('; ').map(c => c.split('='))
|
||||
)
|
||||
|
||||
return cookies.spotify_access_token || null
|
||||
}
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/playback').methods({
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const accessToken = getAccessTokenFromCookies(request)
|
||||
if (!accessToken) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No access token found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const body = await request.json()
|
||||
const { action, deviceId, volumePercent } = body
|
||||
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken)
|
||||
|
||||
switch (action) {
|
||||
case 'play':
|
||||
await spotifyClient.play(deviceId)
|
||||
break
|
||||
case 'pause':
|
||||
await spotifyClient.pause()
|
||||
break
|
||||
case 'next':
|
||||
await spotifyClient.skipToNext()
|
||||
break
|
||||
case 'previous':
|
||||
await spotifyClient.skipToPrevious()
|
||||
break
|
||||
case 'volume':
|
||||
if (typeof volumePercent !== 'number') {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'volumePercent must be a number' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
await spotifyClient.setVolume(volumePercent)
|
||||
break
|
||||
case 'transfer':
|
||||
if (!deviceId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'deviceId is required for transfer action' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
await spotifyClient.transferPlayback(deviceId)
|
||||
break
|
||||
default:
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Invalid action' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ success: true }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Playback control error:', error)
|
||||
|
||||
// Handle specific Spotify API errors
|
||||
if (error instanceof Error) {
|
||||
if (error.message.includes('NO_ACTIVE_DEVICE')) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No active device found. Please select a device first.' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (error.message.includes('PREMIUM_REQUIRED')) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Spotify Premium is required for playback control.' }),
|
||||
{
|
||||
status: 403,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Log the full error details for debugging
|
||||
console.error('Full error details:', {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
name: error.name,
|
||||
})
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Playback control failed', details: error instanceof Error ? error.message : 'Unknown error' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
// GET endpoint for retrieving current playback state and devices
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const accessToken = getAccessTokenFromCookies(request)
|
||||
if (!accessToken) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No access token found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const url = new URL(request.url)
|
||||
const type = url.searchParams.get('type') // 'state' or 'devices'
|
||||
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken)
|
||||
|
||||
if (type === 'devices') {
|
||||
const devices = await spotifyClient.getDevices()
|
||||
return new Response(
|
||||
JSON.stringify({ devices }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
} else if (type === 'state') {
|
||||
const playbackState = await spotifyClient.getPlaybackState()
|
||||
return new Response(
|
||||
JSON.stringify({ playbackState }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
} else {
|
||||
// Return both by default
|
||||
const [devices, playbackState] = await Promise.all([
|
||||
spotifyClient.getDevices(),
|
||||
spotifyClient.getPlaybackState(),
|
||||
])
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ devices, playbackState }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Get playback data error:', error)
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Failed to get playback data' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
127
src/app/routes/api/spotify/token.ts
Normal file
127
src/app/routes/api/spotify/token.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
|
||||
const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
|
||||
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const { refresh_token } = body
|
||||
|
||||
if (!refresh_token) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'refresh_token is required' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Refresh access token
|
||||
const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!tokenResponse.ok) {
|
||||
const error = await tokenResponse.json()
|
||||
console.error('Token refresh error:', error)
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Failed to refresh token', details: error }),
|
||||
{
|
||||
status: tokenResponse.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const tokens = await tokenResponse.json()
|
||||
|
||||
// Return new tokens
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
access_token: tokens.access_token,
|
||||
expires_in: tokens.expires_in,
|
||||
scope: tokens.scope,
|
||||
token_type: tokens.token_type,
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Token refresh endpoint error:', error)
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Internal server error' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
// GET endpoint to retrieve current tokens from cookies
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const cookieHeader = request.headers.get('cookie')
|
||||
if (!cookieHeader) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No cookies found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const cookies = Object.fromEntries(
|
||||
cookieHeader.split('; ').map((c: string) => c.split('='))
|
||||
)
|
||||
|
||||
const accessToken = cookies.spotify_access_token
|
||||
const refreshToken = cookies.spotify_refresh_token
|
||||
|
||||
if (!accessToken && !refreshToken) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No Spotify tokens found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
access_token: accessToken || null,
|
||||
refresh_token: refreshToken || null,
|
||||
has_tokens: !!(accessToken || refreshToken),
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Get tokens endpoint error:', error)
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Internal server error' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user