Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React-native: avoid making every authenticated remote call async

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


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

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading