Merge branch 'tobi-dev'

This commit is contained in:
Tobias 2025-08-01 21:26:02 +02:00
commit fd80051d9e
5 changed files with 78 additions and 4 deletions

View file

@ -1,7 +1,6 @@
# How the Spotify API registration works
[Spotify Docs](https://developer.spotify.com/documentation/web-api/tutorials/getting-started#create-an-app)
[Spotify Docs](https://developer.spotify.com/documentation/web-api/tutorials/getting-started#create-app)
## Creating an App with their developer console
@ -9,7 +8,11 @@ https://developer.spotify.com/dashboard
*App* name: Serena
*App description*: open source radio station emulator to get the vibe right
*redirect URI*: https://localhost:3000
*redirect URI*:
- Development: http://127.0.0.1:3000/callback
- Production: https://your-domain.com/callback
**Important**: Spotify doesn't accept `localhost` URLs. Use `127.0.0.1` for local development.
## Requesting an Access Token

View file

@ -0,0 +1,30 @@
import React from 'react';
import { getSpotifyLoginUrl, isLoggedIn, removeAccessToken } from '../utils/spotifyAuth.js';
const LoginButton = () => {
const loggedIn = isLoggedIn();
const handleLogout = () => {
removeAccessToken();
window.location.reload(); // Refresh to update UI
};
if (loggedIn) {
return (
<div className="login-status">
<span> Connected to Spotify</span>
<button onClick={handleLogout} className="logout-btn">
Logout
</button>
</div>
);
}
return (
<a href={getSpotifyLoginUrl()}>
<button className="spotify-login-btn">Login with Spotify</button>
</a>
);
};
export default LoginButton;

View file

@ -5,7 +5,6 @@ function CreateStation() {
const [password, setPassword] = useState('');
const handleCreateStation = () => {
// Handle station creation logic here
console.log('Creating station with password:', password);
};

View file

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import AddSongModal from './AddSongModal';
import LoginButton from '../components/LoginButton';
function StationPage() {
const [isModalOpen, setIsModalOpen] = useState(false);
@ -44,6 +45,7 @@ function StationPage() {
<header className="station-header">
<h1>Serena Station</h1>
<p className="station-subtitle">Collaborative Music Experience</p>
<LoginButton />
</header>
<div className="media-controls-section">

View file

@ -0,0 +1,40 @@
const CLIENT_ID = 'e1274b6593674771bea12d8366c7978b';
const REDIRECT_URI = 'http://localhost:3000/callback';
const SCOPES = [
'user-read-private',
'user-read-email',
'playlist-read-private',
'user-library-read',
];
export const getSpotifyLoginUrl = () => {
const scope = SCOPES.join('%20');
return `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=token&redirect_uri=${encodeURIComponent(
REDIRECT_URI
)}&scope=${scope}`;
};
export const getAccessTokenFromUrl = () => {
const hash = window.location.hash;
if (hash) {
const params = new URLSearchParams(hash.substring(1));
return params.get('access_token');
}
return null;
};
export const storeAccessToken = (token) => {
localStorage.setItem('spotify_access_token', token);
};
export const getAccessToken = () => {
return localStorage.getItem('spotify_access_token');
};
export const removeAccessToken = () => {
localStorage.removeItem('spotify_access_token');
};
export const isLoggedIn = () => {
return !!getAccessToken();
};