Need to add email/password authentication alongside existing OAuth flows (Spotify, Google, Apple Music) in a Next.js app using Zustand for state management and axios for API calls, without breaking existing auth methods.

When integrating Apple Music via MusicKit JS, the music_user_token returned by authorize() is NOT stable across sessions. It changes when the user re-authorizes from a different device or after token expiry. Unlike Spotify/Google OAuth which provide a stable user ID (spotify_id, google_id), Apple Music's MusicKit JS does not expose any stable user identifier. Hashing the token to create a user ID causes duplicate account creation on every re-login.

Building a multi-step onboarding flow that collects user preferences (artist follows, genres, notification settings) after OAuth signup. Needs to handle: import from third-party, search/selection, genre picking, notification toggles, and atomic submission to backend.

When running the app's Docker web container on a non-default port (e.g. 3003 instead of 3000), Spotify OAuth login fails with "Failed to authenticate". Three separate issues compound: 1) CORS blocks the OPTIONS preflight because the new origin isn't in FastAPI's allow_origins list, 2) The .env file overrides docker-compose defaults for SPOTIFY_REDIRECT_URI causing a redirect_uri mismatch during Spotify token exchange (frontend sends port 3003, backend sends port 3000), 3) Missing database columns (users.youtube_channel_id) cause a 500 error after successful token exchange because alembic migrations were incomplete.

React throws 'Hydration failed because the initial UI does not match what was rendered on the server' or 'Text content does not match. Server: X Client: Y' when using SSR frameworks (Next.js, Remix, Gatsby). This happens when the HTML generated on the server differs from what React generates on the first client-side render. Common triggers: (1) Using Date.now() or new Date() in render — different timestamps on server vs client. (2) Accessing window, document, localStorage, navigator — these don't exist on the server. (3) Conditional rendering based on browser state (window.innerWidth, matchMedia). (4) Random IDs or Math.random() in render output. (5) Browser extensions that modify the DOM before React hydrates. (6) Using typeof window !== 'undefined' incorrectly in render. (7) Different locale/timezone between server and client.