@@ -210,6 +210,35 @@ import InAppBrowser from 'react-native-inappbrowser-reborn'
210210
211211### Authentication Flow using Deep Linking
212212
213+ Define your app scheme and replace ` my-scheme ` and ` my-host ` with your info.
214+
215+ - Enable deep linking (Android) - ** [ AndroidManifest.xml] ( https://github.com/proyecto26/react-native-inappbrowser/blob/master/example/android/app/src/main/AndroidManifest.xml#L23 ) **
216+ ```
217+ <intent-filter>
218+ <action android:name="android.intent.action.VIEW" />
219+ <category android:name="android.intent.category.DEFAULT" />
220+ <category android:name="android.intent.category.BROWSABLE" />
221+ <data android:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
222+ </intent-filter>
223+ ```
224+
225+ - Enable deep linking (iOS) - ** [ Info.plist] ( https://github.com/proyecto26/react-native-inappbrowser/blob/master/example/ios/example/Info.plist#L23 ) **
226+ ```
227+ <key>CFBundleURLTypes</key>
228+ <array>
229+ <dict>
230+ <key>CFBundleTypeRole</key>
231+ <string>Editor</string>
232+ <key>CFBundleURLName</key>
233+ <string>my-scheme</string>
234+ <key>CFBundleURLSchemes</key>
235+ <array>
236+ <string>my-scheme</string>
237+ </array>
238+ </dict>
239+ </array>
240+ ```
241+
213242- utilities.js
214243``` javascript
215244import { Platform } from ' react-native'
@@ -227,11 +256,12 @@ import { createStackNavigator } from 'react-navigation'
227256
228257const Main = createStackNavigator (
229258 {
259+ SplashComponent: { screen : SplashComponent },
230260 LoginComponent: { screen : LoginComponent },
231261 HomeComponent: { screen : HomeComponent },
232- SplashComponent : { // Redirect users to the Home page if they are authenticated, otherwise to Login page...
233- screen : SplashComponent ,
234- path: ' callback/' // Deep linking to get the auth_token
262+ CallbackComponent : { // Redirect users to the Home page if they are authenticated, otherwise to Login page...
263+ screen : CallbackComponent ,
264+ path: ' callback/' // Enable Deep linking redirection to get the auth_token
235265 }
236266 },
237267 {
@@ -286,18 +316,39 @@ import { getDeepLink } from './utilities'
286316- SplashComponent
287317``` javascript
288318...
289- componentWillMount () {
319+ async componentDidMount () {
320+ // Play Lottie Animation :)
321+
322+ // Validate the stored access token (Maybe with a request)
323+ // Redirect the user to the Home page if the token is still valid
324+ // Otherwise redirect to the Login page
325+ }
326+ ...
327+ ```
328+
329+ - CallbackComponent
330+ ``` javascript
331+ ...
332+ async componentDidMount () {
333+ // Play Lottie Animation :)
334+ try {
335+ await this .loadUserInfo ()
336+ // Redirect to the Home page
337+ } catch (error) {
338+ // Show error and redirect the user to the Login page
339+ }
340+ }
341+
342+ async loadUserInfo () {
290343 const { navigation } = this .props
291344 const { state: { params } } = navigation
292- const { access_token } = params || {}
345+ const { code , error } = params || {}
293346
294- if (access_token) {
295- // Opened by deep linking, the user is authenticated
296- // Redirect to the Home page
347+ if (code) {
348+ // Get and Save the access token request, user info...
297349 }
298350 else {
299- // Detect if the stored token is still valid
300- // And redirect the user to Home or Login page
351+ return Promise .reject (new Error (error))
301352 }
302353 }
303354...
0 commit comments