Auth flow

sequenceDiagram
  participant FE as Vue frontend
  participant BE as DRF backend
  participant SP as Spotify OAuth

  FE->>BE: GET /auth/spotify/url
  BE->>BE: Generate state, save to DB
  BE-->>FE: Return Spotify login URL

  FE->>SP: Redirect browser to login URL
  SP->>SP: User authenticates & grants access
  SP-->>FE: Redirect to /callback?code=…&state=…

  FE->>BE: POST /auth/spotify/callback { code, state }
  BE->>BE: Validate state against DB
  BE->>SP: Exchange code for OAuth token
  SP-->>BE: Return access + refresh tokens

  BE->>BE: Create / upsert user in DB
  BE->>BE: Sign JWT for user
  BE-->>FE: Return JWT

  FE->>FE: Store JWT — user authenticated

Loading