How to share a service class across components in next-js

Question

I'm trying to implement [https://auth0.com/docs/libraries/auth0js][auth0-js] in React using next-js.

The reason why I am NOT using auth0-react is because it does not support embedded login.

I'm assuming since auth0-js is pure JS, I would need to create some form of service in order to support it that could then be injected into components. I came across the following example (the only exception is it's using Gatsby instead of next-js.

https://github.com/epilande/gatsby-theme-auth0/tree/master/gatsby-theme-auth0/src

I've copied over the service and updated it to match my credentials, but calling AuthService.login() doesn't work.

export const TestLogin = () => {
  return (
    <button
      onClick={() => {
        AuthService.login();
      }}
    />
  );
};

This makes sense because auth0 hasn't be instantiated yet, but I am unsure how to do that and then share them across all components in a way that makes sense. I can't see where it is being done in the sample repo I provided....I'm assuming gatsby-config is somehow doing it, but don't know how that translates to next-js.

Would this be done in some form of provider/injection?