Set up Flinks Connect for React Native

For the full react-native-webview documentation please refer to: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

1. Complete our Google Form to tell us about your setup.

2. Install Flinks Connect. For more information, see Configure and Install Flinks Connect.

1. Add the webview=true parameter in order to send the post message directly to the react webview.

2. Add the demo=true to allow for Flinks Capital

   1. This enables Flinks Capital, which you can use to test with our test users. For more information on how to test Flinks Connect using our test users, see Test Institution.

3. Add the redirectUrl with your own URL. 

   1. After the user is successfully connected, Flinks appends the loginId to the URL. Set up your application to save this loginId. For more information, see the following example: 

https://www.example.com/flinks/connection/?loginId=******

4. Add the oauthWindowRedirect=true in order to allow oAuth connections to happen with full page redirection. Popups don’t work well on native applications.

Example: https://demo.flinks.com/v2/?webview=true&demo=true&oauthWindowRedirect=true&redirectUrl=https://www.example.com/flinks/connection/

3. Listen to Javascript events by adding the onMessage function to the <WebView> in your react application:

<WebView

source={{ uri: “https://demo.flinks.com/v2/?webview=true&demo=true&oauthWindowRedirect=true&redirectUrl=https://www.example.com/flinks/connection/” }}

javaScriptEnabled={true}

javaScriptCanOpenWindowsAutomatically={true}

onMessage={(event) => {this.onMessage(event.nativeEvent.data)}}

…

/>

———————

onMessage( event ) {

       console.log('Debug event: ', event);

}

4. Set the following parameters on the webview:

1. javaScriptEnabled to TRUE

2. javaScriptCanOpenWindowsAutomatically to TRUE

5. Configure your app to support deepLink based on your redirectUrl
https://reactnative.dev/docs/linking 

6. Confirm there is successful one-way communication between the iframe and your app. For more information about what Flinks Connect emits to your app, see the following example:
Debug event: {step: 'APP_MOUNTED'}
Debug event: {step: 'COMPONENT_LOAD_INSTITUTION_SELECTOR', cached: false}
Debug event: {step: 'INSTITUTION_SELECTED', institution: 'FlinksCapital'}
Debug event: {step: 'COMPONENT_LOAD_CREDENTIAL', institution: 'FlinksCapital'}
Debug event: {step: 'SUBMIT_CREDENTIAL', institution: 'FlinksCapital'}
Debug event: {step: 'COMPONENT_LOAD_MFA', mfaTypes: Array(1), institution: 'FlinksCapital'}
Debug event: {step: 'SUBMIT_MFA', institution: 'FlinksCapital'}
Debug event: {step: 'REDIRECT', loginId: '******', requestId: '******', institution: 'FlinksCapital'}