Authentication And Authorization (AAA) SDK for Web

The AAA SDK for Web is built on top of react, oidc-react, and typescript. This SDK can be used for authentication, maintaining access tokens, fetching user info, and appending headers to the REST API calls.

To learn more about AAA, see AAA Documentation.

Installation

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

npm install @os1-platform/aaa-web

Peer Dependencies

The AAA SDK has the following peer dependencies:

{
    "axios": ">=0.24.2",
    "react": "^17.0.2"
  }

Usage

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

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

const AuthProvider = initCAS(
  'CLIENTID', // This is the clientId that you get after creating an app.
  '/fms/success', // success pathname (https://abc.fxtrt.io/fms/success)
  'web', // device type
  '/fms/failure', //logoutRedirectPath
  'TenantIdForDevelopmentMode' //static tenantId for development mode to test any functionality locally (accepted if the sub-domain is developer or developer2)(optional field)
);

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')
);

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

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

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

Use the loginWithRedirect method to initiate login.

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

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

Use the isAuthenticated method to put a check on private pages:
This checks if the user has valid permissions to access private pages that require access via token unlike public pages like the 'Contact Us' page.

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

const isAuth = isAuthenticated();

Use the getAccessTokenSilently method, to fetch the access token.

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

Use the getUserInfo method, to fetch user info.

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

Use the 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`,
   });
  }
}

Following headers are automatically configured to requests originating from the NetworkClient adding Access token(x-coreos-access) or the 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:

By default all these headers are true, i.e., will be passed to the REST API. The user needs to specifically pass value against these headers as false if they don't wish to pass certain headers.
Access token is verified and regenerated (if expired), every time an API request is made.
x-coreos-userinfo contains the userId.
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
    });
};

Use the logout method, to implement logout functionality.

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

Authentication And Authorization (AAA) SDK for Mobile

The AAA (Authentication And Authorization) SDK for mobile is used for authentication purposes to integrate with the front-end applications. This SDK is built on top of react-native, react-native-app-auth, and typescript. You can use this SDK on mobile for authentication, fetching access tokens, and logout features.

To learn more about AAA, see AAA Documentation.

Installation

Install @os1-platform/aaa-mobile into your project.

yarn add @os1-platform/aaa-mobile

Install Peer Dependencies

yarn add [email protected]
yarn add @react-native-async-storage/[email protected]^1.15.14
yarn add [email protected]^0.26.1

Add Manifest Placeholder in build.gradle (app level)

manifestPlaceholders = [appAuthRedirectScheme: "${applicationId}"]

Usage

Init AAA SDK
initAuth0 initiates the authentication process and creates an instance of auth.

// Obtain domain and clientId from  Auth0/ Keycloak dashboard
import { LoginHelper } from '@os1-platform/aaa-mobile';
await LoginHelper.initAuth0(
  'domain',
  'clientId'
);

example: 
await LoginHelper.initAuth0(
  'example.dev.io',
  'some-rn-app'
)

Initiate Login
initLogin() uses the auth instance and opens the web page on mobile containing the OS1 login page.

import { LoginHelper } from '@os1-platform/aaa-mobile';

// Pass keys name for storing access Token and id Token
await LoginHelper.initLogin('Token', 'idToken').then((res: any) => {
  console.log('Result ', res);
});

// Result Type
export interface AuthorizeResult {
  accessToken: string;
  accessTokenExpirationDate: string;
  authorizeAdditionalParameters?: { [name: string]: string };
  tokenAdditionalParameters?: { [name: string]: string };
  idToken: string;
  refreshToken: string;
  tokenType: string;
  scopes: string[];
  authorizationCode: string;
  codeVerifier?: string;
}

Logout

import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.logoutUser('Token');

Fetch Access Token

import { LoginHelper } from '@os1-platform/aaa-mobile';
const accessToken = await LoginHelper.fetchAccessToken();

//This will fetch the latest access token from the storage and if the token is expired then it calls refresh token internally and returns the new access token.

Refresh Token

import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.refreshToken();