rba-widget
Version:
An embeddable Risk Based Authentication - Login & Transaction
232 lines (181 loc) • 6.97 kB
Markdown
<!--
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
``` -->
<center>
<h1> RBA WIDGET WEB SDK </h1>
[](https://www.npmjs.com/package/rba-widget)
[](https://www.npmjs.com/package/rba-widget)
[](https://www.npmjs.com/package/rba-widget)
[](https://www.jsdelivr.com/package/npm/rba-widget)
[](https://www.jsdelivr.com/package/npm/rba-widget)
<p> Risk Based Authentication - Login & Transaction </p>
</center>
## Overview
The RBA-widget is designed to provide a secure and efficient way to handle user authentication and transaction verification using risk-based analysis. It supports login and transaction processes with detailed logging and error handling.
## Features
- **Risk-Based Authentication**: Dynamically adjusts security measures based on the assessed risk level.
- **Login and Transaction Support**: Handles both user login and transaction verification.
- **Detailed Logging**: Provides comprehensive logs for actions and errors.
- **Configurable**: Easily integrate and configure with your existing systems.
## Installation :-
#### i). Install at HTML pages
- **Step 1:** Be ready with HTML form and import the package
```html
<script type="module">
// import rba package
import RBAWidget from 'https://cdn.jsdelivr.net/npm/rba-widget@1.2.6/+esm'
</script>
```
or use default type (umd file)
```html
<script src="https://cdn.jsdelivr.net/npm/rba-widget@1.2.6/dist/index.umd.min.js"></script>
```
- **Step 2:** Call `RBAWidget` function to get the risk based authentication service
```js
// form submission with RBAWidget for validating user
RBAWidget({
baseUrl: string,
ipInfoToken: string,
type: string,
userDetails: {
userId: string,
secret: string,
accountId: string | null,
},
pageLoadTime: number,
onMessage: (arg) => { }
});
```
**Note:** If `RBAWidget` function is called in form, make sure you prevent default value.
Example :-
```js
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("myForm").addEventListener("submit", function (event) {
// Prevent the default form submission behavior
event.preventDefault();
...
// call widget
RBAWidget({
...
});
}
}
```
- **Step 1:** Be ready with terminal and install the package
```bash
npm install rba-widget
or
yarn add rba-widget
```
- **Step 2:** import RBAWidget and its types from the rba-widget package
```tsx
import RBAWidget, { RBAWidgetProps, UserDetails, LogMessage } from 'rba-widget';
```
- **Step 3:** Call `RBAWidget` function to get the risk based authentication service
```js
// form submission with RBAWidget for validating user
RBAWidget({
baseUrl: string,
ipInfoToken: string,
type: string, // login | transaction
userDetails: {
userId: string,
secret: string,
accountId: string | null,
},
pageLoadTime: number,
onMessage: (arg) => {
if(arg.code === 1) {
// alert success
} else if (arg.code === 0) {
// alert failed
} else {
// observe the log messages
}
}
});
```
| Key | Required | value | Description |
| ----------- | :-----------: | :-----------: | :----------- |
| **baseUrl** | `true` | string | *It is used call the back office server base URL.* |
| **ipInfoToken** | `true` | string | *It is used to location details api at ipInfo.* |
| **type** | `true` | string | *It is used send what type of method going to be used. only login or transaction is allowed* |
| **userDetails** | `true` | object | *It is used to get the user details, given in the form and from axiom protect dashboard.* |
| **onMessage** | `true` | function | *It is used get the response with more details.* |
| **pageLoadTime** | `false` | number | *It is used pass the page loaded time by `Date.now()`. If not provided widget will take its initialized time.* |
```ts
type RBAWidgetProps = {
baseUrl: string;
ipInfoToken: string;
type: "login" | "transaction";
userDetails: UserDetails;
onMessage: (arg: LogMessage) => void;
pageLoadTime?: number;
}
type UserDetails = {
userId: string;
secret: string;
accountId?: string | null;
transactionId?: string | null;
transaction_amount?: string | number | null;
transaction_type?: string | null;
recipient_details?: string | null;
transaction_category?: string | null;
}
type LogMessage = {
action: string;
message: string;
code: number;
data?: unknown;
}
```
Use the **`onMessage`** callback to receive detailed logs about the operations. The logs include an action, message, code, and optional data.
The widget provides response codes to indicate the status of operations(check for **`code`**):
- -1: Configuration error message
- 0: Failed message
- 1: Success message
- 2: Information message
---
## Authors
- [@Shankaresh](https://github.com/shankareshBB)