I am wondering if there are any known issues if an application uses both the useAuth0 hook and initialize an Auth0 class instance. My reason for wanting to do so is I need the credentials (primarily the access token) available to be gathered OUTSIDE of react components.
So my app would be wrapped in the Auth0 provider (which instantiates its own Auth0 instance) and provides context that is availble via the useAuth0 hook to whatever components I need. But also, have in some other file that manages making HTTP requests (that need to consume access tokens) an instantiation of the Auth0 class and do something like:
const auth0 = new Auth0({ /*clientId, domain*/ });
function async getAccessToken() {
const {accessToken} = await auth0.credentialsManager.getCredentials();
return accessToken;
}
function someRequest() {
fetch(/* some url */, { headers: { 'Authorization': getAccessToken() }})
}
Instead of having all of my different components responsible for passing over credentials to these methods (that would be a nightmare). Is there an easier way to do all of this? Am I just missing something here?
I feel like the hook is useful for components but obviously is limited to just that, the components inside of the provider.
I could potentially store the credentials inside of my app at a global level (like redux) - but I have read that this is not good, and I also believe that I shouldn’t have to do that, it feels a bit redundant and cumbersome and not to mention potential security issues.
Any information or insight on the topic would be greatly appreciated!