How to create a proper custom axios instance for Orval?

Get Help
,
1

We are considering using Orval.

We are currently using React and @auth0/auth0-react.

const useAuthBearerToken = () => {
  const { getAccessTokenSilently } = useAuth0();

  const getBearerToken = async () => {
    const token = await getAccessTokenSilently();
    return `Bearer ${token}` as const;
  };

  return { getBearerToken };
};

export const useAxiosWithAuthHeader = () => {
  const { getBearerToken } = useAuthBearerToken();
  const router = useRouter();

  const instanceWithAuthHeader = axios.create({
    baseURL: API_ROOT_DOMAIN,
    timeout: 10000,
  });

  instanceWithAuthHeader.interceptors.request.use(async (config) => {
    try {
      const headers = await getBearerToken();
      config.headers.Authorization = headers;
    } catch (error) {
      if ((error as Auth0Error).error === 'invalid_grant') {
        router.push('/session-expired');
        return config;
      }
      router.push('/401');
    }
    return config;
  });

  return instanceWithAuthHeader;
};

But, the useAuth0 can only be used in React Component.
I want to set a Bearer Token in the authorization header for all requests.

3

Hi @matamatanot,

Welcome to the Auth0 Community!

The Auth0 React SDK isn’t intended for use outside of components, but there is a workaround you can use to get the token outside of your component.

Check out this thread:

Specifically, this code: