I have a working react-native application, which I would like to extend in a flexible way by adding a tab which displays a WebView. Here a user will be able to see their profile information, so I need to be able to authenticate each user.

I didn't think this would be difficult to implement since a user is already authenticated within the app, but apparently it is not possible to add custom headers to a WebView in react-native. And the same goes for the munity ponent react-native-webview. So I cannot set an authorisation token on a request.

This plicates the process of authentication, so I am looking for an alternative approach to do authentication within a WebView. To my surprise there isn't much information available on the web on how to do this. So what is a good approach to tackle auth in a react native WebView?

I have a working react-native application, which I would like to extend in a flexible way by adding a tab which displays a WebView. Here a user will be able to see their profile information, so I need to be able to authenticate each user.

I didn't think this would be difficult to implement since a user is already authenticated within the app, but apparently it is not possible to add custom headers to a WebView in react-native. And the same goes for the munity ponent react-native-webview. So I cannot set an authorisation token on a request.

This plicates the process of authentication, so I am looking for an alternative approach to do authentication within a WebView. To my surprise there isn't much information available on the web on how to do this. So what is a good approach to tackle auth in a react native WebView?

• javascript
• react-native
• authentication
• webview

Share Improve this question Follow asked Feb 26, 2019 at 12:28 dentemmdentemm 6,38944 gold badges3333 silver badges4444 bronze badges 3

• 1 I wrote about it on my blog: smakosh./webview-native-authentication – Smakosh Commented Dec 10, 2019 at 9:54
• @Smakosh your tutorial has deprecated dependencies. can it be updated to CY 2022? – mobibob Commented Aug 25, 2022 at 22:46
• Will do when I'm free – Smakosh Commented Aug 31, 2022 at 10:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

From within the WebView you have access to the Fetch API in JavaScript which supports custom headers. So you can call fetch.

fetch('https://example./profile/alice', {
  headers: {
    'Authorization': /* your token here... */
  }
}).then(function (response) {
  return response.json();
}).then(function (myJson) {
  console.log(JSON.stringify(myJson));
});