Support bearer token initialization in SDK (#13741)

Author: rickyrombo

.changeset/breezy-humans-sip.md

@@ -0,0 +1,5 @@
+---
+'@audius/sdk': minor
+---
+
+Support bearer token initialization

docs/docs/developers/sdk/overview.mdx

@@ -22,16 +22,26 @@ the SDK to:
 
 ...and much more!
 
-## Set Up Your Developer App
+## API Plans
 
-1. [Create an Audius account](https://audius.co/signup) if you do not have one already.
+Audius offers two API plans:
 
-2. Head to the [Settings page](https://audius.co/settings) and select "Manage Your Apps." Follow the
-   prompts to create a new developer app and get your Audius API Key and API Secret.
+| Plan          | Rate Limit         | Monthly Requests       |
+| ------------- | ------------------ | ---------------------- |
+| **Free**      | 10 requests/second | 500,000 requests/month |
+| **Unlimited** | Unlimited          | Unlimited              |
+
+The Free plan is always free with no restrictions. For higher limits and support, contact [api@audius.co](mailto:api@audius.co) about the Unlimited plan.
+
+## Get Your API Key and Bearer Token
+
+1. Visit the [Audius API Plans page](https://api.audius.co/plans) and click "Create API Key" to generate your credentials.
+
+2. You will receive an **API Key** and a **Bearer Token**. Save both securely — treat them like passwords.
 
 :::tip
 
-Make sure you save your API Secret somewhere safe — treat it like a password.
+The bearer token is the recommended way to authenticate with the Audius API.
 
 :::
 
@@ -45,7 +55,7 @@ Make sure you save your API Secret somewhere safe — treat it like a password.
 If your project is in a Node.js environment, run this in your terminal:
 
 ```bash
-npm install web3 @audius/sdk
+npm install @audius/sdk
 ```
 
 [@audius/sdk on NPM](https://www.npmjs.com/package/@audius/sdk)
@@ -56,16 +66,12 @@ Otherwise, include the SDK script tag in your web page. The Audius SDK will then
 `window.audiusSdk`.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@audius/sdk@latest/dist/sdk.min.js"></script>
 ```
 
 ## Initialize the SDK
 
-Initialize the SDK with your API key.
-
-If you plan to write data to Audius (e.g. upload a track, favorite a playlist, etc.), then pass in
-your API secret as well.
+Initialize the SDK with your API key and bearer token.
 
 ### Node.js example
 
@@ -74,48 +80,42 @@ import { sdk } from '@audius/sdk'
 
 const audiusSdk = sdk({
   apiKey: 'Your API Key goes here',
-  apiSecret: 'Your API Secret goes here',
+  bearerToken: 'Your Bearer Token goes here',
 })
 ```
 
 ### HTML + JS example
 
 ```js title="In web page"
-const audiusSdk = window.audiusSdk({ apiKey: 'Your API key goes here' })
+const audiusSdk = window.audiusSdk({
+  apiKey: 'Your API Key goes here',
+})
 ```
 
 :::warning
 
-Do NOT include your API secret if you are running the SDK on the frontend, as this will expose your
-secret.
+DO NOT include the bearer token if you are running the SDK in the browser or anywhere on the client.
+The bearer token is what allows your app to write on behalf of the users that have authorized it to
+do so. Keep your bearer token secure and never expose it in client-side code that could be inspected.
 
 :::
 
 ## Make your first API call using the SDK!
 
 Once you have the initialized SDK instance, it's smooth sailing to making your first API calls.
 
-:::note
-
-If you included your API secret in the previous step, you'll be able do both reads (e.g. fetching a
-playlist) and writes (e.g. reposting a playlist) to Audius. Otherwise, you'll be able to read data
-only.
-
-:::
-
 ```js
 // Fetch your first track!
 const track = await audiusSdk.tracks.getTrack({ trackId: 'D7KyD' })
 console.log(track, 'Track fetched!')
 
-// If you initialized the SDK with your API secret, you can write data as well.
-// For example, to favorite the track above:
+// Favorite a track
 const userId = (
   await audiusSdk.users.getUserByHandle({
     handle: 'Your Audius handle goes here',
   })
 ).data?.id
-const track = await audiusSdk.tracks.favoriteTrack({
+await audiusSdk.tracks.favoriteTrack({
   trackId: 'D7KyD',
   userId,
 })
@@ -128,7 +128,7 @@ import { sdk } from '@audius/sdk'
 
 const audiusSdk = sdk({
   apiKey: 'Your API Key goes here',
-  apiSecret: 'Your API Secret goes here',
+  bearerToken: 'Your Bearer Token goes here',
 })
 
 const track = await audiusSdk.tracks.getTrack({ trackId: 'D7KyD' })
@@ -140,44 +140,19 @@ const userId = (
   })
 ).data?.id
 
-const track = await audiusSdk.tracks.favoriteTrack({
+await audiusSdk.tracks.favoriteTrack({
   trackId: 'D7KyD',
   userId,
 })
 console.log('Track favorited!')
 ```
 
-:::note
-
-Writing data (such as uploading or favoriting a track) is only possible if you provide an apiSecret
-
-:::
-
-:::note
-
-If you are using the sdk in a browser environment you will need to do:
-
-```js
-import Web3 from 'web3'
-window.Web3 = Web3
-```
-
-:::
-
-:::note
-
-If your bundler doesn't automatically polyfill node libraries (like when using create-react-app v5)
-you will need to use the `web3` script tag instead of the `web3` npm package.
-
-:::
-
 ## Full HTML + JS example
 
 ```html title="index.html" showLineNumbers
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@audius/sdk@latest/dist/sdk.min.js"></script>
     <script>
       const fn = async () => {
@@ -203,3 +178,23 @@ you will need to use the `web3` script tag instead of the `web3` npm package.
   accounts
 
 - [Explore the API docs](/developers/sdk/tracks) to see what else you can do with the Audius SDK
+
+## Direct API Access
+
+You can also access the Audius API directly without the SDK:
+
+**REST API:**
+
+```bash
+curl -X GET "https://api.audius.co/v1/tracks/trending" \
+  -H "Authorization: Bearer <YOUR-API-BEARER-TOKEN>"
+```
+
+**gRPC:**
+
+```bash
+grpcurl -H "authorization: Bearer <YOUR-API-BEARER-TOKEN>" \
+  grpc.audius.co:443 list
+```
+
+For more details, visit the [API documentation](https://docs.audius.co/api) or the [Swagger definition](https://api.audius.co/v1).

packages/common/src/api/tan-query/collection/useUpdateCollection.ts

@@ -1,4 +1,3 @@
-import { USDC } from '@audius/fixed-decimal'
 import { Id } from '@audius/sdk'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { isEqual } from 'lodash'
@@ -9,7 +8,6 @@ import { fileToSdk } from '~/adapters/track'
 import {
   getCollectionQueryKey,
   getTrackQueryKey,
-  useCurrentAccountUser,
   useCurrentUserId
 } from '~/api'
 import { useQueryContext } from '~/api/tan-query/utils'
@@ -40,13 +38,6 @@ export const useUpdateCollection = () => {
     imageUtils: { generatePlaylistArtwork }
   } = useQueryContext()
   const queryClient = useQueryClient()
-  const { data: account } = useCurrentAccountUser({
-    select: (user) => ({
-      erc_wallet: user?.erc_wallet,
-      wallet: user?.wallet
-    })
-  })
-  const { erc_wallet, wallet } = account ?? {}
   const dispatch = useDispatch()
   const { data: currentUserId } = useCurrentUserId()
 
@@ -86,30 +77,15 @@ export const useUpdateCollection = () => {
         const priceCents = Number(
           collectionUpdate.stream_conditions.usdc_purchase.price
         )
-        const priceWei = Number(USDC(priceCents / 100).value.toString())
-
-        const walletToUse = erc_wallet ?? wallet
-        if (!walletToUse) {
-          throw new Error('No wallet found for user')
-        }
-
-        // Get the user's USDC bank address from the wallet
-        const { userBank } =
-          await sdk.services.claimableTokensClient.getOrCreateUserBank({
-            ethWallet: walletToUse,
-            mint: 'USDC'
-          })
-        const userBankStr = userBank.toString()
 
         // Update the stream conditions with the price and splits
         collectionUpdate.stream_conditions = {
           usdc_purchase: {
             price: priceCents,
             splits: [
               {
-                payout_wallet: userBankStr,
-                percentage: 100,
-                amount: priceWei
+                user_id: currentUserId,
+                percentage: 100
               }
             ]
           }

packages/common/src/store/confirmer/index.ts

@@ -1,6 +1,6 @@
 export * as confirmerActions from './actions'
 export { default as confirmerReducer } from './reducer'
 export * as confirmerSelectors from './selectors'
-export { default as confirmerSagas, confirmTransaction } from './sagas'
+export { default as confirmerSagas } from './sagas'
 export * from './types'
 export { initialState as initialConfirmerState } from './reducer'

packages/common/src/store/confirmer/sagas.ts

@@ -2,8 +2,6 @@ import { call, delay, put, race, select, takeEvery } from 'redux-saga/effects'
 
 import { waitForValue } from '~/utils/sagaHelpers'
 
-import { getSDK } from '..'
-
 import * as confirmerActions from './actions'
 import {
   getResult,
@@ -17,18 +15,6 @@ import {
 } from './selectors'
 import type { RequestConfirmationError } from './types'
 
-export function* confirmTransaction(blockHash: string, blockNumber: number) {
-  const sdk = yield* getSDK()
-  yield call(
-    [sdk.services.entityManager, sdk.services.entityManager.confirmWrite],
-    {
-      blockHash,
-      blockNumber
-    }
-  )
-  return true
-}
-
 /* Private */
 
 // Makes a call and races a confirmation callback against a timeout, enqueues requests with