I need to use inapp browser to authenticate with an external API that returns a code in the redirected URL, which is later used for other purposes. With InAppBrowser from 'react-native-inappbrowser-reborn' it would be straight forward, theoretically:
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.openAuth(
authUrl,
redirectUrl
);
if ('url' in result) {
code = result.url?.match(/code=(.*)/)?.[1] || '';
}
However, it fails with [TypeError: Cannot read property 'isAvailable' of null]
Ref. https://github.com/proyecto26/react-native-inappbrowser/issues/434
Tried eventually with expo-web-browser, but did not manage to get the code:
import * as WebBrowser from 'expo-web-browser';
//...
await WebBrowser.openAuthSessionAsync(authUrl, redirectUrl);
Linking.addEventListener('url', ({ url }) => {
console.log('url', url); // <-- Never reaches this code
code = url?.match(/code=(.*)/)?.[1] || '';
});
Also, seems like it is not actually an inapp browser but chrome what is opened, and the auth does not get even to the password request during auth.
Using
"expo": "~49.0.5",
"expo-web-browser": "^12.3.2",
"react": "18.2.0",
"react-native": "^0.72.4",
"react-native-inappbrowser-reborn": "^3.7.0"
Any suggestions on how to handle API auth with in-app browser and expo is highly appreciated
UPDATE: this seems more of an issue with expo since tried with 'react-native-app-auth' and got exact same issue, [TypeError: Cannot read property 'authorize' of null]