cha0sg0d•10mo ago

Efficient way to use tRPC client with auth headers from secure storage

Wondering if anyone has a recommended pattern on caching the deviceId / authHeader using a React Context instead of fetching it async on each request. Thanks!

export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: getServerUrl(),
      async headers() {
        const authorization = await getAuthHeader()
        const deviceId = await createOrGetDeviceIdFromStore()
        return {
          authorization,
          'x-device-id': deviceId,
        }
      }
    })
  ]
})

export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: getServerUrl(),
      async headers() {
        const authorization = await getAuthHeader()
        const deviceId = await createOrGetDeviceIdFromStore()
        return {
          authorization,
          'x-device-id': deviceId,
        }
      }
    })
  ]
})

2 Replies

Alex / KATT 🐱•10mo ago

You could do an auth link before That could cache it Look at custom links

cha0sg0dOP•9mo ago

I tried to do this and was unable to make an async call in the auth link to fetch the headers. any advice? and could you possible give a more fleshed out example of how this would work? Thanks!