@axa-fr/react-oidc 5.7.0-alpha0

package/src/oidc/core/default-component/ServiceWorkerInstall.component.tsx

@@ -0,0 +1,51 @@
+import React, {useEffect, useState, ComponentType} from 'react';
+import AuthenticatingError from "./AuthenticateError.component";
+import Oidc from "../../vanilla/oidc";
+import Authenticating from "./Authenticating.component";
+
+const ServiceWorkerInstall: ComponentType<any> = ({callBackError, authenticating, configurationName }) => {
+    const getOidc =  Oidc.get;
+    const [error, setError] = useState(false);
+    const [isLoading, setLoading] = useState(true);
+
+    const CallbackErrorComponent = callBackError || AuthenticatingError;
+    const CallbackSuccessComponent = authenticating || Authenticating;
+
+    useEffect(() => {
+        let isMounted = true;
+        const playCallbackAsync = async () => {
+            try {
+                const params = new Proxy(new URLSearchParams(window.location.search), {
+                    // @ts-ignore
+                    get: (searchParams, prop) => searchParams.get(prop),
+                });
+                // @ts-ignore
+                await getOidc(configurationName).loginAsync(decodeURIComponent(params.callbackPath), false);
+                if(isMounted) {
+                    setLoading(false);
+                }
+            } catch (error) {
+                if(isMounted) {
+                    setError(true);
+                    setLoading(false);
+                }
+            }
+        };
+        playCallbackAsync();
+        return  () => {
+            isMounted = false;
+        };
+    },[]);
+
+    if(isLoading){
+        return null;
+    }
+
+    if(error){
+        return <CallbackErrorComponent configurationName={configurationName} />
+    }
+
+    return <CallbackSuccessComponent configurationName={configurationName} />;
+};
+
+export default ServiceWorkerInstall;

package/src/oidc/core/default-component/ServiceWorkerNotSupported.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+
+const ServiceWorkerNotSupported : ComponentType<any> = () => (
+  <div className="oidc-serviceworker">
+    <div className="oidc-serviceworker__container">
+      <h1 className="oidc-serviceworker__title">Unable to authenticate on this browser</h1>
+      <p className="oidc-serviceworker__content">Your browser is not secure enough to make authentication work. Try updating your browser or use a newer browser.</p>
+    </div>
+  </div>
+);
+
+export default ServiceWorkerNotSupported;

package/src/oidc/core/default-component/SessionLost.component.tsx

@@ -0,0 +1,14 @@
+import React, {ComponentType} from 'react';
+
+export const SessionLost: ComponentType<any> = () => (
+  <div className="oidc-session-lost">
+    <div className="oidc-session-lost__container">
+      <h1 className="oidc-session-lost__title">Session timed out</h1>
+      <p className="oidc-session-lost__content">
+          Your session has expired. Please re-authenticate.
+      </p>
+    </div>
+  </div>
+);
+
+export default SessionLost;

package/src/oidc/core/default-component/SilentCallback.component.tsx

@@ -0,0 +1,31 @@
+import React, {useEffect, ComponentType} from 'react';
+import Oidc from "../../vanilla/oidc";
+import {OidcSecure} from "../../OidcSecure";
+
+const CallBack = ({configurationName}) =>{
+    const getOidc =  Oidc.get;
+    useEffect(() => {
+        let isMounted = true;
+        const playCallbackAsync = async () => {
+            if(isMounted) {
+                const oidc = getOidc(configurationName);
+                oidc.silentSigninCallbackFromIFrame();
+            }
+        };
+        playCallbackAsync();
+
+        return () => {
+            isMounted = false;
+        };
+    },[]);
+    
+    return <></>;
+}
+
+const CallbackManager: ComponentType<any> = ({configurationName }) => {
+    return <OidcSecure configurationName={configurationName}>
+        <CallBack configurationName={configurationName}/>
+    </OidcSecure>;
+};
+
+export default CallbackManager;

package/src/oidc/core/default-component/index.ts

@@ -0,0 +1,6 @@
+export { default as Authenticating } from './Authenticating.component';
+export { default as Callback, CallBackSuccess } from './Callback.component';
+export { default as SessionLost } from './SessionLost.component';
+export { default as Loading } from './Loading.component';
+export { default as AuthenticateError } from './AuthenticateError.component';
+export { default as ServiceWorkerNotSupported } from './ServiceWorkerNotSupported.component';

package/src/oidc/core/routes/OidcRoutes.spec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import OidcRoutes from './OidcRoutes';
+import { FC } from 'react';
+import {render} from "@testing-library/react";
+
+describe('Authenticating test suite', () => {
+  it('renders correctly', () => {
+    const props = {
+      children: 'http://url.com',
+      callbackComponent: () => <div>tcallback component</div>,
+      redirect_uri: 'http://example.com:3000/authentication/callback',
+    };
+    const { asFragment } = render(<OidcRoutes {...props} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/oidc/core/routes/OidcRoutes.tsx

@@ -0,0 +1,69 @@
+import React, { ComponentType, FC, PropsWithChildren, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { getPath } from './route-utils';
+import CallbackComponent from '../default-component/Callback.component';
+import SilentCallbackComponent from "../default-component/SilentCallback.component";
+import ServiceWorkerInstall from "../default-component/ServiceWorkerInstall.component";
+
+const propTypes = {
+  callbackComponent: PropTypes.elementType,
+  redirect_uri: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+const defaultProps: Partial<OidcRoutesProps> = {
+
+};
+
+type OidcRoutesProps = {
+  callbackSuccessComponent?: ComponentType;
+  callbackErrorComponent?: ComponentType;
+  authenticatingComponent?: ComponentType;
+  configurationName:string;
+  redirect_uri: string;
+  silent_redirect_uri?: string;
+};
+
+const OidcRoutes: FC<PropsWithChildren<OidcRoutesProps>> = ({
+  callbackErrorComponent,
+  callbackSuccessComponent,
+                                                              authenticatingComponent,  
+                                                              redirect_uri,
+                                                              silent_redirect_uri,
+  children, configurationName
+}) => {
+  // This exist because in next.js window outside useEffect is null
+  const pathname = window ? window.location.pathname : '';
+  
+  const [path, setPath] = useState(pathname);
+  
+  useEffect(() => {
+    const setNewPath = () => setPath(window.location.pathname);
+    setNewPath();
+    window.addEventListener('popstate', setNewPath, false);
+    return () => window.removeEventListener('popstate', setNewPath, false);
+  });
+  
+  const callbackPath = getPath(redirect_uri);
+
+  if(silent_redirect_uri){
+    if(path === getPath(silent_redirect_uri)){
+      return <SilentCallbackComponent configurationName={configurationName} />
+    }
+  }
+
+  switch (path) {
+    case callbackPath:
+      return <CallbackComponent callBackError={callbackErrorComponent} callBackSuccess={callbackSuccessComponent} configurationName={configurationName} />;
+    case callbackPath +"/service-worker-install" :
+      return <ServiceWorkerInstall callBackError={callbackErrorComponent} authenticating={authenticatingComponent} configurationName={configurationName} />;  
+    default:
+      return <>{children}</>;
+  }
+};
+
+// @ts-ignore
+OidcRoutes.propTypes = propTypes;
+OidcRoutes.defaultProps = defaultProps;
+
+export default React.memo(OidcRoutes);

package/src/oidc/core/routes/__snapshots__/OidcRoutes.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Authenticating test suite renders correctly 1`] = `
+<DocumentFragment>
+  http://url.com
+</DocumentFragment>
+`;

package/src/oidc/core/routes/index.ts

@@ -0,0 +1,2 @@
+export { default as OidcRoutes } from './OidcRoutes';
+export { ReactOidcHistory } from './withRouter';

package/src/oidc/core/routes/route-utils.spec.ts

@@ -0,0 +1,9 @@
+import { getPath } from './route-utils';
+
+it('getPath should return the full path of an url', () => {
+  const path1 = getPath('http://example.com/pathname');
+  const path2 = getPath('http://example.com:3000/pathname/?search=test#hash');
+
+  expect(path1).toEqual('/pathname');
+  expect(path2).toEqual('/pathname/?search=test#hash');
+});

package/src/oidc/core/routes/route-utils.ts

@@ -0,0 +1,34 @@
+const getLocation = (href: string) => {
+  const match = href.match(
+    // eslint-disable-next-line no-useless-escape
+    /^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/
+  );
+  return (
+    match && {
+      href,
+      protocol: match[1],
+      host: match[2],
+      hostname: match[3],
+      port: match[4],
+      path: match[5],
+      search: match[6],
+      hash: match[7],
+    }
+  );
+};
+
+export const getPath = (href: string) => {
+  const location = getLocation(href);
+  let { path } = location;
+  const { search, hash } = location;
+
+  if (search) {
+    path += search;
+  }
+
+  if (hash) {
+    path += hash;
+  }
+
+  return path;
+};

package/src/oidc/core/routes/withRouter.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { CreateEvent, WindowInternal } from './withRouter';
+
+describe('WithRouter test Suite', () => {
+  const generateKeyMock = () => '123ABC';
+  const paramsMock = { bubbles: false, cancelable: false, detail: 'detail' };
+  beforeEach(() => {});
+  it('should CreateEvent return correct Event if not on IE', () => {
+    const windowMock = {
+      CustomEvent: jest.fn().mockImplementation((event, params) => {
+        return { event, params };
+      }),
+    };
+    const documentMock = {} as Document;
+    const res = CreateEvent((windowMock as unknown) as WindowInternal, documentMock)(
+      'event test',
+      paramsMock
+    );
+    expect(res).toEqual({
+      event: 'event test',
+      params: { bubbles: false, cancelable: false, detail: 'detail' },
+    });
+  });
+
+  it('should createEvent create a polyfill when the default func is undefined', () => {
+    const windowMock = {
+      Event: {
+        prototype: 'protoMock',
+      },
+    };
+    const evtMock = {
+      initCustomEvent: jest.fn(),
+    };
+    const documentMock = {
+      createEvent: jest.fn(() => evtMock),
+    };
+    const typedDocumentMock = (documentMock as unknown) as Document;
+    const res = CreateEvent((windowMock as unknown) as WindowInternal, typedDocumentMock)(
+      'event test',
+      paramsMock
+    );
+    expect(res).toEqual({ ...evtMock });
+    expect(documentMock.createEvent).toHaveBeenCalledWith('CustomEvent');
+    expect(evtMock.initCustomEvent).toHaveBeenCalledWith('event test', false, false, 'detail');
+  });
+  
+});

package/src/oidc/core/routes/withRouter.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+const generateKey = () =>
+  Math.random()
+    .toString(36)
+    .substr(2, 6);
+
+// Exported only for test
+export type WindowInternal = Window & {
+  CustomEvent?: new <T>(typeArg: string, eventInitDict?: CustomEventInit<T>) => CustomEvent<T>;
+  Event: typeof Event;
+};
+
+type IPrototype = {
+  prototype: any;
+};
+
+type InitCustomEventParams<T = any> = {
+  bubbles: boolean;
+  cancelable: boolean;
+  detail: T;
+};
+
+// IE Polyfill for CustomEvent
+export const CreateEvent = (windowInternal: WindowInternal, documentInternal: Document) => (
+  event: string,
+  params: InitCustomEventParams
+): CustomEvent => {
+  if (typeof windowInternal.CustomEvent === 'function') {
+    return new windowInternal.CustomEvent(event, params);
+  }
+  const paramsToFunction = params || { bubbles: false, cancelable: false, detail: undefined };
+  const evt: CustomEvent = documentInternal.createEvent('CustomEvent');
+  evt.initCustomEvent(event, paramsToFunction.bubbles, paramsToFunction.cancelable, paramsToFunction.detail);
+  (evt as CustomEvent & IPrototype).prototype = windowInternal.Event.prototype;
+  return evt;
+};
+
+type WindowHistoryState = typeof window.history.state;
+
+export interface ReactOidcHistory {
+  replaceState: (url?: string | null, stateHistory?: WindowHistoryState) => void;
+}
+
+const getHistory = (
+  windowInternal: WindowInternal,
+  CreateEventInternal: (event: string, params?: InitCustomEventParams) => CustomEvent,
+  generateKeyInternal: typeof generateKey
+) => {
+  return {
+    replaceState: (url?: string | null, stateHistory?: WindowHistoryState): void => {
+      const key = generateKeyInternal();
+      const state = stateHistory || windowInternal.history.state;
+      windowInternal.history.replaceState({ key, state }, null, url);
+      windowInternal.dispatchEvent(CreateEventInternal('popstate'));
+    },
+  };
+};
+
+export const getCustomHistory = () => getHistory(window, CreateEvent(window, document), generateKey);

package/src/oidc/index.ts

@@ -0,0 +1,5 @@
+export { withOidcSecure, OidcSecure } from "./OidcSecure";
+export { useOidcUser, OidcUserStatus} from "./User";
+export { useOidc, useOidcAccessToken, useOidcIdToken } from "./ReactOidc";
+export { withOidcFetch, useOidcFetch } from "./FetchToken";
+export { OidcProvider } from "./OidcProvider";

package/src/oidc/vanilla/OidcServiceWorker.js

@@ -0,0 +1,272 @@
+this.importScripts('OidcTrustedDomains.js');
+
+const id = Math.round(new Date().getTime() / 1000).toString();
+
+const keepAliveJsonFilename = "OidcKeepAliveServiceWorker.json";
+const handleInstall = (event) => {
+    console.log('[OidcServiceWorker] service worker installed ' + id);
+    self.skipWaiting();
+};
+
+const handleActivate = () => {
+    console.log('[OidcServiceWorker] service worker activated ' + id);
+    self.clients.claim();
+};
+
+let currentLoginCallbackConfigurationName = null;
+let database = {
+    default: {
+        configurationName: "default",
+        tokens: null,
+        items:[],
+        oidcServerConfiguration: null
+    }
+};
+
+const countLetter = (str, find)=> {
+    return (str.split(find)).length - 1;
+}
+
+function extractAccessTokenPayload(accessToken) {
+    try{
+        if (!accessToken) {
+            return null;
+        }
+        if(countLetter(accessToken,'.') === 2) {
+            return JSON.parse(atob(accessToken.split('.')[1]));
+        } else {
+            return null;
+        }
+    } catch (e) {
+        console.warn(e);
+    }
+    return null;
+}
+
+function hideTokens(currentDatabaseElement) {
+    const configurationName = currentDatabaseElement.configurationName;
+    return (response) => {
+        return response.json().then(tokens => {
+            currentDatabaseElement.tokens = tokens;
+            const secureTokens = {
+                ...tokens,
+                access_token: ACCESS_TOKEN +"_" + configurationName,
+                refresh_token: REFRESH_TOKEN + "_" + configurationName,
+            };
+            const body = JSON.stringify(secureTokens)
+            return new Response(body, response);
+        });
+    };
+}
+
+const getCurrentDatabasesTokenEndpoint = (database, url) => {
+    const databases = [];
+    for (const [key, value] of Object.entries(database)) {
+        if(value && value.oidcServerConfiguration !=null && url.startsWith(value.oidcServerConfiguration.tokenEndpoint)){
+            databases.push(value);
+        }
+    }
+    return databases;
+}
+
+const getCurrentDatabaseDomain = (database, url) => {
+    for (const [key, currentDatabase] of Object.entries(database)) {
+
+        const oidcServerConfiguration = currentDatabase.oidcServerConfiguration;
+        const domainsToSendTokens = oidcServerConfiguration != null ? [
+            oidcServerConfiguration.userInfoEndpoint, ...trustedDomains[key]
+        ] : [...trustedDomains[key]];
+
+        let hasToSendToken = false;
+        for(let i=0;i<domainsToSendTokens.length;i++) {
+            const domain = domainsToSendTokens[i];
+            if (url.startsWith(domain)) {
+                hasToSendToken = true;
+                break;
+            }
+        }
+
+        if(hasToSendToken){
+            if(!currentDatabase.tokens) {
+                return null;
+            }
+            return currentDatabase;
+        }
+    }
+
+    return null;
+}
+
+const serializeHeaders = (headers) => {
+    let headersObj = {};
+    for (let key of headers.keys()) {
+        headersObj[key] = headers.get(key);
+    }
+    return headersObj;
+};
+
+const REFRESH_TOKEN = 'REFRESH_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER';
+const ACCESS_TOKEN = 'ACCESS_TOKEN_SECURED_BY_OIDC_SERVICE_WORKER';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+const keepAliveAsync = async (event) => {
+    const originalRequest = event.request;
+    const isFromVanilla = originalRequest.headers.has('oidc-vanilla');
+    if(!isFromVanilla) {
+        await sleep(15000);
+    }
+    const init = {"status": 200, "statusText": 'oidc-service-worker'};
+    return new Response('{}', init);
+}
+
+const handleFetch = async (event) => {
+    const originalRequest = event.request;
+
+    if(originalRequest.url.includes(keepAliveJsonFilename) ){
+        event.respondWith(keepAliveAsync(event));
+        return;
+    }
+
+    const currentDatabaseForRequestAccessToken = getCurrentDatabaseDomain(database, originalRequest.url);
+    if(currentDatabaseForRequestAccessToken && currentDatabaseForRequestAccessToken.tokens) {
+        const newRequest = new Request(originalRequest, {
+            headers: {
+                ...serializeHeaders(originalRequest.headers),
+                authorization: "Bearer " + currentDatabaseForRequestAccessToken.tokens.access_token
+            }
+        });
+        event.waitUntil(event.respondWith(fetch(newRequest)));
+    }
+
+    if(event.request.method !== "POST"){
+        return;
+    }
+    let currentDatabase = null;
+    const currentDatabases = getCurrentDatabasesTokenEndpoint(database, originalRequest.url);
+    const numberDatabase = currentDatabases.length;
+    if(numberDatabase > 0) {
+        const maPromesse = new Promise((resolve, reject) => {
+            const response = originalRequest.clone().text().then(actualBody => {
+                if(actualBody.includes(REFRESH_TOKEN)) {
+                    let newBody = actualBody;
+                    for(let i= 0;i<numberDatabase;i++){
+                        const currentDb = currentDatabases[i];
+                        const key = REFRESH_TOKEN + '_'+ currentDb.configurationName;
+                        if(currentDb && currentDb.tokens != null && actualBody.includes(key)) {
+                            newBody = newBody.replace(key, encodeURIComponent(currentDb.tokens.refresh_token));
+                            currentDatabase = currentDb;
+                            break;
+                        }
+                    }
+                    return fetch(originalRequest, {
+                        body: newBody,
+                        method: originalRequest.method,
+                        headers: {
+                            ...serializeHeaders(originalRequest.headers),
+                        },
+                        mode: originalRequest.mode,
+                        cache: originalRequest.cache,
+                        redirect: originalRequest.redirect,
+                        referrer: originalRequest.referrer,
+                        credentials: originalRequest.credentials,
+                        integrity: originalRequest.integrity
+                    }).then(hideTokens(currentDatabase));
+                } else if(currentLoginCallbackConfigurationName){
+                    currentDatabase = database[currentLoginCallbackConfigurationName];
+                    currentLoginCallbackConfigurationName=null;
+                    return fetch(originalRequest,{
+                        body: actualBody,
+                        method: originalRequest.method,
+                        headers: {
+                            ...serializeHeaders(originalRequest.headers),
+                        },
+                        mode: originalRequest.mode,
+                        cache: originalRequest.cache,
+                        redirect: originalRequest.redirect,
+                        referrer: originalRequest.referrer,
+                        credentials: originalRequest.credentials,
+                        integrity: originalRequest.integrity
+                    }).then(hideTokens(currentDatabase));
+                }
+            });
+            response.then(r => {
+                if(r !== undefined){
+                    resolve(r);
+                }
+            }).catch(err => {
+                if(err !== undefined) {
+                    reject(err);
+                }
+            });
+        });
+        event.waitUntil(event.respondWith(maPromesse));
+    }
+};
+
+self.addEventListener('install', handleInstall);
+self.addEventListener('activate', handleActivate);
+self.addEventListener('fetch', handleFetch);
+
+addEventListener('message', event => {
+    const port = event.ports[0];
+    const data = event.data;
+    const configurationName = data.configurationName;
+    let currentDatabase = database[configurationName];
+
+    if(!currentDatabase){
+        database[configurationName] = {
+            tokens: null,
+            items:[],
+            oidcServerConfiguration: null,
+            configurationName: configurationName,
+        };
+        currentDatabase = database[configurationName];
+        if(!trustedDomains[configurationName]) {
+            trustedDomains[configurationName] = [];
+        }
+    }
+    switch (data.type){
+        case "loadItems":
+            port.postMessage(database[configurationName].items);
+            return;
+        case "clear":
+            currentDatabase.tokens = null;
+            currentDatabase.items = null;
+            port.postMessage({configurationName});
+            return;
+        case "init":
+            currentDatabase.oidcServerConfiguration = data.data.oidcServerConfiguration;
+            const where = data.data.where;
+            if(where === "loginCallbackAsync" || where === "tryKeepExistingSessionAsync") {
+                currentLoginCallbackConfigurationName = configurationName;
+            } else{
+                currentLoginCallbackConfigurationName = null;
+            }
+            if(!currentDatabase.tokens){
+                port.postMessage({
+                    tokens:null,
+                    configurationName});
+            } else {
+                port.postMessage({
+                    tokens: {
+                        ...currentDatabase.tokens,
+                        refresh_token: REFRESH_TOKEN + "_" + configurationName,
+                        access_token: ACCESS_TOKEN + "_" + configurationName
+                    },
+                    configurationName
+                });
+            }
+            return;
+
+        case "getAccessTokenPayload":
+            const accessTokenPayload = extractAccessTokenPayload(currentDatabase.tokens.access_token);
+            port.postMessage({configurationName, accessTokenPayload});
+            return;
+        default:
+            currentDatabase.items = data.data;
+            port.postMessage({configurationName});
+            return;
+    }
+});
+

package/src/oidc/vanilla/OidcTrustedDomains.js

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["http://localhost:4200"],
+    auth0:[]
+};  

package/src/oidc/vanilla/index.ts

@@ -0,0 +1 @@
+export { Oidc } from './oidc';