AAA SDK

17min
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 Authentication And Authorization﻿.
Installation
Install @os1-platform/aaa-web into your project.
Text
npm install @os1-platform/aaa-web
npm install @os1-platform/aaa-web
﻿
Peer Dependencies
The AAA SDK has the following peer dependencies:
JS
{
    "axios": ">=0.24.2",
    "react": "^17.0.2"
  }
{
    "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.
JS
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)
);
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:
JS
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter basename="/fms">
      <AuthProvider>
        <Router />
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter basename="/fms">
      <AuthProvider>
        <Router />
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
﻿
OR
JS
ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);
ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);
﻿
Pass the loader component to the AuthProvider to override the default loader.
JS
import Loader from 'your-loader-component';
<AuthProvider loader={<Loader />}>{children}</AuthProvider>;
import Loader from 'your-loader-component';
<AuthProvider loader={<Loader />}>{children}</AuthProvider>;
﻿
Use the loginWithRedirect method to initiate login.
JS
import { loginWithRedirect } from '@os1-platform/aaa-web';

<button onClick={() => loginWithRedirect()}>Login</button>;
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.
JS
import { isAuthenticated } from '@os1-platform/aaa-web';

const isAuth = isAuthenticated();
import { isAuthenticated } from '@os1-platform/aaa-web';

const isAuth = isAuthenticated();
﻿
Use the getAccessTokenSilently method, to fetch the access token.
JS
import { getAccessTokenSilently } from '@os1-platform/aaa-web';
const token = await getAccessTokenSilently();
import { getAccessTokenSilently } from '@os1-platform/aaa-web';
const token = await getAccessTokenSilently();
﻿
Use the getUserInfo method, to fetch user info.
JS
import { getUserInfo } from '@os1-platform/aaa-web';
const userInfo = await getUserInfo();
import { getUserInfo } from '@os1-platform/aaa-web';
const userInfo = await getUserInfo();
﻿
Use the HttpClient API to create a client for network requests.
JS
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`,
   });
  }
}
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`,
   });
  }
}
﻿
The 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.
JS
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
    });
};
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.
JS
import { logout } from '@os1-platform/aaa-web';
await logout();
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.
Text
yarn add @os1-platform/aaa-mobile
yarn add @os1-platform/aaa-mobile
﻿
Install Peer Dependencies
Text
yarn add react-native-app-auth@6.4.3
yarn add @react-native-async-storage/async-storage@^1.15.14
yarn add axios@^0.26.1
yarn add react-native-app-auth@6.4.3
yarn add @react-native-async-storage/async-storage@^1.15.14
yarn add axios@^0.26.1
﻿
Add Manifest Placeholder in build.gradle (app level)
Text
manifestPlaceholders = [appAuthRedirectScheme: "${applicationId}"]
manifestPlaceholders = [appAuthRedirectScheme: "${applicationId}"]
﻿
Usage
Init AAA SDKinitAuth0 initiates the authentication process and creates an instance of auth.
JS
// 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'
)
// 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 LogininitLogin() uses the auth instance and opens the web page on mobile containing the OS1 login page.
JS
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;
}
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
JS
import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.logoutUser('Token');
import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.logoutUser('Token');
﻿
Fetch Access Token
JS
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.
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
JS
import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.refreshToken();
import { LoginHelper } from '@os1-platform/aaa-mobile';

await LoginHelper.refreshToken();
﻿
﻿
Updated 28 Feb 2024
Did this page help you?
Dispatch SDK
Workflow Designer SDK