feat: add client prop to Auth0Provider

[yogeshchoudhary147]

What

Adds a client prop to Auth0Provider so a pre-configured Auth0Client instance can be shared between the React tree and code outside of React's lifecycle (e.g. TanStack Start client function middleware).

Closes #1037. Supersedes #849 (thanks to @rodrigowbazevedo for the original draft).

Usage

import { Auth0Client } from '@auth0/auth0-spa-js';
import { Auth0Provider } from '@auth0/auth0-react';

const client = new Auth0Client({ domain, clientId });

// Outside React (e.g. TanStack Start client function middleware)
// Note: the raw Auth0Client method is getTokenSilently (not getAccessTokenSilently)
const token = await client.getTokenSilently();

// Inside React — Auth0Provider uses the same client instance
function App() {
  return <Auth0Provider client={client}><MyApp /></Auth0Provider>;
}

Notes

• Fully backward compatible — existing usage without client prop is unchanged
• Calling methods on the raw client does not update React state — use hooks inside React for that

[rodrigowbazevedo]

Thanks! 🚀

[roccomaniscalco]

Awesome 💯 Thank you!

[gyaneshgouraw-okta]

We should highlight potential pitfalls and anti patterns with this approach.

What happens if a user initilaise Auth0Provider with both raw client and together

export const auth0Client = createAuth0Client({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});

 <Auth0Provider
              client={auth0Client}
              domain={config.domain}
              clientId={config.clientId}
              key={JSON.stringify(config)}
              authorizationParams={{
                redirect_uri: window.location.origin,
                audience: config.audience || 'default'
              }}
 ...
            >
            </Auth0Provider>

I believe, currently this is allowed, should we add checks to restrict this behaviour or at-least document this as an anti pattern.

[yogeshchoudhary147]

Good catch. Added a runtime console.warn for this case. TypeScript users are already covered at compile time via client?: never on Auth0ProviderWithConfigOptions.

[gyaneshgouraw-okta]

This may also lead to inconsistent api behaviour, for example

Someone who creates a rawClient would need to call

export const auth0Client = createAuth0Client({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});


//called on button click
client.getTokenSilently({ ... })

vs

Call silent token token via auth0 hook

var auth0 = useAuth0();

//called on button click
auth0.getAccessTokenSilently({ cacheMode: 'off' })

Should we highlight this potential mismatch.

Additionally for anyone using the raw auth0 client via createAuth0Client(...) will internal state in react sdk created in https://github.com/auth0/auth0-react/blob/main/src/reducer.tsx will be updated ?
In case they are not, will there be potential side effects ?

[yogeshchoudhary147]

Added a note on both points: the method naming difference (getTokenSilently vs getAccessTokenSilently), the state sync behaviour, and a callout to avoid calling client.logout() directly on the raw client.