React Native Authentication Using Deeplinking and react-native-inappbrowser-reborn

#reactnative #javascript

1) Install and configure library from here
https://www.npmjs.com/package/react-native-inappbrowser-reborn

2)Suppose the universal deeplink url provided is like this:
https://www.app_name.com/login

3)Android configuration as per given url:
Update Manifest.xml

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">

  <!-- deep linking -->
    <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="app_name" host="wwww.app_name.com" pathPrefix="/login"/>
    </intent-filter>
      </activity>

4)iOS configuration as per given url:
Update Info.plist

    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.app_name</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>app_name</string>
            </array>
        </dict>
    </array>

5)TwitchAuth.js

export const tryDeepLinking = async () => {
    const loginUrl = 'https://amazonaws.com/dev/app/v1/user/login';
    const redirectUrl = 'app_name'
    const urlInApp = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`;
    try {
        if (await InAppBrowser.isAvailable()) {
            const result = await InAppBrowser.openAuth(urlInApp, redirectUrl);
        console.log(result);

            }
        } else {
            alert('Not supported :/');
        }
    } catch (error) {
        console.error(error);
        alert('Something’s wrong with the app :(');
    }
}

6) Whenever the url in browser is like this https://www.app_name.com/login screen will be redirected to app with response.

Top comments (4)

J.D Nicholls • Mar 28 '21 • Edited

Thanks for sharing mate! Remember to use the correct redirectUrl value depending of the platform, we have a validation using "startsWith" method to detect that redirection :)