Allow Kratos provider redirect (#36)

.circleci/config.yml

@@ -54,7 +54,7 @@ executors:
 
   default-machine:
     machine:
-      image: ubuntu-1604:201903-01
+      image: ubuntu-2004:202201-02
 
 ##
 # Jobs

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-alpine as builder
+FROM node:14.18.1-alpine as builder
 WORKDIR /opt/reporting-hub-bop-shell
 ENV PATH /opt/reporting-hub-bop-shell/node_modules/.bin:$PATH
 

docker/createJSONConfig.sh

@@ -8,6 +8,7 @@ echo "{
   \"REMOTE_MOCK_API\": \"${REMOTE_MOCK_API}\",
   \"AUTH_ENABLED\": \"${AUTH_ENABLED}\",
   \"LOGIN_URL\": \"${LOGIN_URL}\",
+  \"LOGIN_PROVIDER\": \"${LOGIN_PROVIDER}\",
   \"LOGOUT_URL\": \"${LOGOUT_URL}\",
   \"AUTH_TOKEN_URL\": \"${AUTH_TOKEN_URL}\"
 }" | jq '.' > /usr/share/nginx/html/config.json

docs/environment-variables.md

@@ -26,6 +26,7 @@ The application is driven by some environment variables used at build and runtim
 |---|---|
 | `API_BASE_URL` | base path for api (could be a URL) |
 | `LOGIN_URL` | where to redirect for login |
+| `LOGIN_PROVIDER` | enable automatic redirect to Kratos provider |
 | `LOGOUT_URL` | where to redirect for logout |
 | `MOCK_API` | enable mocking api |
 | `AUTH_ENABLED` | enable auth |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mojaloop/reporting-hub-bop-shell",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {

src/Auth/sagas.ts

@@ -8,22 +8,76 @@ import { LoggedUser } from './types';
 
 function* doAuth() {
   try {
-    // @ts-ignore
-    const response = yield call(api.whoami.read) as MakeResponse<LoggedUser>;
+    let response: MakeResponse<LoggedUser>;
+    try {
+      response = yield call(api.whoami.read);
+    } catch (error) {
+      response = error.response;
+      if (!response) throw error;
+    }
     const { data, status } = response;
 
     if (is200(status)) {
       yield put(actions.doAuthSuccess(data));
     } else if (is401(status)) {
-      window.location.href = yield select(selectors.getLoginEndpoint);
+      const loginProvider: string = yield select(selectors.getLoginProvider);
+      const loginEndpoint: string = yield select(selectors.getLoginEndpoint);
+      const loginUrl: string = `${loginEndpoint}?return_to=${window.location.href}`;
+      if (loginProvider) {
+        const loginResult: string = yield call(async () => {
+          try {
+            // obtain login flow
+            const {
+              ui: { method, action, nodes },
+            } = await (await fetch(loginUrl, { headers: { accept: 'application/json' } })).json();
+            const form = document.createElement('form');
+            form.method = method;
+            form.action = action;
+            let submit: HTMLInputElement | undefined;
+
+            nodes.forEach(
+              ({
+                attributes: { type, name, node_type, value },
+              }: {
+                attributes: Record<string, string>;
+              }) => {
+                if (name === 'provider' && value !== loginProvider) return;
+                const element = document.createElement(node_type) as HTMLInputElement;
+                if (name === 'provider') submit = element;
+                element.type = type;
+                element.value = value;
+                element.name = name;
+                form.appendChild(element);
+              },
+            );
+
+            if (submit) {
+              document.body.appendChild(form);
+              submit.click();
+            } else {
+              window.location.assign(loginUrl);
+            }
+          } catch (error) {
+            console.error(error);
+            return 'Currently unable to perform authentication. Please try again later';
+          }
+          return '';
+        });
+        if (loginResult) {
+          yield put(actions.doAuthFailed(loginResult));
+        }
+      } else {
+        window.location.href = loginUrl;
+      }
     } else {
       yield put(
         actions.doAuthFailed(
           'There was an error while performing authentication. Please try again later',
         ),
       );
     }
-  } catch (e) {
+  } catch (error) {
+    console.error(error);
     yield put(
       actions.doAuthFailed('Currently unable to perform authentication. Please try again later'),
     );

src/Auth/selectors.ts

@@ -3,6 +3,7 @@ import { State } from 'store';
 
 export const getIsAuthEnabled = (state: State) => state.config.auth.isAuthEnabled;
 export const getLoginEndpoint = (state: State) => state.config.auth.loginEndpoint;
+export const getLoginProvider = (state: State) => state.config.auth.loginProvider;
 export const getLogoutEndpoint = (state: State) => state.config.auth.logoutEndpoint;
 export const getAuthTokenEndpoint = (state: State) => state.config.auth.authTokenEndpoint;
 

src/Config/build.ts

@@ -6,6 +6,7 @@ export default async (): Promise<AppConfig & AuthConfig & ApiConfig> => {
   // Using the same protocol as we've been loaded from to avoid Mixed Content error.
   const defaults = {
     loginEndpoint: `${process.env.REACT_APP_AUTH_API_BASE_URL}/self-service/login`,
+    loginProvider: '',
     logoutEndpoint: `${process.env.REACT_APP_AUTH_API_BASE_URL}/self-service/logout/browser`,
     authTokenEndpoint: `${process.env.REACT_APP_AUTH_API_BASE_URL}/sessions/whoami`,
     isAuthEnabled: process.env.REACT_APP_AUTH_ENABLED !== 'false',
@@ -26,13 +27,17 @@ export default async (): Promise<AppConfig & AuthConfig & ApiConfig> => {
       REMOTE_MOCK_API,
       AUTH_ENABLED,
       LOGIN_URL,
+      LOGIN_PROVIDER,
       LOGOUT_URL,
       AUTH_TOKEN_URL,
     } = await fetch(`${baseUrl}/config.json`).then((response) => response.json());
 
     if (LOGIN_URL !== undefined) {
       config.loginEndpoint = LOGIN_URL;
     }
+    if (LOGIN_PROVIDER !== undefined) {
+      config.loginProvider = LOGIN_PROVIDER;
+    }
     if (LOGOUT_URL !== undefined) {
       config.logoutEndpoint = LOGOUT_URL;
     }

src/Config/slice.ts

@@ -14,6 +14,7 @@ export const initialState: ConfigState = {
   auth: {
     authTokenEndpoint: '',
     loginEndpoint: '',
+    loginProvider: '',
     logoutEndpoint: '',
     isAuthEnabled: true,
   },

src/Config/types.ts

@@ -11,6 +11,7 @@ export type ApiConfig = {
 
 export interface AuthConfig {
   loginEndpoint: string;
+  loginProvider: string;
   logoutEndpoint: string;
   authTokenEndpoint: string;
   isAuthEnabled: boolean;