SAAFE AA SDK

A secure, lightweight, customizable React iframe SDK to redirect users to a hosted journey.

Features

• 🔒 Secure iframe communication with PostMessage API
• 🎨 Style-safe - no CSS leakage or DOM conflicts
• 📱 Supports popup modal mode with clean UI
• 🧩 Full TypeScript support
• 🪶 Lightweight (<50KB minified + gzipped)
• ⚛️ Compatible with React 16.8+ (using hooks)

Installation

npm install saafe_aa_sdk
# or
yarn add saafe_aa_sdk

Usage

Component API

import { RedirectSDK } from 'saafe_aa_sdk';

function MyComponent() {
  const handleComplete = (data) => {
    console.log('Journey completed with data:', data);
  };

  const handleCancel = () => {
    console.log('Journey was cancelled');
  };

  return (
    <div>
      <h1>My Application</h1>
      
      <RedirectSDK 
        url="https://sandbox.redirection.saafe.in/login?fi=...&reqdate=...&ecreq=..."
        mode="popup"
        width="80%"
        height="80%"
        buttonProps={{
          text: "Start Journey",
          className: "my-button",
          style: { backgroundColor: "blue", color: "white" }
        }}
        onLoad={() => console.log('Iframe loaded')}
        onComplete={handleComplete}
        onCancel={handleCancel}
        onError={(err) => console.error('Error:', err)}
      />
    </div>
  );
}

Programmatic API

import { triggerRedirect } from 'saafe_aa_sdk';

function MyComponent() {
  const startJourney = () => {
    triggerRedirect({
      url: "https://sandbox.redirection.saafe.in/login?fi=...&reqdate=...&ecreq=...",
      mode: 'popup',
      width: '80%',
      height: '80%',
      onComplete: (data) => console.log('Journey completed with data:', data),
      onCancel: () => console.log('Journey was cancelled'),
      onError: (err) => console.error('Error:', err)
    });
    
    // You can also close the journey programmatically using the returned instance
    // const instance = triggerRedirect(...);
    // instance.close();
  };

  return (
    <div>
      <h1>My Application</h1>
      <button onClick={startJourney}>Start Journey</button>
    </div>
  );
}

API Reference

RedirectSDK Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | url | string | Yes | - | The full URL for the redirect journey | | mode | 'embedded' | 'popup' | No | 'popup' | Mode of the redirect | | width | string | number | No | '80%' | Width of the iframe | | height | string | number | No | '80%' | Height of the iframe | | buttonProps | ButtonProps | No | {} | Props for the trigger button | | onLoad | () => void | No | - | Callback when the iframe is loaded | | onComplete | (data: any) => void | No | - | Callback when the journey is completed | | onCancel | () => void | No | - | Callback when the journey is cancelled | | onError | (error: Error) => void | No | - | Callback when an error occurs |

ButtonProps

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | text | string | No | 'Start Journey' | Text to display on the button | | className | string | No | - | CSS class for the button | | style | CSSProperties | No | - | Inline styles for the button | | children | ReactNode | No | - | Custom content for the button |

triggerRedirect Options

Same as RedirectSDK props, but without buttonProps. Additionally:

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | container | HTMLElement | No | document.body | Container element to render the iframe in (only for embedded mode) |

Security Features

• Uses sandbox attribute on iframes with minimal required permissions
• Validates origin of incoming messages
• Passes token parameters securely
• Uses CSS modules to prevent style leakage

License

MIT