https://github.com/pyncz/trpc-refresh-token-link
🔃 Refresh token link for tRPC client
https://github.com/pyncz/trpc-refresh-token-link
helpers jwt trpc typescript utils
Last synced: about 2 months ago
JSON representation
🔃 Refresh token link for tRPC client
- Host: GitHub
- URL: https://github.com/pyncz/trpc-refresh-token-link
- Owner: pyncz
- License: mit
- Created: 2023-06-15T23:44:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T23:59:34.000Z (over 1 year ago)
- Last Synced: 2025-03-29T06:33:23.841Z (2 months ago)
- Topics: helpers, jwt, trpc, typescript, utils
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@pyncz/trpc-refresh-token-link
- Size: 66.4 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @pyncz/trpc-refresh-token-link
🔃 Refresh token link for [tRPC](https://trpc.io/) client.
Inspired by the tRPC's built-in [`retryLink`](https://github.com/trpc/trpc/blob/1f4a2ead34ba0d1054dd47bfd66d082dc57a04bd/packages/client/src/links/retryLink.ts).
## Install
Just install `@pyncz/trpc-refresh-token-link` with your favorite package manager.
```bash
pnpm 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`.
```ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
import { refreshTokenLink } from '@pyncz/trpc-refresh-token-link'
/**
* A helper client to use in `refreshTokenLink` to fetch a new jwt pair
* Or you can use a regular http `fetch` if your API supports it
*/
const trpcClient = createTRPCProxyClient({
transformer,
links: [
httpBatchLink({ /* ... */ }),
],
})
/**
* Your actual tRPC client
*/
export const trpc = createTRPCProxyClient({
transformer: yourTransformer,
links: [
refreshTokenLink({
// Get locally stored refresh token
getRefreshToken: () => {
return storage.get('jwt')?.refresh
},
// Fetch a new JWT pair by refresh token from your API
fetchJwtPairByRefreshToken: (refreshToken) => {
return trpcClient.auth.refreshToken.query({ refreshToken })
},
// Callback on JWT pair is successfully fetched with `fetchJwtPairByRefreshToken`
onJwtPairFetched: (payload) => {
storage.set('jwt', payload)
},
// optional: Callback on JWT refresh request is failed
onRefreshFailed: () => {
// Probably you would like to remove stored jwt and log out the user here
storage.remove('jwt')
},
// optional: Callback on a request is failed with UNAUTHORIZED code,
// before the refresh flow is started
onUnauthorized: () => {
// Uh oh, just got 401!
},
}),
httpBatchLink({ /* ... */ }),
],
})
```
> **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.