Ability to provide Auth0Client to Auth0Provider

[Birkbjo]

Describe the problem you'd like to have solved

In some cases the auth-object is needed outside of react-components. Currently it's hard/hacky to bring the auth-client out from the react-context. Some use cases include getting the access token for use in thunks, redux-observables etc. I do not want to copy or replicate the auth-profile or it's token in a redux-store, but I want access to eg. getAccessTokenSilently() from imperative code elsewhere in the application, without passing the auth-object to every observable/thunk/side-effect.

Describe the ideal solution

Ability to provide an instantiated instance of Auth0Client (from auth0-spa-js) to the Auth0Provider, if this is present that client instance is used in the provider when calling the functions provided by the context.

For instance

// somewhere
const client = new Auth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>',
  redirect_uri: '<MY_CALLBACK_URL>'
});
export default client

// In component: 
import client from 'somewhere'

 <Auth0Provider client={client}>
      {children}
  </Auth0Provider>

Alternatives and current work-arounds

I would love to get input on workarounds for this, as I'm still exploring how to fix this without rewriting all the code to use hooks/ async code in components.

[adamjmcgrath]

Hi @Birkbjo - thanks for raising this

We've decided not to implement this feature, and discussed some reasons and workarounds in #134, #97, #67 and #37

If you have a specific use case and can show some code, I'd be happy to discuss possible workarounds

[Birkbjo]

@adamjmcgrath Thanks for the quick reply! Sorry for not doing enough searching around before posting this issue.
I understand the reasoning, and I will probably do something like

const InitializeAuth = ({ children }) => {
    const auth = useAuth0()
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch({ type: 'USER_SET_AUTH', payload: auth })
    }, [auth, dispatch])

    return children
}

or set a module-variable like some of the workarounds presented in some of those links.

[adamjmcgrath]

No worries @Birkbjo - the type of solution I like is to wrap the Auth0Provider around a provider for your dependent library then pass the getAccessTokenSilently method down to that, eg

import { Auth0Provider, Auth0Context } from '@auth0/auth0-react'; // you can also use the useAuth0 hook

ReactDOM.render(
  <Auth0Provider ...>
    <Auth0Context.Consumer>
      {({ getAccessTokenSilently }) => {
        return (
          <SomeOtherProvider getAccessTokenSilently>
            <App />
          </SomeOtherProvider>
        );
      }}
    </Auth0Context.Consumer>
  </Auth0Provider>,
  document.getElementById('root')

Then you don't have to worry about the timing of your dispatch or the static module scoped variable. But your way looks fine too