@pyncz/trpc-refresh-token-link

🔃 Refresh token link for tRPC client.

Inspired by the tRPC's built-in retryLink.

Install

Just install @pyncz/trpc-refresh-token-link with your favorite package manager.

1pnpm install @pyncz/trpc-refresh-token-link

Usage

With the setup below your trpc client will try to get a new JWT pair (access and refresh tokens) from your API should it get 401 UNAUTHORIZED.

1import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
2import { refreshTokenLink } from '@pyncz/trpc-refresh-token-link'
3
4/**
5 * A helper client to use in `refreshTokenLink` to fetch a new jwt pair
6 * Or you can use a regular http `fetch` if your API supports it
7 */
8const trpcClient = createTRPCProxyClient<YourAppRouter>({
9  transformer,
10  links: [
11    httpBatchLink({ /* ... */ }),
12  ],
13})
14
15/**
16 * Your actual tRPC client
17 */
18export const trpc = createTRPCProxyClient<YourAppRouter>({
19  transformer: yourTransformer,
20  links: [
21    refreshTokenLink({
22      // Get locally stored refresh token
23      getRefreshToken: () => {
24        return storage.get('jwt')?.refresh
25      },
26
27      // Fetch a new JWT pair by refresh token from your API
28      fetchJwtPairByRefreshToken: (refreshToken) => {
29        return trpcClient.auth.refreshToken.query({ refreshToken })
30      },
31
32      // Callback on JWT pair is successfully fetched with `fetchJwtPairByRefreshToken`
33      onJwtPairFetched: (payload) => {
34        storage.set('jwt', payload)
35      },
36
37      // optional: Callback on JWT refresh request is failed
38      onRefreshFailed: () => {
39        // Probably you would like to remove stored jwt and log out the user here
40        storage.remove('jwt')
41      },
42
43      // optional: Callback on a request is failed with UNAUTHORIZED code,
44      // before the refresh flow is started
45      onUnauthorized: () => {
46        // Uh oh, just got 401!
47      },
48    }),
49
50    httpBatchLink({ /* ... */ }),
51  ],
52})

Note While the refresh flow is running, the outgoing requests will be paused until we get a new jwt pair (or get an error).

We can't hold back only procedures that require authentication because we don't know which procedures are protected beforehand without additional meta.