RN Saafe AA SDK

This is the official React Native SDK for Saafe with Account Aggregator support, allowing you to easily integrate the Saafe redirection flow into your React Native applications.

Installation

npm install --save rn_saafe_aa_sdk react-native-webview
# or
yarn add rn_saafe_aa_sdk react-native-webview

Note: This SDK requires react-native-webview as a peer dependency.

Usage

The SDK provides a simple WebView component to integrate the Saafe redirection flow.

Basic Usage

You can use the RedirectionWebView component directly with token parameters:

import React from 'react';
import { View } from 'react-native';
import { RedirectionWebView } from 'rn_saafe_aa_sdk';

const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <RedirectionWebView
        fi="YOUR_FI_ID"
        reqdate="REQUEST_DATE"
        ecreq="ENCRYPTED_REQUEST"
        onComplete={(data) => console.log('Authentication completed!', data)}
        onCancel={() => console.log('Authentication canceled')}
        onError={(error) => console.error('Authentication error:', error)}
      />
    </View>
  );
};

export default MyComponent;

Modal Usage

For a better user experience, you can show the RedirectionWebView in a modal:

import React, { useState } from 'react';
import { View, Button, Modal, SafeAreaView } from 'react-native';
import { RedirectionWebView } from 'rn_saafe_aa_sdk';

const MyComponent = () => {
  const [visible, setVisible] = useState(false);
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="Start Authentication"
        onPress={() => setVisible(true)}
      />
      
      <Modal visible={visible} animationType="slide">
        <SafeAreaView style={{ flex: 1 }}>
          <View style={{ padding: 10, flexDirection: 'row', justifyContent: 'flex-end' }}>
            <Button title="Close" onPress={() => setVisible(false)} />
          </View>
          <RedirectionWebView
            fi="YOUR_FI_ID"
            reqdate="REQUEST_DATE"
            ecreq="ENCRYPTED_REQUEST"
            onComplete={(data) => {
              console.log('Authentication completed!', data);
              setVisible(false);
            }}
            onCancel={() => {
              console.log('Authentication canceled');
              setVisible(false);
            }}
            onError={(error) => {
              console.error('Authentication error:', error);
              setVisible(false);
            }}
          />
        </SafeAreaView>
      </Modal>
    </View>
  );
};

export default MyComponent;

Using with pre-constructed URL

If you already have a fully constructed URL, you can pass it directly:

import React from 'react';
import { View } from 'react-native';
import { RedirectionWebView, createSecureRedirectUrl } from 'rn_saafe_aa_sdk';

const MyComponent = () => {
  // Construct URL manually if needed
  const redirectUrl = createSecureRedirectUrl(
    'YOUR_FI_ID',
    'REQUEST_DATE',
    'ENCRYPTED_REQUEST'
  );
  
  return (
    <View style={{ flex: 1 }}>
      <RedirectionWebView
        redirectUrl={redirectUrl}
        onComplete={(data) => console.log('Authentication completed!', data)}
        onCancel={() => console.log('Authentication canceled')}
        onError={(error) => console.error('Authentication error:', error)}
      />
    </View>
  );
};

export default MyComponent;

API Reference

RedirectionWebView Component

| Prop | Type | Description | |------|------|-------------| | redirectUrl | string | The pre-constructed URL to load in the WebView (optional if fi, reqdate, ecreq are provided) | | fi | string | The financial institution ID (optional if redirectUrl is provided) | | reqdate | string | The request date (optional if redirectUrl is provided) | | ecreq | string | The encrypted request (optional if redirectUrl is provided) | | onLoad | () => void | Callback when the WebView has loaded | | onComplete | (data?: any) => void | Callback when authentication is completed | | onCancel | () => void | Callback when authentication is canceled | | onError | (error: string) => void | Callback when an error occurs |

createSecureRedirectUrl Function

createSecureRedirectUrl(fi: string, reqdate: string, ecreq: string): string;

Utility function to construct a secure URL with the required token parameters.

Message Format

The WebView communicates with the native layer using postMessage. The messages should have the following format:

{
  type: 'complete' | 'cancel' | 'error',
  data?: any,          // For 'complete' type
  error?: string       // For 'error' type
}

License

ISC