I'm trying to use a request inteceptor with react-keycloak/web - however i get an array of errors when doing so.
import axios from 'axios';
import { useKeycloak } from '@react-keycloak/web';
const { keycloak } = useKeycloak();
const instance = axios.create({
baseURL: 'https://example.com/api/v1/',
timeout: 30000,
});
instance.interceptors.request.use(
(config) => {
config.headers.Authorization = `${keycloak.token}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
but i get:
React Hook "useKeycloak" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Now i have of course tried to create a function with for example GetToken():
function GetToken() {
const { keycloak } = useKeycloak();
return keycloak.token
}
but doing so leaves me with:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
What am i doing wrong here?
You can't use react hooks out of react tree.
You can export axoios instance and import it elsewhere inside react (eg: App.js) and set interceptors there.
for example:
import axiosIns from 'api';
import { useKeycloak } from '@react-keycloak/web';
import { useEffect } from "react";
import WholeApp from "WholeApp";
const App = () => {
const { keycloak } = useKeycloak();
useEffect(() => {
axiosIns.interceptors.request.use(
(config) => {
config.headers.Authorization = `${keycloak.token}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
}, []);
return <WholeApp />;
}