[WIP] Fix invalid redirect URI issue for Spotify authorization

[Copilot]

Fix for INVALID_CLIENT: Invalid redirect URI issue

Problem Analysis

The issue "INVALID_CLIENT: Invalid redirect URI" occurs when the redirect URI in the Spotify authorization URL doesn't match what's configured in the user's Spotify Developer Dashboard. Currently:

• The default redirect URI is hardcoded to http://localhost:5000/callback in config.py
• Users cannot customize the redirect URI through the web interface
• This causes problems when the app is accessed via:
  • Different hostname (server IP, domain name)
  • Different port
  • Docker deployments
  • Remote servers

Solution Implemented

• Analyze codebase and identify the issue
• Add redirect_uri field to the configuration form in index.html
• Update web route to handle redirect_uri in config updates
• Add visual help text explaining redirect URI requirements
• Add test for redirect URI configuration
• Test the changes manually
• Run security checks

Changes Made

1. app/templates/index.html: Added "Redirect URI" input field with helpful instructions linking to Spotify Dashboard
2. app/routes/web.py: Updated to pass spotify_redirect_uri to template and save it from form submission
3. tests/test_config.py: Added test case to verify redirect URI can be configured and persisted

Screenshot

The new field allows users to customize their redirect URI to match what they've configured in their Spotify Developer Dashboard, fixing the INVALID_CLIENT error.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>INVALID_CLIENT: Invalid redirect URI</issue_title>
<issue_description>https://accounts.spotify.com/authorize?client_id=957c764c7cec4e0ea89ceefef34e7d8f&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fcallback&scope=user-read-currently-playing</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes INVALID_CLIENT: Invalid redirect URI #5

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.