Hi there fellow developers!
My name is Hugo, I am from sunny Portugal and I am currently developing a React SPA which I am trying to integrate with okta.
I have successfully implemented okta’s mechanisms to trigger unauthenticated access actions but I am having trouble adding the “Authorization: Bearer {token}” header so I can make authenticated calls to the back-end.
I have implemented an HTTP request handler to intercept all requests that axios will do but I am not understanding how I can access the auth object that I used before on my components with the withAuth wrapper. When I try to wrap my handler the same way axios functionality gets broken.
This is where I am right now:
server.js
(…)
import { withAuth } from “@okta/okta-react”;
(…)
const server = axios.create({
baseURL: “/api”
});
const requestHandler = withAuth(({ request, auth }) => {
const accessToken = auth.getAccessToken();
request.headers.common[“Authorization”] = "Bearer " + accessToken;
return request;
});
server.interceptors.request.use(request => requestHandler(request));
package.json
(…)
“react”: “^16.8.4”,
“@okta/okta-react”: “^1.2.2”,
“axios”: “^0.18.0”,
(…)