@bookassist/ba-sso v1.1.4-rc26

SSO

This is the Single Sign On application to authenticate with AWS Cognito service.

This project has different targets. 1. Create a React standalone application. Here 2. Crerate a library to integrate with other React projects. Here

SSO Application

This is the application to process the authentication of the user using AWS Cognito service.

The application has following features 1. Authentication of the user 2. Change password of the user 3. Forgot password procedure of the user 4. Control of rotation fo the password

The application is preconfigured with default parameters that you need to customize. You have to set a global object to override values of the configuration. The global object you need to override is global.bookassist.auth

Configuration

Global properties of global.bookassist.auth

Properties of aws

Example of the global object

{
  "environment": "secure",
  "authServer": "https://auth.milocalhost.com",
  "i18nEndpoint": "https://api.milocalhost.com/master/i18n/bookassist.i18n.HotelAdminRB/{0}/jed",
  "gaAccount": "UA-25321856-1",
  "captchaKey": "6Lc9vSUTAAAAAGNnZJGco_7GxWAWuZ9n99DSQw1V",
  "confirmWithServer": false,
  "orderActionButtons": "cta-right",
  "aws": {
    "Auth": {
      "identityPoolId": "eu-west-1:d1105de5-c924-4f4c-8e6c-bc5be3df684f",
      "region": "eu-west-1",
      "userPoolId": "eu-west-1_NycYtNl1g",
      "userPoolWebClientId": "p21h8qinoaculq94vmqmahigd",
      "mandatorySignIn": true,
      "authenticationFlowType": "USER_PASSWORD_AUTH",
      "clientMetadata": {
        "userLang": "en",
        "pci": "true"
      }
    }
  }
}

Build app

This project is using webpack to build the app, so you can execute

yarn install && yarn build:app

After you build the application the result is in the dist directory.

dist
├── ba-sso-component-styles.css
├── config.js
├── favicon
├── fonts
├── images
├── index.html
└── sso.min.js

Docker environment

The project can create a Docker image to run the application. The image is based on nginx.

As same as other apps, you have to build the docker image of this project. To build that, you have to run following command.

docker build -t 479499153175.dkr.ecr.eu-west-1.amazonaws.com/bookassist/sso-auth .

For developer environment, you probably want to use a local registry instead of ECR

docker build -t registry.localhost:5000/bookassist/sso-auth .

SSO Library

The project can also create a library to use the component inside an application. The library is take into account you can use the component in different environments.

1. React Web Application
2. Standalone in a web page

The library exports some UI components and some functions to work with the component and control workflows.

Components

The library exports 3 components

Properties of the components

Functions

The library also exports some functions

retrieveUserInformation

Retrieve user information of current user

parameters

output

Object that contains following properties

NOTE: * means this field is deprecated

retrieveCredentials

Retrieve AWS Cognito credentials. Usually contains JWT

parameters

output

Object with following properties

Example

{
  "accessToken": "ydashdalk...",
  "idToken": "jbdslkj2783..",
  "refreshToken": "jdkas=_ksajhd..."
}

signOut

Sign out from the Single Sign On globally

parameters

output

None

changePassword

Go to change password

parameters

output

None

Build library

To build the library you can execute

yarn install && yarn build:lib

Publish library

You can publish this library to a npm repository.

yarn publish

Using in a React project

First of all you have to include the library in your project

yarn add @bookassist/ba-sso

or you can use npm

npm install @bookassist/ba-sso

You have to wrapper your application with a component

import { SSOWrapper } from '@bookassist/ba-sso'
...
<SSOWrapper signInUri={ 'https://login.bookassist.com' }>
  <div>My application</div>
</SSOWrapper>

In case you want to use only the wrapper, you can import from a compat file

import SSOWrapper from '@bookassist/ba-sso/dist/ba-sso-wrapper'
...
<SSOWrapper signInUri={ 'https://login.bookassist.com' }>
  <div>My application</div>
</SSOWrapper>

Using a function

import { retrieveUserInformation } from '@bookassist/ba-sso/dist/ba-sso-functions';
...
const myFunction = () => {
  retrieveUserInformation()
  .then(user -> {
    // your code of user
  })
}

Using in a page

You have to include the CSS file and the Script file. You can pick them from the dist directory after you build the application.

The application needs an HTML container with id sso.

<!doctype html>
<html>
  <head>
    <title>Bookassist SSO</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script type="text/javascript">
      window.signInCallback = function() {
        alert('Signed In');
      };
    </script>

   <link href="./ba-sso-styles.css" rel="stylesheet">
  </head>
  <body class="ha-login">
     <div id="sso"></div>
     <script type="text/javascript">
      <!-- Override values -->
     </script>
     <script type="text/javascript" src="./ba-sso-component.js"></script>
     <script type="text/javascript">
        SSOComponent = window["ba-sso-component"].SSOComponent;
        var c = new SSOComponent({ "displayBehaviour": "embedded" });
        c.run();
     </script>
   </body>
</html>