Support OAuth popups with redirect_uris (#13916)

- Previously `OAuth` logins only listened for postMessage when
explicitly set as the redirect_uri. This update makes the OAuth service
to listen to messages from an explicit `redirect_uri` as well if
`display: 'popup'`.
- Adds `getRedirectResult()` to `OAuth` to handle OAuth redirects. When
called inside a popup, posts the message back to the opener. Otherwise,
exchanges the authorization code for access/refresh tokens and returns
the login result.
- Mirrors other OAuth implementers, like
[Firebase](https://firebase.google.com/docs/reference/js/auth.md#getredirectresult_c35dc1f)
- Adds persistence to `OAuthTokenStore` by default, so that the user
stays logged in across sessions/refreshes.
- Adds a getter `isAuthenticated` to `OAuth` for convenience.
- Adds `getUser()` to `OAuth`.

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: rickyrombo

.changeset/angry-knives-fold.md

@@ -0,0 +1,11 @@
+---
+'@audius/sdk': minor
+---
+
+Support OAuth popups with redirect_uris
+
+- Previously `OAuth` logins only listened for postMessage when explicitly set as the redirect_uri. This update makes the OAuth service to listen to messages from an explicit `redirect_uri` as well if `display: 'popup'`.
+- Adds `getRedirectResult()` to `OAuth` to handle OAuth redirects. When called inside a popup, posts the message back to the opener. Otherwise, exchanges the authorization code for access/refresh tokens and returns the login result.
+- Adds persistence to `OAuthTokenStore` by default, so that the user stays logged in across sessions/refreshes.
+- Adds a getter `isAuthenticated` to `OAuth` for convenience.
+- Adds a `getUser()` to `OAuth` for getting the signed in user.

packages/sdk/src/sdk/oauth/OAuth.test.ts

@@ -218,7 +218,6 @@ describe('OAuth message listener lifecycle', () => {
       close: vi.fn()
     } as unknown as Window)
     vi.mocked(window.localStorage.setItem).mockClear()
-    vi.mocked(window.localStorage.getItem).mockReturnValue('csrf-token')
     vi.mocked(window.sessionStorage.setItem).mockClear()
     vi.mocked(window.sessionStorage.getItem).mockReturnValue(null)
   })
@@ -283,16 +282,356 @@ describe('OAuth message listener lifecycle', () => {
     )
   })
 
