DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Edited on

3 2

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

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.


Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

Top comments (4)

Collapse
 
jdnichollsc profile image
J.D Nicholls • 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
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jdnichollsc profile image
J.D Nicholls

Awesome!

Collapse
 
sonuwise profile image
sonuwise • Edited

I facing issue while redirection on Android. After authentication is done the app restarts and lands up on the home page. Please assist me asap

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay