Merge branch 'tobi-dev'
This commit is contained in:
commit
fd80051d9e
5 changed files with 78 additions and 4 deletions
|
@ -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
|
||||
|
||||
|
|
30
frontend/src/components/LoginButton.jsx
Normal file
30
frontend/src/components/LoginButton.jsx
Normal 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;
|
|
@ -5,7 +5,6 @@ function CreateStation() {
|
|||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleCreateStation = () => {
|
||||
// Handle station creation logic here
|
||||
console.log('Creating station with password:', password);
|
||||
};
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
40
frontend/src/utils/spotifyAuth.js
Normal file
40
frontend/src/utils/spotifyAuth.js
Normal 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();
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue