SAAFE Redirection Flow

A modern React application that provides a secure account linking experience for the SAAFE (Secure Account Access Financial Environment) platform. This application is designed to be embedded in mobile and web applications via an SDK.

Overview

The SAAFE Redirection Flow application facilitates secure account linking between financial institutions and third-party applications. It provides a streamlined user experience for authentication, account discovery, and consent management.

Features

• Multi-platform Support: Optimized for iOS, Android, React Native, Flutter, and web platforms
• Theming: Supports light, dark, and system-defined themes
• Internationalization: Multi-language support via i18next
• Responsive Design: Adapts to different screen sizes and devices
• Authentication: Secure login and session management
• Account Discovery: Find and link financial accounts
• Consent Management: Review and approve data sharing permissions
• Analytics: Track user journey with PostHog

Tech Stack

• Framework: React 19 with TypeScript
• Routing: React Router v7
• Styling: Tailwind CSS with theme support
• State Management: Zustand
• API Integration: Axios with React Query
• Form Handling: React Hook Form with Zod validation
• UI Components: Radix UI primitives
• Testing: Vitest and Playwright
• Documentation: Storybook

SDK Integration

This application can be integrated into mobile applications via an SDK that renders the app in a WebView (iOS, Android) or iframe (Web).

URL Parameters

When embedding this application in your SDK, you can customize its behavior using the following URL parameters:

| Parameter | Description | Valid Values | Required | |-----------|-------------|-------------|----------| | fi | Financial Institution ID | String | Yes | | ecreq | Encrypted Request | String | Yes | | reqdate | Request Date | String | Yes | | profile | User Profile | String | No | | platform | Client Platform | ios, android, react-native, flutter, web | No | | theme | Application Theme | light, dark, system | No |

Example URL

https://saafe-app.com/login?fi=value&ecreq=value&reqdate=value&platform=ios&theme=dark

Platform-Specific Behaviors

When the platform parameter is specified, the application will adjust certain behaviors:

• iOS/Android: Optimized for mobile WebViews with adjusted UI elements
• React Native/Flutter: Suitable configurations for cross-platform SDKs
• Web: Default desktop experience with navigation safeguards

Document Handling

The application handles document displays differently based on the platform:

• Web: Terms and conditions, privacy policy and other documents open in new tabs
• Mobile/SDK platforms: Documents are displayed in a modern, centered modal dialog with local React components

Our approach uses local React components instead of iframes to avoid cross-origin restrictions. Benefits include:

• No X-Frame-Options or Content-Security-Policy issues with external websites
• Consistent styling with the rest of your application
• Better accessibility and performance
• Prevents navigation away from your app in WebViews
• Full control over content and presentation

This solution is particularly effective for mobile SDKs where navigation between pages should be minimized for a better user experience.

Theme Handling

When the theme parameter is specified, the application will use the provided theme:

• light: Forces light theme regardless of system preference
• dark: Forces dark theme regardless of system preference
• system: Uses the device's theme preference (default if not specified)

Documentation

For more detailed documentation, please refer to the docs directory. The documentation includes:

• Overview and Getting Started - Introduction and quick start guide
• Architecture Overview - Technical architecture and design decisions
• Component Library - UI components documentation
• Routes and Pages - Available routes and navigation flow
• SDK Integration Guide - Detailed integration instructions for iOS, Android, and Web platforms
• User Journey - Detailed explanation of the end-to-end user flow

Getting Started with Development

1. Clone the repository

   git clone https://gitlab.com/Networth360/saafe-redirection.git
   cd saafe-redirection-flow

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Build for production

   npm run build

5. Preview the production build

   npm run preview

6. Run Storybook to explore UI components

   npm run storybook