kitten.sh
1# With Refresh Authentication
2
3<p>
4 <a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
5 <img
6 alt="Open in StackBlitz"
7 src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz&style=for-the-badge"
8 />
9 </a>
10 <a
11 href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
12 <img
13 alt="Open in CodeSandbox"
14 src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15 />
16 </a>
17</p>
18
19This example shows `urql` in use with `@urql/exchange-auth`'s `authExchange`
20to support authentication token and refresh token logic. This largely follows the ["Authentication" docs
21page](https://formidable.com/open-source/urql/docs/advanced/authentication/)
22and uses the [`trygql.formidable.dev/graphql/web-collections` schema](https://github.com/FormidableLabs/trygql).
23
24To run this example install dependencies and run the `start` script:
25
26```sh
27yarn install
28yarn run start
29# or
30npm install
31npm run start
32```
33
34This example contains:
35
36- The `urql` bindings and a React app set up in [`src/App.jsx`](src/App.jsx)
37- Some authentication glue code to store the tokens in [`src/authStore.js`](src/authStore.js)
38- The `Client` and the `authExchange` from `@urql/exchange-auth` set up in [`src/client.js`](src/client.js)
39- A basic login form in [`src/pages/LoginForm.jsx`](src/pages/LoginForm.jsx)
40- And a basic login guard on [`src/App.jsx`](src/App.jsx)
41 (Note: This isn't using a query in this particular component, since this is just an example)