How do I get network images with authentication in React Native?

Question

The current supported way to get image is by inserting the {uri:link} object to the source props of Image, however, this does not have authentication enabled. Is there a way to insert an authentication token into the url call or other ways to have authentication for retrieving images? Thanks a lot!

  < Image
    style={styles.logo}
    source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
  />

score 5 · Accepted Answer · answered Dec 07 '15 at 13:14

5

Are you using basic auth as your question tag suggests? If yes, you could bake it into the URL itself:

  <Image
    style={styles.logo}
    source={{uri: 'https://USER:PASSWORD@facebook.github.io/react/img/logo_og.png'}}
  />

answered Dec 07 '15 at 13:14

Adam Terlson

12,610
4
42
63

Thanks. I was thinking about this as well. Will the password be visible by others if it's embedded in this way? Or it will be hidden by https – ZJL Dec 07 '15 at 23:49
[Hidden](http://answers.google.com/answers/threadview/id/758002.html). Specifically everything but the domain is encrypted. – Adam Terlson Dec 08 '15 at 10:42
For some reason this breaks image downloading on android now, but works fine for iOS. Even though it's some added work, I found using node-fetch with auth headers to work flawlessly for both platforms. – DBrown Jul 04 '17 at 05:48

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

I ran into the same problem but wasn't using basic auth so the accepted answer didn't work for me. For those who need an alternate auth header, or any custom header as a matter of fact, you can add a network interceptor in React Native. I tested and it's working on Android but not sure on the specifics for iOS implementation.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 27 '16 at 03:53

Steven

1,670
4
17
26

How do I get network images with authentication in React Native?

2 Answers2