Using react-relay with auth0-react

Help
, , ,
1

Please include the following information in your post:

  • Which SDK this is regarding: auth0-react, react, react-relay
  • SDK Version: auth0-react 1.10, auth0-spa-js 1.21, react-relay 13.x, react 11.x
  • Platform Version: Node16.x, auth0-react
  • Code Snippets/Error Messages/Supporting Details/Screenshots: We use react-relay to interface with GraphQL APIs; however, using useAuth0, getAccessTokenSilently with RelayEnvironmentProvider produces issues where I can’t login properly. How can I integrate these together? I already have the routes wrapped by Auth0Provider.

Is this a feature request or bug report? No…guidance

I didn’t see anyone talking about using react-relay with auth0, and examples I/we did find didn’t quite apply as they did routing very differently than we are.

relay.tsx

export default TokenRelay = ({children, onTokenReceiver}) => {
    const { isAuthenticated, getAccessTokenSilently }  = useAuth0
    const [ token, setToken ] = useState("")
    useEffect( () => {
        getAccessTokenSilently({}).then(setToken)
    }, [])
   return (
       <RelayEnvironmentProvider environment={onTokenReceiver(token)}>
         {children}
       </RelayEnvironmentProvider>
   )
}

routes.tsx:

const Routes: FC = () => (
    <App>
       <SideNavigation />
       <MainLayout>
          <Router primary ...>
             {/* routes here */}
             <Home path="/" />
             <NotFound default />
          </Router>
       </MainLayout>
    </App>
)
...

index.tsx:

function MainComponent() {
    return (
        <React.StrictMode>
            <BrowserRouter>
            <Auth0Provider ...>
                ...
                <TokenRelay onTokenReceiver={relayDefaultEnv}>
                ...
                <AppRoutes />
                ...
                </TokenRelay>
                ...
            </Auth0Provider>
            </BrowserRouter>
        </React.StrictMode>
    )
}

This allows the page to kind of load; but the below errors are generated and the react application crashes.

...
<the below Login required error repeated 4 times total>
...
errors.tsx:8 Uncaught (in promise) Error: Login required
    at new OAuthError (errors.tsx:8:1)
    at utils.tsx:15:1
    at auth0-provider.tsx:323:1
    at step (vendors~main.chunk.js:214:17)
    at Object.throw (vendors~main.chunk.js:145:14)
    at rejected (vendors~main.chunk.js:107:32)
OAuthError @ errors.tsx:8
(anonymous) @ utils.tsx:15
(anonymous) @ auth0-provider.tsx:323
step @ vendors~main.chunk.js:214
(anonymous) @ vendors~main.chunk.js:145
rejected @ vendors~main.chunk.js:107
Promise.then (async)
Auth0TokenRelay @ token.tsx:31
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17362
beginWork @ react-dom.development.js:19063
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ auth0-provider.tsx:260
step @ vendors~main.chunk.js:214
(anonymous) @ vendors~main.chunk.js:145
fulfilled @ vendors~main.chunk.js:99
Promise.then (async)
step @ vendors~main.chunk.js:114
fulfilled @ vendors~main.chunk.js:99
Promise.then (async)
step @ vendors~main.chunk.js:114
(anonymous) @ vendors~main.chunk.js:117
__awaiter @ vendors~main.chunk.js:96
(anonymous) @ auth0-provider.tsx:251
(anonymous) @ auth0-provider.tsx:264
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
VM12:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

If I remove the TokenRelay portion, then it loads and logs in, but crashes when I try to access a page that uses the GraphQL API via React Relay:

Uncaught Invariant Violation: useRelayEnvironment: Expected to have found a Relay environment provided by a `RelayEnvironmentProvider` component. This usually means that useRelayEnvironment was used in a component that is not a descendant of a `RelayEnvironmentProvider`. Please make sure a `RelayEnvironmentProvider` has been rendered somewhere as a parent or ancestor of your component.
    at invariant (http://mhlocal.co:3307/static/js/vendors~main.chunk.js:35285:15)
    at useRelayEnvironment (http://mhlocal.co:3307/static/js/2.chunk.js:7593:32)
    at useQueryLoader (http://mhlocal.co:3307/static/js/2.chunk.js:6951:21)
    ...

Is it possible to use auth0-react with react-relay? What am I missing?