DEV Community

loading...

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

ajmal_hasan profile image Ajmal Hasan ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 :(');
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona • 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 :)

Collapse
ajmal_hasan profile image
Ajmal Hasan Author

Welcome,
I asked the backend to provide me same url for both ios and Android. And it's is working fine in both platform.

Collapse
jdnichollsc profile image
Forem Open with the Forem app