npm package: @os1-platform/aaa-web
Description: AAA web sdk
Author: FoxtrotPlatform
Latest version: 1.0.3

# React AAA SDK for WEB

## Introduction

Built on top of react, oidc-react and typescipt.
This sdk can be used for authentication, maintaining access token, fetching user info and appending headers to the REST API calls.

## Installation and Usage

Peer dependencies:

```js
  {
    "axios": ">=0.24.2",
    "react": ">=17.0.2"
  }
```

1. Install **@os1-platform/aaa-web** into your project.

   #### `npm install @os1-platform/aaa-web`

2. Use `initCAS` API of the sdk to create auth instance and fetch AuthProvider component.

   ```javascript
   import { initCAS } from '@os1-platform/aaa-web';

   const AuthProvider = initCAS(
     'CLIENTID', // clientId,
     '/fms/success', // success pathname (https://abc.fxtrt.io/fms/success)
     'web', // device type
     '/fms/failure', //logoutRedirectPath
     'TenantIdForDevelopmentMode' //static tenantId for development mode (accepted if the sub-domain is developer or developer2)(optional field)
   );
   ```

3. Wrap your application in this single AuthProvider component. For example:

   ```javascript
   ReactDOM.render(
     <React.StrictMode>
       <BrowserRouter basename="/fms">
         <AuthProvider>
           <Router />
         </AuthProvider>
       </BrowserRouter>
     </React.StrictMode>,
     document.getElementById('root')
   );
   ```

   `or`

   ```javascript
   ReactDOM.render(
     <AuthProvider>
       <App />
     </AuthProvider>,
     document.getElementById('root')
   );
   ```

4. Pass `loader` component to the AuthProvider to override the default loader.

   ```javascript
   import Loader from 'your-loader-component';
   <AuthProvider loader={<Loader />}>{children}</AuthProvider>;
   ```

5. Use `loginWithRedirect` method to initiate login.

   ```javascript
   import { loginWithRedirect } from '@os1-platform/aaa-web';

   <button onClick={() => loginWithRedirect()}>Login</button>;
   ```

6. Use `isAuthenticated` method to put a check on private pages:

```javascript
import { isAuthenticated } from '@os1-platform/aaa-web';

const isAuth = isAuthenticated();
```

7. Use `getAccessTokenSilently` method, to fetch access token.

   ```javascript
   import { getAccessTokenSilently } from '@os1-platform/aaa-web';
   const token = await getAccessTokenSilently();
   ```

8. Use `getUserInfo` method, to fetch user info.

   ```javascript
   import { getUserInfo } from '@os1-platform/aaa-web';
   const userInfo = await getUserInfo();
   ```

9. Use `HttpClient` API to create a client for network requests.

   ```javascript
   import { HttpClient as client } from '@os1-platform/aaa-web';

   class NetworkClient {
     public readonly instance: any;

     constructor() {
       this.instance = client.createClient({
        baseURL: `https://abc.preprod.fxtrt.io/core/api/v1/aaa`,
      });
     }
   }
   ```

10. Following headers are automatically configured to requests originating from the `NetworkClient` adding Access token(`x-coreos-access`) or Tenant id(`x-coreos-tid`) or User info(`x-coreos-userinfo`) or Auth token(`x-coreos-auth`) headers to the actual request.

- `withAccess`
- `withTid`
- `withUserInfo`
- `withAuth`

Note:

1.  By default all these headers are true, pass value against these headers as `false` to remove from request.
2.  Access token is verified and regenerated (if expired), every time an api request is made.
3.  `x-coreos-userinfo` contains the userId.
4.  `x-coreos-auth` contains the id_token.

```javascript
import NetworkClient from './networkClient';

const handleClick = () => {
  const client1 = new Client();
  const reqHeaders: any = {
    withAccess: false,
    withTid: false,
    withUserInfo: false,
    withAuth: false,
  };
  client1.instance
    .get('/users', {
      headers: {
        'X-COREOS-REQUEST-ID': '1d8cb10a-02c0-4fb9-b5e3-d4d432717c49',
        ...reqHeaders,
      },
    })
    .catch((err) => {
      console.log(err);
      // error handling code here
    });
};
```

11. Use `logout` method, to implement logout functionality.

```javascript
import { logout } from '@os1-platform/aaa-web';
await logout();
```