Using auth0 outside of React Components

Hey there, I followed along with the React SDK quickstart and I have a couple of questions.

The quickstart guide in part2 makes http requests directly in components, which is nice and easy because auth0 available via context. However I like to wrap API interactions into a service class that is react agnostic to promote separation of concerns for presentation vs infrastructure.

To achieve this whilst maintaining a single auth0 instance I am pulling auth0 out of react context and constructor injecting into my api client.

Further I require a couple of different contexts and at present am constrained by a bunch of class components, so I have ended up writting a couple of HOC’s to pull auth0 and other required context items to pass as props to components that require them.

Whilst i’m a big fan of dependency injection, something feels wrong about my approach.

Questions

  1. Is there a better way to get auth0 out of context and into plain old es6 classes.
  2. Would it be appropriate to have 2 auth0 clients, one for the router guards and another for api wrapper classes
  3. Why is creating the client async, surely it could be constructed sync but all interactions e.g. getTokenSilently async?
1 Like

This is a great question! I have an application that uses a Reactive Service powered by RxJS and TypeScript to carry out authentication. Would you like to look at that code?

1 Like

Would very much appreciate a look, i’m not sure if that’s similar though, I’m quite happy leaving the sample code carrying out auth, I just want to grab an access_token out to use outside of the react context.

You got it. By chance, do you have a sample or MVP of how you are currently implementing this?