Package Implementation

❗️

Security

It’s recommended to use a separate service to generate session tokens instead of embedding credentials directly in your app’s environment variables. This keeps your codebase more secure. The example provided in the codebase is just for demonstration purposes on how to fetch a session token using credentials.

OneSDK Package is available on npmjs. Select the implementation method below:

OneSDK Public Sample Codes

You can find the OneSDK public sample codes here:

URL: https://github.com/frankieone/frontend-onesdk-public-sample-codes

This repository contains a collection of sample projects demonstrating how to integrate OneSDK into various front-end frameworks and build tools. Each sample is designed to show best practices and different integration strategies.

Available Samples

The following samples are included in this repository, each representing a different integration approach:

Vanilla React with Webpack

Directory: frontend-onesdk-sample-vanilla-react-webpack
Description: A basic React setup using vanilla JavaScript and Webpack.

React with Webpack

Directory: frontend-onesdk-sample-react-webpack
Description: A React project using Webpack as the module bundler.

Angular with Webpack

Directory: frontend-onesdk-sample-angular-webpack
Description: An Angular application configured with Webpack.

Next.js with Webpack

Directory: frontend-onesdk-sample-nextjs-webpack
Description: A Next.js project using Webpack as the build tool.

Vue with Webpack

Directory: frontend-onesdk-sample-vue-webpack
Description: A Vue.js project bundled with Webpack.

React with Rollup

Directory: frontend-onesdk-sample-react-rollup
Description: A React project using Rollup as the module bundler.

Angular with Rollup

Directory: frontend-onesdk-sample-angular-rollup
Description: An Angular application configured with Rollup.

Next.js with Rollup

Directory: frontend-onesdk-sample-nextjs-rollup
Description: A Next.js project using Rollup as the build tool.

Vue with Rollup

Directory: frontend-onesdk-sample-vue-rollup
Description: A Vue.js project bundled with Rollup.

React with Vite

Directory: frontend-onesdk-sample-react-vite
Description: A React project using Vite for a fast development experience.

Angular with Vite

Directory: frontend-onesdk-sample-angular-vite
Description: An Angular application configured with Vite.

Next.js with Vite

Directory: frontend-onesdk-sample-nextjs-vite
Description: A Next.js project using Vite as the build tool.

Vue with Vite

Directory: frontend-onesdk-sample-vue-vite
Description: A Vue.js project bundled with Vite.

TypeScript Compatibility with OneSDK

OneSDK requires TypeScript 5. If your React app was created with create-react-app, a project which has been deprecated, you're probably using an older TypeScript version that may cause compatibility issues with OneSDK.

To address this, you have two options:

1. Upgrade TypeScript: Consider upgrading your TypeScript version to 5 or later.

2. Use Legacy Peer Dependencies: If upgrading isn't an option, you can run npm install --legacy-peer-deps. However, be aware that this might introduce breaking changes in your codebase.

Environment Configuration

In each folder, you'll find a .env.example file, which serves as a template for creating your own .env file. Here's an explanation of each variable:

• REACT_APP_API_KEY: Your API key.

• REACT_APP_CUSTOMER_ID and REACT_APP_CUSTOMER_CHILD_ID: Your customer ID and customer child ID, respectively.

• REACT_APP_BFF_BASE_URL: The base URL pointing to the Backend for Frontend (BFF) service.

  • For UAT environments, set this to https://backend.kycaml.uat.frankiefinancial.io.
  • For production, set it to https://backend.kycaml.frankiefinancial.io.

Note: The prefixes for environment variables differ based on the framework you're using. For example:

• React: REACT_APP_
• Next.js: NEXT_PUBLIC_
• Vite: VITE_