React SPA: Pass Authorization Header to fetch api call - reactjs

Question

I have a React single page application running on a nginx-webserver. The Nginx is configured that accessing my application the first time after the browser was started the user gets the browser basic auth login window (auth_basic setting in the location-part of the nginx config file). The user enters name and password and another request to the server gets send including the authorization header. So far so good.
Now in my react application i want to call different REST-Apis via fetch api:
fetch("URL", {
method: "POST",
credentials: 'include',
headers: new Headers({
// 'Authorization': "THIS SHOULD BE SET SOMEHOW",
}),
body: "SOME_DATA"
}).then((response: any) => {
...
})
How can I access the existing authorization header from the initial page call after the user has logged in to use it in my REST-Api call?

Answer 1

When the user logs in(The user enters name and password and another request to the server gets send including the authorization header) the first time you should store the Authorization token in either LocalStorage, SessionStorage and get the token from there and set it to Heders.
Clean approach: You can create a Helper Class/Function(interceptor). that will take care of adding a header and common things.
// Something like this Not 100% perfect
class HttpService {
_getHeaders(){
// Logic to get header from Storage
return {'Authorization': "THIS SHOULD BE SET SOMEHOW"};
}
_apiHandler(url, options){
return fetch(url, {
headers: new Headers({
...this._getHeaders(),
}),
...options,
});
}
post(){
return this._apiHandler("URL", {
method: "POST",
credentials: 'include',
body: "SOME_DATA"
});
}
}
OR
Recommended:
Ask the backend team to send tokens in the cookies, You don't have to do anything browser will take care of that. Only same domain request
NOTE: you could share a cookie between foo.example.com and bar.example.com but never between example.com and example2.com and that's for security reasons.