Implement Authentication Flow with Deep Linking
developTo redirect users back to your app from a web browser during an OAuth flow, you must configure deep linking.
1. Configure Native Platforms
Android (AndroidManifest.xml):
Add an <intent-filter> to your activity with your custom scheme and host.
<activity
...
android:launchMode="singleTask">
<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="my-scheme" android:host="my-host" android:pathPrefix="" />
</intent-filter>
</activity>iOS (Info.plist):
Add your scheme to CFBundleURLTypes.
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>my-scheme</string>
<key>CFBundleURLSchemes</key>
<array>
<string>my-scheme</string>
</array>
</dict>
</array>2. Use openAuth in JavaScript
When initiating login, use InAppBrowser.openAuth. The redirectUrl parameter should match the deep link scheme you configured.
const deepLink = getDeepLink('callback')
const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
try {
if (await InAppBrowser.isAvailable()) {
const response = await InAppBrowser.openAuth(url, deepLink, {
ephemeralWebSession: false,
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: false
})
if (response.type === 'success' && response.url) {
// Handle the successful redirect URL
Linking.openURL(response.url)
}
} else {
Linking.openURL(url)
}
} catch (error) {
Linking.openURL(url)
}