How to use an inapp browser for authentication in React Native 0.72.3 or higher and expo 49.0.5

456 Views Asked by At

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]

Ref. https://github.com/expo/expo/issues/24251

0

There are 0 best solutions below