Best way to intercept 401 and then call auth0'sauthorize hook

[alisasila]

I want to add a sort of interceptor to all queries in my app, which can trigger auto0 authentication if any query returns 401.

Couldn't really find any example like my use case - I saw people adding the "is status 401?" check inside axios interceptors, or in the onError callback (but "outside" of the React render tree), but this doesn't allow me to use the authorize function I get from the auth0 library.

I also cannot window.location.reload since I'm doing this in React Native.

The QueryProvider will sit under the auth0 provider, so I expect it'll get re-rendered a few times - can this cause problems? Will a new queryClient be created on every render?

Is there a more recommended way to do this?

I thought about passing authorize to each query individually, but since I'm using V5, I won't have an onError on my useQuery calls, which I also want to intercept for authentication errors.

import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AxiosError } from 'axios'
import React from 'react'

declare module '@tanstack/react-query' {
  interface Register {
    defaultError: AxiosError
  }
}

interface QueryProviderProps {
  children: React.ReactNode
}

export function QueryProvider({ children }: QueryProviderProps) {
  const { authorize } = useAuth0();

  const queryClient = new QueryClient({
    queryCache: new QueryCache({
      onError: (error) => {
        // Check for 401 and redirect here
        if (error.response?.status === 401) {
          authorize()
        }
      },
    }),
  })

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
}

[TkDodo]

you'd want to create the client and the cache only once, but you can do this:

  const { authorize } = useAuth0();

  const queryClient = useState(() => new QueryClient()

  useEffect(() => {
    queryClient.getQueryCache().config.onError = (error) => {
      // Check for 401 and redirect here
      if (error.response?.status === 401) {
        authorize()
      }
    }
  }, [authorize])

of course, if authorize is referentially stable, you can just put everything into useState. But if its not you might get stale closure issues.

[alisasila]

Got it, changed to useRef though as I don't want to mutate state from useState:

const { authorize } = useAuth0();

const queryClient = useRef(new QueryClient({
   queryCache: new QueryCache({}),
}))

useEffect(() => {
  queryClient.current.getQueryCache().config.onError = (error) => {
    // Check for 401 and redirect here
    if (error.response?.status === 401) {
      authorize()
    }
  }
}, [authorize])

I figure now I also need to verify it never gets unmounted and then mounted back, otherwise it'll create the client more then once too.

Thanks!

[eric-tiew93]

@alisasila just wondering how are you handling the UI states right now? Since the 401 will be surfaced in the error object, the UI will transition from loading to error before Auth0 container is presented? Also, if user drop off from Auth0 after hitting 401, how are you presenting that to users? Thanks in advance!