react-native-inappbrowser: header bearer authorization not working on Android 10

Since the new update of API 29 Android 10 in December 2019, react-native-webview is not working on Android 10.

Bug description:

error: unathorized

To Reproduce:

async openLink() { try { const url = ${RestConstant.getGrafanaItoc}+ this.state.username; const bearer = {['Authorization']: 'Bearer ' + this.state.api_token_msd}; if (await InAppBrowser.isAvailable()) { const result = await InAppBrowser.open(url, { // Android Properties showTitle: true, toolbarColor: 'black', secondaryToolbarColor: '#ca2227', enableUrlBarHiding: false, enableDefaultShare: false, forceCloseOnRedirection: false, animations: { startEnter: 'slide_in_right', startExit: 'slide_out_left', endEnter: 'slide_in_left', endExit: 'slide_out_right', }, headers: bearer, }); } } catch (error) { Alert.alert(error.message); } }

Expected behavior:

Show the webview from url

Error:

WhatsApp Image 2020-06-03 at 09 02 30

Which platform(s) does your issue occur on?

Android 10 and greater

Please, provide the following version numbers that your issue occurs with:

CLI: (run react-native --version to fetch it)
Plugin(s):
“react-native”: “0.61.2”, “react-native-inappbrowser-reborn”: “^3.3.4”,

About this issue

Original URL
State: open
Created 4 years ago
Comments: 20 (7 by maintainers)

Most upvoted comments

Still I don’t see how to use this library with validation assets,

Since it need these code in onCustomTabsServiceConnected

mSession = client.newSession(callback);
client.warmup(0);
 // Validate the session as the same origin to allow cross origin headers.
mSession.validateRelationship(CustomTabsService.RELATION_USE_AS_ORIGIN, 
            Uri.parse(url), null);

And I don’t see how you can do it manually, since this code need to placed in method that exist in library.

aliakbarazizi on Aug 11, 2022

@jdnichollsc and I don’t think this issue should be closed. it’s a problem and it’s a open issue with a valid repro code.

aliakbarazizi on Aug 9, 2022

You need to make digital asset here is the link you can find information

https://developer.chrome.com/docs/android/custom-tabs/headers/

Chrome version	CORS headers allowed
before Chrome 83	whitelisted, non-whitelisted
Chrome 83 to Chrome 85	whitelisted
from Chrome 86 onwards	whitelisted, non-whitelisted when a digital asset link is set up

</body> </html>

but still there is no way to use digital asset with this library, you have to do it manually or wait for update

aliakbarazizi on Jan 22, 2022

I’ve made some changes and was able to get it to work. I don’t know much Java so I’m sure there is a better way to do this. Check out: https://github.com/rahimrahman/react-native-inappbrowser/commit/92280068e9300261e7244e7809345ed72be300f8

I do have to add onStart call to my MainActivity:

import com.proyecto26.inappbrowser.RNInAppBrowserModule;

...
    @Override
    protected void onStart() {
        super.onStart();
        RNInAppBrowserModule.onStart(this, "https://www.twitter.com");
    }

The url ^^ needs to have assetlinks.json with your android app as target (example Twitter) and this “delegate_permission/common.use_as_origin”. See example: https://www.twitter.com/.well-known/assetlinks.json

rahimrahman on Feb 24, 2023

@aliazizi did you follow this guide? https://developer.android.com/training/app-links/verify-site-associations#web-assoc

BTW, what are you expecting from this lib?

Please let me know!

I’m not the issue owner, so obviously I don’t expect anything, I just tried to help this lib by sharing some info.

It’s not possible cause it needs some java code and it’s not possible to put it in the library without modifying the source code.

https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

So someone had the issue, I found it exciting and shared some info about the problem. that’s all I’m doing. what do you expect from me? to solve the issue? maybe in the future but I don’t have time for that right now.

aliakbarazizi on Aug 9, 2022

@aliazizi but as you mentioned, it’s required to create a digital asset link manually following these steps, what do you mean about adding that from this lib? 🤔

It’s not just about adding them, still it need addition code for validation in java and I didn’t find any solution to how to achieve that manually,

https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

aliakbarazizi on Jul 30, 2022

@jdnichollsc as I say there is no way to use digital asset with this library. so the issue is still exist.

aliakbarazizi on Jul 30, 2022