-  it('does not attach a listener when redirectUri is not postMessage', async () => {
+  it('does not attach a listener when display is fullScreen', async () => {
     const oauth = makeOAuth({ basePath: 'https://api.example.com' })
-    // When redirectUri is a real URL the code does window.location.href = …
-    // and never enters the postMessage branch — don't await the never-settling promise
-    oauth.loginAsync({ redirectUri: 'https://myapp.example.com/callback' })
+    // When display is fullScreen the code does window.location.href = …
+    // and never enters the popup branch
+    oauth.loginAsync({
+      redirectUri: 'https://myapp.example.com/callback',
+      display: 'fullScreen'
+    })
     await Promise.resolve()
     expect(window.addEventListener).not.toHaveBeenCalledWith(
       'message',
       expect.any(Function),
       false
     )
   })
+
+  it('attaches a message listener for popup even with a real redirectUri', async () => {
+    const oauth = makeOAuth({ basePath: 'https://api.example.com' })
+    oauth.loginAsync({
+      redirectUri: 'https://myapp.example.com/callback',
+      display: 'popup'
+    })
+    await Promise.resolve()
+    expect(window.addEventListener).toHaveBeenCalledWith(
+      'message',
+      expect.any(Function),
+      false
+    )
+  })
+})
+
+describe('OAuth._exchangeCodeForTokens (via getRedirectResult)', () => {
+  let tokenStore: OAuthTokenStore
+
+  const mockProfile = {
+    userId: 1,
+    email: 'test@example.com',
+    name: 'Test User',
+    handle: 'testuser',
+    verified: false,
+    profilePicture: null,
+    apiKey: 'test-api-key',
+    sub: 1,
+    iat: '2026-01-01'
+  }
+
+  beforeEach(() => {
+    tokenStore = new OAuthTokenStore()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function setLocationWithCode(code: string, state: string) {
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: `https://example.com/callback?code=${code}&state=${state}`,
+        origin: 'https://example.com',
+        search: `?code=${code}&state=${state}`,
+        hash: ''
+      },
+      writable: true
+    })
+  }
+
+  function resetLocation() {
+    Object.defineProperty(window, 'location', {
+      value: { href: '', origin: 'https://example.com', search: '', hash: '' },
+      writable: true
+    })
+  }
+
+  it('exchanges code for tokens and returns LoginResult', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockImplementation(
+      (key: string) => {
+        if (key === 'audiusOauthState') return 'test-state'
+        if (key === 'audiusPkceCodeVerifier') return 'test-verifier'
+        if (key === 'audiusPkceRedirectUri')
+          return 'https://example.com/callback'
+        return null
+      }
+    )
+    setLocationWithCode('auth-code-123', 'test-state')
+    ;(window as any).history = { replaceState: vi.fn() }
+
+    const fetchMock = vi.fn()
+    // First call: /oauth/token
+    fetchMock.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({
+          access_token: 'access-123',
+          refresh_token: 'refresh-123'
+        }),
+        { status: 200 }
+      )
+    )
+    // Second call: /oauth/me
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify(mockProfile), { status: 200 })
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+
+    expect(oauth.hasRedirectResult).toBe(true)
+    const result = await oauth.getRedirectResult()
+
+    expect(result).not.toBeNull()
+    expect(result!.profile.handle).toBe('testuser')
+    expect(result!.encodedJwt).toBe('access-123')
+    expect(tokenStore.accessToken).toBe('access-123')
+    expect(tokenStore.refreshToken).toBe('refresh-123')
+
+    // Verify correct POST body for token exchange
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.example.com/oauth/token',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          grant_type: 'authorization_code',
+          code: 'auth-code-123',
+          code_verifier: 'test-verifier',
+          client_id: 'test-api-key',
+          redirect_uri: 'https://example.com/callback'
+        })
+      })
+    )
+
+    // Second call returns null (consumed)
+    expect(oauth.hasRedirectResult).toBe(false)
+    expect(await oauth.getRedirectResult()).toBeNull()
+
+    resetLocation()
+  })
+
+  it('returns null when no code/state in URL', async () => {
+    resetLocation()
+    const oauth = makeOAuth({
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+    expect(oauth.hasRedirectResult).toBe(false)
+    expect(await oauth.getRedirectResult()).toBeNull()
+  })
+
+  it('returns null when code verifier is missing from sessionStorage', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockReturnValue(null)
+    setLocationWithCode('auth-code-123', 'test-state')
+    ;(window as any).history = { replaceState: vi.fn() }
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+    // URL has code+state, so hasRedirectResult is true before detection
+    expect(oauth.hasRedirectResult).toBe(true)
+    // But getRedirectResult returns null because verifier is missing
+    expect(await oauth.getRedirectResult()).toBeNull()
+    // After detection, hasRedirectResult reflects consumed state
+    expect(oauth.hasRedirectResult).toBe(false)
+
+    resetLocation()
+  })
+
+  it('does not exchange when state does not match', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockImplementation(
+      (key: string) => {
+        if (key === 'audiusPkceCodeVerifier') return 'test-verifier'
+        return null
+      }
+    )
+    setLocationWithCode('auth-code-123', 'wrong-state')
+    ;(window as any).history = { replaceState: vi.fn() }
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+    expect(oauth.hasRedirectResult).toBe(true)
+    expect(await oauth.getRedirectResult()).toBeNull()
+    expect(oauth.hasRedirectResult).toBe(false)
+
+    resetLocation()
+  })
+
+  it('cleans up the URL after detecting redirect params', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockImplementation(
+      (key: string) => {
+        if (key === 'audiusOauthState') return 'test-state'
+        if (key === 'audiusPkceCodeVerifier') return 'test-verifier'
+        return null
+      }
+    )
+    setLocationWithCode('auth-code-123', 'test-state')
+    const replaceStateSpy = vi.fn()
+    ;(window as any).history = { replaceState: replaceStateSpy }
+
+    // Mock fetch so the exchange doesn't fail
+    const fetchMock = vi.fn()
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify({ access_token: 'a', refresh_token: 'r' }), {
+        status: 200
+      })
+    )
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify({ userId: 1, handle: 'x' }), { status: 200 })
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+
+    // URL cleanup doesn't happen until getRedirectResult triggers detection
+    expect(replaceStateSpy).not.toHaveBeenCalled()
+    await oauth.getRedirectResult()
+
+    expect(replaceStateSpy).toHaveBeenCalledTimes(1)
+    const cleanedUrl = replaceStateSpy.mock.calls[0]?.[2]
+    expect(cleanedUrl).not.toContain('code=')
+    expect(cleanedUrl).not.toContain('state=')
+
+    resetLocation()
+  })
+
+  it('cleans up sessionStorage keys on redirect detection', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockImplementation(
+      (key: string) => {
+        if (key === 'audiusOauthState') return 'test-state'
+        if (key === 'audiusPkceCodeVerifier') return 'test-verifier'
+        if (key === 'audiusPkceRedirectUri')
+          return 'https://example.com/callback'
+        return null
+      }
+    )
+    setLocationWithCode('auth-code-123', 'test-state')
+    ;(window as any).history = { replaceState: vi.fn() }
+    const fetchMock = vi.fn()
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify({ access_token: 'a', refresh_token: 'r' }), {
+        status: 200
+      })
+    )
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify({ userId: 1, handle: 'x' }), { status: 200 })
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+
+    // Trigger detection
+    await oauth.getRedirectResult()
+
+    expect(window.sessionStorage.removeItem).toHaveBeenCalledWith(
+      'audiusPkceCodeVerifier'
+    )
+    expect(window.sessionStorage.removeItem).toHaveBeenCalledWith(
+      'audiusPkceRedirectUri'
+    )
+
+    resetLocation()
+  })
+
+  it('detects code in URL fragment (responseMode=fragment)', async () => {
+    vi.mocked(window.sessionStorage.getItem).mockImplementation(
+      (key: string) => {
+        if (key === 'audiusOauthState') return 'test-state'
+        if (key === 'audiusPkceCodeVerifier') return 'test-verifier'
+        return null
+      }
+    )
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: 'https://example.com/callback#code=frag-code&state=test-state',
+        origin: 'https://example.com',
+        search: '',
+        hash: '#code=frag-code&state=test-state'
+      },
+      writable: true
+    })
+    ;(window as any).history = { replaceState: vi.fn() }
+
+    const fetchMock = vi.fn()
+    fetchMock.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({
+          access_token: 'access-frag',
+          refresh_token: 'refresh-frag'
+        }),
+        { status: 200 }
+      )
+    )
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify(mockProfile), { status: 200 })
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+
+    expect(oauth.hasRedirectResult).toBe(true)
+    const result = await oauth.getRedirectResult()
+    expect(result).not.toBeNull()
+    expect(result!.encodedJwt).toBe('access-frag')
+
+    resetLocation()
+  })
+
+  it('forwards code+state to opener via postMessage when in a popup', async () => {
+    setLocationWithCode('popup-code', 'test-state')
+    const postMessageSpy = vi.fn()
+    const closeSpy = vi.fn()
+    ;(window as any).opener = { postMessage: postMessageSpy }
+    ;(window as any).close = closeSpy
+    ;(window as any).history = { replaceState: vi.fn() }
+
+    const oauth = new OAuth({
+      apiKey: 'test-api-key',
+      basePath: 'https://api.example.com',
+      tokenStore
+    })
+
+    // Nothing happens until getRedirectResult is called
+    expect(postMessageSpy).not.toHaveBeenCalled()
+    await oauth.getRedirectResult()
+
+    expect(postMessageSpy).toHaveBeenCalledWith(
+      { code: 'popup-code', state: 'test-state' },
+      'https://example.com'
+    )
+    expect(closeSpy).toHaveBeenCalled()
+    // Should NOT start a local exchange
+    expect(oauth.hasRedirectResult).toBe(false)
+    ;(window as any).opener = null
+    resetLocation()
+  })
 })