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:

  {
    "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.

   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:

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

   or

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

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

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

5. Use loginWithRedirect method to initiate login.

   import { loginWithRedirect } from '@os1-platform/aaa-web';
   
   <button onClick={() => loginWithRedirect()}>Login</button>;

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

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

const isAuth = isAuthenticated();

7. Use getAccessTokenSilently method, to fetch access token.

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

8. Use getUserInfo method, to fetch user info.

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

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

   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.

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.

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