Simplify OAuth refreshToken middleware by using OAuth service in the middleware (#13805)

Removes the deps on usersApi by removing the `isWriteAccessGranted`
method (which is redundant to the devApps APIs) and the `verifyToken`
method (which is redundant with the usersApi) and calling fetch manually
internally.

Then, this allows the OAuth service to be initialized before other APIs
so that it can be used in the config for middlewares to all other APIs.

---------

Co-authored-by: Dylan Jeffers <dylan@audius.co>
Co-authored-by: Ray Jacobson <ray@audius.co>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: 6 people

packages/mobile/src/harmony-native/components/Artwork.tsx

@@ -81,6 +81,8 @@ export const Artwork = (props: ArtworkProps) => {
         borderRadius={borderRadius}
         border='default'
         shadow={shadow}
+        w='100%'
+        h='100%'
         style={{ borderWidth }}
       >
         {isLoading && hasImageSource ? (

packages/sdk/src/sdk/createSdkWithServices.ts

@@ -29,9 +29,11 @@ import { developmentConfig } from './config/development'
 import { productionConfig } from './config/production'
 import {
   addAppInfoMiddleware,
-  addRequestSignatureMiddleware
+  addRequestSignatureMiddleware,
+  addTokenRefreshMiddleware
 } from './middleware'
 import { OAuth } from './oauth'
+import { OAuthTokenStore } from './oauth/tokenStore'
 import {
   PaymentRouterClient,
   getDefaultPaymentRouterClientConfig
@@ -133,7 +135,7 @@ export const createSdkWithServices = (config: SdkConfig) => {
     )
   }
 
-  // Initialize APIs
+  // Initialize APIs (also creates tokenStore and oauth)
   const apis = initializeApis({
     config,
     apiKey,
@@ -142,18 +144,7 @@ export const createSdkWithServices = (config: SdkConfig) => {
     services
   })
 
-  // Initialize OAuth
-  const oauth = isBrowser
-    ? new OAuth({
-        appName,
-        apiKey,
-        usersApi: apis.users,
-        logger: services.logger
-      })
-    : undefined
-
   return {
-    oauth,
     ...apis
   }
 }
@@ -460,11 +451,36 @@ const initializeApis = ({
     })
   ]
 
+  // Token store for PKCE flow — provides dynamic accessToken to Configuration
+  const tokenStore = new OAuthTokenStore()
+
+  // Auto-refresh middleware — intercepts 401s and retries with a fresh token.
+  const oauth =
+    typeof window !== 'undefined'
+      ? new OAuth({
+          apiKey,
+          tokenStore,
+          basePath
+        })
+      : undefined
+
+  if (apiKey && oauth) {
+    middleware.push(
+      addTokenRefreshMiddleware({
+        oauth
+      })
+    )
+  }
+
+  const bearerToken = 'bearerToken' in config ? config.bearerToken : undefined
+
   const apiClientConfig = new Configuration({
     fetchApi: fetch,
     middleware,
     basePath,
-    accessToken: 'bearerToken' in config ? config.bearerToken : undefined
+    // Static bearerToken takes precedence; otherwise use the dynamic store
+    // so PKCE login can inject tokens after construction.
+    accessToken: bearerToken ?? tokenStore.asAccessTokenProvider()
   })
 
   const tracks = new TracksApi(apiClientConfig, services)
@@ -507,6 +523,8 @@ const initializeApis = ({
   const search = new SearchApi(apiClientConfig)
 
   return {
+    oauth,
+    tokenStore,
     tracks,
     users,
     albums,

packages/sdk/src/sdk/createSdkWithoutServices.ts

@@ -59,6 +59,16 @@ export const createSdkWithoutServices = (config: SdkConfig) => {
   // Token store for PKCE flow — provides dynamic accessToken to Configuration
   const tokenStore = new OAuthTokenStore()
 
+  // Initialize OAuth early so it can be passed to middleware
+  const oauth =
+    typeof window !== 'undefined'
+      ? new OAuth({
+          apiKey,
+          tokenStore,
+          basePath
+        })
+      : undefined
+
   if (apiSecret || services?.audiusWalletClient) {
     middleware.push(
       addRequestSignatureMiddleware({
@@ -87,12 +97,10 @@ export const createSdkWithoutServices = (config: SdkConfig) => {
   }
 
   // Auto-refresh middleware — intercepts 401s and retries with a fresh token.
-  if (apiKey) {
+  if (apiKey && oauth) {
     middleware.push(
       addTokenRefreshMiddleware({
-        tokenStore,
-        apiKey,
-        basePath
+        oauth
       })
     )
   }
@@ -106,17 +114,8 @@ export const createSdkWithoutServices = (config: SdkConfig) => {
     accessToken: bearerToken ?? tokenStore.asAccessTokenProvider()
   })
 
-  // Initialize OAuth
+  // Initialize API clients
   const usersApi = new UsersApi(apiConfig)
-  const oauth =
-    typeof window !== 'undefined'
-      ? new OAuth({
-          apiKey,
-          usersApi,
-          tokenStore,
-          basePath
-        })
-      : undefined
 
   return {
     oauth,

packages/sdk/src/sdk/middleware/addTokenRefreshMiddleware.test.ts

@@ -1,17 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { OAuthTokenStore } from '../oauth/tokenStore'
+import type { OAuth } from '../oauth/OAuth'
 
 import { addTokenRefreshMiddleware } from './addTokenRefreshMiddleware'
 
-// Mock cross-fetch used by the middleware
-vi.mock('cross-fetch', () => ({
-  default: vi.fn()
-}))
-
-import crossFetch from 'cross-fetch'
-const mockCrossFetch = vi.mocked(crossFetch)
-
 // Minimal fetch mock helper
 function mockResponse(status: number, body?: object): Response {
   return new Response(body ? JSON.stringify(body) : null, {
@@ -20,18 +12,24 @@ function mockResponse(status: number, body?: object): Response {
   })
 }
 
-describe('addTokenRefreshMiddleware', () => {
-  let tokenStore: OAuthTokenStore
-  const apiKey = 'test-api-key'
-  const basePath = 'https://api.example.com/v1'
+function createMockOAuth(
+  refreshBehaviour: () => Promise<string | null>,
+  hasRefreshToken = true
+): OAuth {
+  return {
+    hasRefreshToken,
+    refreshAccessToken: refreshBehaviour
+  } as unknown as OAuth
+}
 
+describe('addTokenRefreshMiddleware', () => {
   beforeEach(() => {
-    tokenStore = new OAuthTokenStore()
     vi.restoreAllMocks()
   })
 
   it('passes through non-401 responses unchanged', async () => {
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
+    const oauth = createMockOAuth(async () => 'token')
+    const mw = addTokenRefreshMiddleware({ oauth })
     const response = mockResponse(200, { data: 'ok' })
 
     const result = await mw.post!({
@@ -44,8 +42,10 @@ describe('addTokenRefreshMiddleware', () => {
     expect(result).toBe(response)
   })
 
-  it('passes through 401 when no refresh token is available', async () => {
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
+  it('passes through 401 without calling refreshAccessToken when unauthenticated', async () => {
+    const refreshFn = vi.fn()
+    const oauth = createMockOAuth(refreshFn, false)
+    const mw = addTokenRefreshMiddleware({ oauth })
     const response = mockResponse(401)
 
     const result = await mw.post!({
@@ -56,28 +56,30 @@ describe('addTokenRefreshMiddleware', () => {
     })
 
     expect(result).toBe(response)
+    expect(refreshFn).not.toHaveBeenCalled()
   })
 
-  it('refreshes and retries on 401 when refresh token exists', async () => {
-    tokenStore.setTokens('expired-access', 'valid-refresh')
+  it('passes through 401 when refresh returns null (no refresh token)', async () => {
+    const oauth = createMockOAuth(async () => null)
+    const mw = addTokenRefreshMiddleware({ oauth })
+    const response = mockResponse(401)
 
-    const refreshResponse = mockResponse(200, {
-      access_token: 'new-access',
-      refresh_token: 'new-refresh',
-      token_type: 'Bearer',
-      expires_in: 3600,
-      scope: 'write'
+    const result = await mw.post!({
+      fetch,
+      url: 'https://api.example.com/v1/users/me',
+      init: {},
+      response
     })
 
-    const retryResponse = mockResponse(200, { data: 'success' })
-
-    // Mock cross-fetch for the refresh call
-    mockCrossFetch.mockResolvedValueOnce(refreshResponse)
+    expect(result).toBe(response)
+  })
 
-    // The retry fetch provided in context
+  it('refreshes and retries on 401 when refresh succeeds', async () => {
+    const oauth = createMockOAuth(async () => 'new-access')
+    const retryResponse = mockResponse(200, { data: 'success' })
     const contextFetch = vi.fn().mockResolvedValueOnce(retryResponse)
 
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
+    const mw = addTokenRefreshMiddleware({ oauth })
 
     const result = await mw.post!({
       fetch: contextFetch,
@@ -89,19 +91,7 @@ describe('addTokenRefreshMiddleware', () => {
       response: mockResponse(401)
     })
 
-    // Refresh endpoint was called
-    expect(mockCrossFetch).toHaveBeenCalledWith(
-      `${basePath}/oauth/token`,
-      expect.objectContaining({
-        method: 'POST'
-      })
-    )
-
-    // Token store was updated
-    expect(tokenStore.accessToken).toBe('new-access')
-    expect(tokenStore.refreshToken).toBe('new-refresh')
-
-    // Original request was retried
+    // Original request was retried with new token
     expect(contextFetch).toHaveBeenCalledWith(
       'https://api.example.com/v1/tracks/123',
       expect.objectContaining({
@@ -115,12 +105,8 @@ describe('addTokenRefreshMiddleware', () => {
   })
 
   it('surfaces 401 when refresh fails', async () => {
-    tokenStore.setTokens('expired-access', 'revoked-refresh')
-
-    // Refresh returns 400 (invalid_grant)
-    mockCrossFetch.mockResolvedValueOnce(mockResponse(400))
-
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
+    const oauth = createMockOAuth(async () => null)
+    const mw = addTokenRefreshMiddleware({ oauth })
     const original401 = mockResponse(401)
 
     const result = await mw.post!({
@@ -130,80 +116,14 @@ describe('addTokenRefreshMiddleware', () => {
       response: original401
     })
 
-    // Returns the original 401 — doesn't swallow it
     expect(result).toBe(original401)
   })
 
-  it('surfaces 401 when refresh endpoint returns invalid JSON', async () => {
-    tokenStore.setTokens('expired-access', 'valid-refresh')
-
-    // Return 200 but with garbage body
-    mockCrossFetch.mockResolvedValueOnce(
-      new Response('not json', { status: 200 })
-    )
-
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
-    const original401 = mockResponse(401)
-
-    const result = await mw.post!({
-      fetch,
-      url: 'https://api.example.com/v1/tracks/123',
-      init: {},
-      response: original401
+  it('surfaces 401 when refreshAccessToken throws', async () => {
+    const oauth = createMockOAuth(async () => {
+      throw new Error('network failure')
     })
-
-    expect(result).toBe(original401)
-  })
-
-  it('surfaces 401 when refresh response is missing required fields', async () => {
-    tokenStore.setTokens('expired-access', 'valid-refresh')
-
-    // Return 200 but only access_token (no refresh_token)
-    mockCrossFetch.mockResolvedValueOnce(
-      mockResponse(200, { access_token: 'new-access' })
-    )
-
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
-    const original401 = mockResponse(401)
-
-    const result = await mw.post!({
-      fetch,
-      url: 'https://api.example.com/v1/tracks/123',
-      init: {},
-      response: original401
-    })
-
-    expect(result).toBe(original401)
-  })
-
-  it('surfaces 401 when network error occurs during refresh', async () => {
-    tokenStore.setTokens('expired-access', 'valid-refresh')
-
-    mockCrossFetch.mockRejectedValueOnce(new Error('network failure'))
-
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
-    const original401 = mockResponse(401)
-
-    const result = await mw.post!({
-      fetch,
-      url: 'https://api.example.com/v1/tracks/123',
-      init: {},
-      response: original401
-    })
-
-    expect(result).toBe(original401)
-  })
-
-  it('surfaces 401 when refresh token is cleared between check and exchange', async () => {
-    tokenStore.setTokens('expired-access', 'about-to-be-cleared')
-
-    // Simulate: refresh token exists at guard check, but the exchange returns
-    // empty strings (server rejected it). The middleware should not store empty tokens.
-    mockCrossFetch.mockResolvedValueOnce(
-      mockResponse(200, { access_token: '', refresh_token: '' })
-    )
-
-    const mw = addTokenRefreshMiddleware({ tokenStore, apiKey, basePath })
+    const mw = addTokenRefreshMiddleware({ oauth })
     const original401 = mockResponse(401)
 
     const result = await mw.post!({
@@ -213,7 +133,6 @@ describe('addTokenRefreshMiddleware', () => {
       response: original401
     })
 
-    // Empty tokens are rejected by the validation
     expect(result).toBe(original401)
   })
 })