I have a react native project that relies on getting credentials from SecureStorage when making authenticated calls to my backend. Unlike with normal react, this is an async process, which means I have to handle the promise every time I need the headers. Since I need to block on getting the credentials every time, but shoudln't/can't force async to sync, this means a lot of unnecessary code (either chaining 'thens' or making remote calls async/await as well). Is there a more elegant way to handle this case?
The two options I can think of are 1.) handle promises every time or 2.) passing in auth headers with global context.
Here is an example of what I have
useFeedFetch = (payload: GetItemsRequest) => {
// misc state set here
useEffect(() => {
const getFeedAsync = async () => {
// gets credentials from secure storage
let headers = await AuthService.getAuthHeader()
axios({
method: 'POST',
url: requestUrl,
headers: headers,
data: payload,
}).then((res) => {
...
}
}
getFeedAsync()
}
, [payload.page]);
return {
loading, error, items, hasMore,
};
You could certainly make this more invisible by using an Axios interceptor
// eg api.js
import axios from "axios"
import AuthService from "wherever"
// create a new instance to include your interceptor
export const api = axios.create({
// baseURL can be handy to shorten your URLs
})
api.interceptors.request.use(async config => ({
...config,
headers: {
...config.headers,
...await AuthService.getAuthHeader()
}
}))
Now you can use api in place of axios and it will automatically apply your auth headers on every request