Skip to content

Commit 5f736f0

Browse files
docs: update outside-React example to use Redux middleware
1 parent 0854c99 commit 5f736f0

File tree

2 files changed

+14
-27
lines changed

2 files changed

+14
-27
lines changed

EXAMPLES.md

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
- [Use with a Class Component](#use-with-a-class-component)
44
- [Protect a Route](#protect-a-route)
55
- [Call an API](#call-an-api)
6+
- [Use Auth0 outside of React](#use-auth0-outside-of-react)
67
- [Protecting a route in a `react-router-dom v6` app](#protecting-a-route-in-a-react-router-dom-v6-app)
78
- [Protecting a route in a Gatsby app](#protecting-a-route-in-a-gatsby-app)
89
- [Protecting a route in a Next.js app (in SPA mode)](#protecting-a-route-in-a-nextjs-app-in-spa-mode)
@@ -104,7 +105,7 @@ export default Posts;
104105

105106
## Use Auth0 outside of React
106107

107-
If you need to access the `Auth0Client` outside of the React tree — for example in middleware, axios interceptors, or TanStack Router loaders — use `createAuth0Client` to create a shared instance and pass it to `Auth0Provider` via the `client` prop.
108+
If you need to share an `Auth0Client` instance between the React tree and code that has no access to React's lifecycle — such as Redux middleware — use `createAuth0Client` to create a shared instance and pass it to `Auth0Provider` via the `client` prop.
108109

109110
Using `createAuth0Client` ensures the `auth0-react` telemetry header is set correctly on the client.
110111

@@ -136,29 +137,21 @@ export default function App() {
136137
}
137138
```
138139

139-
Use the same client instance directly outside React, for example in an axios interceptor:
140+
Use the same client instance in Redux middleware:
140141

141142
```js
142-
import axios from 'axios';
143143
import { auth0Client } from './auth0-client';
144144

145-
axios.interceptors.request.use(async (config) => {
146-
const token = await auth0Client.getTokenSilently();
147-
config.headers.Authorization = `Bearer ${token}`;
148-
return config;
149-
});
145+
export const authMiddleware = store => next => async action => {
146+
if (action.requiresAuth) {
147+
const token = await auth0Client.getTokenSilently();
148+
return next({ ...action, token });
149+
}
150+
return next(action);
151+
};
150152
```
151153

152-
Or in a TanStack Router middleware:
153-
154-
```js
155-
import { auth0Client } from './auth0-client';
156-
157-
export const authMiddleware = createMiddleware().server(async ({ next }) => {
158-
const token = await auth0Client.getTokenSilently();
159-
return next({ context: { token } });
160-
});
161-
```
154+
> **Note:** `getTokenSilently()` requires an active session. Ensure `Auth0Provider` has mounted and completed initialization before calling it outside React.
162155
163156
## Custom token exchange
164157

src/auth0-provider.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,13 @@ const toAuth0ClientOptions = (
147147
* Creates a new `Auth0Client` with the `auth0-react` SDK telemetry header set.
148148
*
149149
* Use this when you need to share a single client instance with `Auth0Provider`
150-
* and also access Auth0 outside of React (e.g. in middleware or interceptors).
150+
* and also access Auth0 outside of React (e.g. in Redux middleware).
151151
*
152152
* @example
153153
* ```tsx
154154
* const client = createAuth0Client({ domain, clientId });
155155
*
156-
* // Use outside React (e.g. in TanStack middleware, axios interceptors, Redux middleware)
156+
* // Use outside React (e.g. in Redux middleware)
157157
* const token = await client.getTokenSilently();
158158
*
159159
* // Use inside React
@@ -163,13 +163,7 @@ const toAuth0ClientOptions = (
163163
* ```
164164
*/
165165
export const createAuth0Client = (options: Auth0ClientOptions): Auth0Client => {
166-
return new Auth0Client({
167-
...options,
168-
auth0Client: {
169-
name: 'auth0-react',
170-
version: __VERSION__,
171-
},
172-
});
166+
return new Auth0Client(toAuth0ClientOptions(options));
173167
};
174168

175169
/**

0 commit comments

Comments
 (0)