Accept client as a prop in `Auth0Provider`

[roccomaniscalco]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

Accessing Auth0Client and it's methods like getAccessTokenSilently outside of React has historically been a point of frustration for myself and other developers.

• Auth0 Community post: Using auth0 outside of React Components
• Stack Overflow post: access token from auth0provider outside of react components

Describe the ideal solution

Expose Auth0Client and allow for it to be passed to an Auth0Provider. This pattern is used by popular framework-agnostic libraries like TanStack Query.

import { Auth0Client, Auth0Provider } from '@auth0/auth0-react'

const client = new Auth0Client({ /* ... */ })

function App () {
  return <Auth0Provider client={client}>{ /* ... */ }</Auth0Provider>
}

Alternatives and current workarounds

One workaround is to useAuth0 and extract methods to an external store. However, this approach is not viable when Auth0Client is needed before React renders.

const { getAccessTokenSilently } = useAuth0()

useLayoutEffect(() => {
  window.getAccessTokenSilently = getAccessTokenSilently
}, [getAccessTokenSilently])

Another is to use auth0-spa-js instead of/in addition to auth0-react. Not using the React library leads to developers reimplementing the library, while using them together can lead to increased bundle size or incompatibility if the versions are mismatched.

Additional context

No response

[roccomaniscalco]

This would be solved by #849

[yogeshchoudhary147]

@roccomaniscalco - We've seen this come up a few times. What's your specific scenario — axios interceptor, Redux middleware, something else? Want to make sure the solution we land on actually covers your case.

[roccomaniscalco]

@yogeshchoudhary147 - We're using Tanstack Start function middleware. We've internally patched auth0-react (similar to #849) to support our use case. I've created a basic reproduction of our setup. Exposing Auth0Client would solve the problem of "how to access Auth0 outside of React" for other setups as well.