Home > Software design >  React native image with Auth Token header, how to handle 401?
React native image with Auth Token header, how to handle 401?

Time:12-22

I have a React Native app which connects to an OAuth2 backend. I am using Axios to connect to the API, and I have a request and response interceptor which can handle when an access token runs out, it will fetch a fresh access token using the refresh token, whilst queuing any other asynchronous requests until we have our new toke.

All of that works great, but now I have protected image resources to serve, and I'm unsure how to deal with it.

Using the React Native Image component, we can pass in headers easily enough:

<Image source={{
    headers: {Authorization: 'Bearer '   authToken }, 
    uri: uri
}}></Image>

So yes, I can display my protected images without issue, but I need to find a way to achieve the same token refreshing functionality with the images as I do with the Axios client.

Is it possible using the React Native Image component, like a 401 callback function, or is there a library that possibly I can use for this?

Thanks in advance for any help or suggestions.

  • Related