React-native: avoid making every authenticated remote call async

Question

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,
            };

First things first: remote calls are always async, normal React or not. Anyway, yes, authenticate once and store relevant data in a global context. You can also create a class for all your axios requests and write your own functions, that way you have all the axios requests and auth data in one place and call your custom api functions in the components instead. So basically: `myPostFunction(requestUrl, payload).then(...)` — , Feb 23 '22 at 00:05
Note that your question essentially boils down to "how do I refactor my code in order to avoid duplicate code?" The answer to that is almost always: add a custom function — , Feb 23 '22 at 00:14

Phil · Accepted Answer · 2022-02-23T00:23:09.817

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

React-native: avoid making every authenticated remote call async

1 Answers1