@axa-fr/react-oidc 6.6.1 → 6.6.2-alpha0

package/src/oidc/vanilla/parseTokens.ts

@@ -0,0 +1,142 @@
+
+
+const b64DecodeUnicode = (str) =>
+    decodeURIComponent(Array.prototype.map.call(atob(str), (c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+const parseJwt = (token) => JSON.parse(b64DecodeUnicode(token.split('.')[1].replace('-', '+').replace('_', '/')));
+
+const extractTokenPayload = (token) => {
+    try{
+        if (!token) {
+            return null;
+        }
+        if(countLetter(token,'.') === 2) {
+            return parseJwt(token);
+        } else {
+            return null;
+        }
+    } catch (e) {
+        console.warn(e);
+    }
+    return null;
+}
+
+const countLetter = (str, find)=> {
+    return (str.split(find)).length - 1;
+}
+
+
+export const setTokens = (tokens, oldTokens=null) =>{
+    
+    if(!tokens){
+        return null;
+    }
+    let accessTokenPayload;
+
+    if(!tokens.issuedAt) {
+        const currentTimeUnixSecond = new Date().getTime() /1000;
+        tokens.issuedAt = currentTimeUnixSecond;
+    }
+
+    if(tokens.accessTokenPayload !== undefined) {
+        accessTokenPayload = tokens.accessTokenPayload;
+    }
+    else {
+        accessTokenPayload = extractTokenPayload(tokens);
+    }
+    const _idTokenPayload = tokens.idTokenPayload ? tokens.idTokenPayload : extractTokenPayload(tokens.idToken);
+
+    const idTokenExipreAt =(_idTokenPayload && _idTokenPayload.exp) ? _idTokenPayload.exp: Number.MAX_VALUE;
+    const accessTokenExpiresAt =  (accessTokenPayload && accessTokenPayload.exp)? accessTokenPayload.exp : tokens.issuedAt + tokens.expiresIn;
+    const expiresAt = idTokenExipreAt < accessTokenExpiresAt ? idTokenExipreAt : accessTokenExpiresAt;
+    
+    const newTokens = {...tokens, idTokenPayload: _idTokenPayload, accessTokenPayload, expiresAt};
+    // When refresh_token is not rotated we reuse ald refresh_token
+    if(oldTokens != null && "refreshToken" in oldTokens && !("refreshToken" in tokens)){
+        const refreshToken = oldTokens.refreshToken
+        return {...newTokens, refreshToken};
+    } 
+    
+    return newTokens;
+}
+
+
+
+export const parseOriginalTokens= (tokens, oldTokens) =>{
+    if(!tokens){
+        return null;
+    }
+    if(!tokens.issued_at) {
+        const currentTimeUnixSecond = new Date().getTime() /1000;
+        tokens.issued_at = currentTimeUnixSecond;
+    }
+    
+    const data = {
+        accessToken: tokens.access_token,
+        expiresIn: tokens.expires_in,
+        idToken: tokens.id_token,
+        scope: tokens.scope,
+        tokenType: tokens.token_type,
+        issuedAt: tokens.issued_at
+    };
+
+    if("refresh_token" in tokens) {
+        // @ts-ignore
+        data.refreshToken= tokens.refresh_token;
+    }
+
+
+    if(tokens.accessTokenPayload !== undefined){
+        // @ts-ignore
+        data.accessTokenPayload = tokens.accessTokenPayload;
+    }
+
+    if(tokens.idTokenPayload !== undefined){
+        // @ts-ignore
+        data.idTokenPayload = tokens.idTokenPayload;
+    }
+
+    return setTokens(data, oldTokens);
+}
+
+export const computeTimeLeft = (refreshTimeBeforeTokensExpirationInSecond, expiresAt)=>{
+    const currentTimeUnixSecond = new Date().getTime() /1000;
+    return Math.round(((expiresAt - refreshTimeBeforeTokensExpirationInSecond) - currentTimeUnixSecond));
+}
+
+export const isTokensValid= (tokens) =>{
+    if(!tokens){
+        return false;
+    }
+    return computeTimeLeft(0, tokens.expiresAt) > 0;
+}
+
+// https://openid.net/specs/openid-connect-core-1_0.html#IDTokenValidation (excluding rules #1, #4, #5, #7, #8, #12, and #13 which did not apply).
+// https://github.com/openid/AppAuth-JS/issues/65
+export const isTokensOidcValid =(tokens, nonce, oidcServerConfiguration) =>{
+    if(tokens.idTokenPayload) {
+        const idTokenPayload = tokens.idTokenPayload;
+        // 2: The Issuer Identifier for the OpenID Provider (which is typically obtained during Discovery) MUST exactly match the value of the iss (issuer) Claim.
+        if(oidcServerConfiguration.issuer !==  idTokenPayload.iss){
+            return false;
+        }
+        // 3: The Client MUST validate that the aud (audience) Claim contains its client_id value registered at the Issuer identified by the iss (issuer) Claim as an audience. The aud (audience) Claim MAY contain an array with more than one element. The ID Token MUST be rejected if the ID Token does not list the Client as a valid audience, or if it contains additional audiences not trusted by the Client.
+        
+        // 6: If the ID Token is received via direct communication between the Client and the Token Endpoint (which it is in this flow), the TLS server validation MAY be used to validate the issuer in place of checking the token signature. The Client MUST validate the signature of all other ID Tokens according to JWS [JWS] using the algorithm specified in the JWT alg Header Parameter. The Client MUST use the keys provided by the Issuer.
+        
+        // 9: The current time MUST be before the time represented by the exp Claim.
+        const currentTimeUnixSecond = new Date().getTime() /1000;
+        if(idTokenPayload.exp && idTokenPayload.exp < currentTimeUnixSecond) {
+            return false;
+        }
+        // 10: The iat Claim can be used to reject tokens that were issued too far away from the current time, limiting the amount of time that nonces need to be stored to prevent attacks. The acceptable range is Client specific.
+        const timeInSevenDays = 60 * 60 * 24 * 7;
+        if(idTokenPayload.iat && (idTokenPayload.iat + timeInSevenDays) < currentTimeUnixSecond) {
+            return false;
+        }
+        // 11: If a nonce value was sent in the Authentication Request, a nonce Claim MUST be present and its value checked to verify that it is the same value as the one that was sent in the Authentication Request. The Client SHOULD check the nonce value for replay attacks. The precise method for detecting replay attacks is Client specific.
+        if (idTokenPayload.nonce && idTokenPayload.nonce !== nonce) {
+            return false;
+        }
+    }
+    return true;
+}

package/src/oidc/vanilla/route-utils.spec.ts

@@ -0,0 +1,15 @@
+import { getPath } from './route-utils';
+
+
+test.each([['http://example.com/pathname', '/pathname'], 
+  ['http://example.com:3000/pathname/?search=test#hash', '/pathname#hash'], 
+  ['http://example.com:3000/pathname/#hash?search=test', '/pathname#hash'], 
+  ['http://example.com:3000/pathname#hash?search=test', '/pathname#hash'], 
+  ['http://example.com:3000/', ''],])(
+    'getPath should return the full path of an url',
+    (uri, expected) => {
+
+      const path = getPath(uri);
+      expect(path).toBe(expected);
+    },
+);

package/src/oidc/vanilla/route-utils.ts

@@ -0,0 +1,76 @@
+export const getLocation = (href: string) => {
+  const match = href.match(
+    // eslint-disable-next-line no-useless-escape
+    /^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/
+  );
+  
+  let search = match[6];
+  let hash = match[7];
+
+    if (hash) {
+        const splits = hash.split("?");
+        if(splits.length ==2){
+            hash = splits[0];
+            search = splits[1];
+        }
+    }
+    
+    if(search){
+        search = search.slice(1);
+    }
+  
+  return (
+    match && {
+      href,
+      protocol: match[1],
+      host: match[2],
+      hostname: match[3],
+      port: match[4],
+      path: match[5],
+      search,
+      hash,
+    }
+  );
+};
+
+export const getPath = (href: string) => {
+  const location = getLocation(href);
+  let { path } = location;
+  
+  if(path.endsWith('/')){
+      path = path.slice(0, -1);
+  }
+  let { hash } = location;
+  
+  if(hash === "#_=_"){
+      hash = "";
+  }
+
+  if (hash) {
+    path += hash;
+  }
+
+  return path;
+};
+
+export const getParseQueryStringFromLocation=(href: string) => {
+    const location = getLocation(href);
+    let { search } = location;
+    
+    return parseQueryString(search);
+}
+
+const parseQueryString = (queryString:string) => {
+    let params:any = {}, queries, temp, i, l;
+
+    // Split into key/value pairs
+    queries = queryString.split("&");
+
+    // Convert the array of strings into an object
+    for (i = 0, l = queries.length; i < l; i++) {
+        temp = queries[i].split('=');
+        params[temp[0]] = temp[1];
+    }
+
+    return params;
+};

package/src/oidc/vanilla/timer.ts

@@ -0,0 +1,165 @@
+const timer = (function () {
+    const workerPort = (function () {
+        let worker;
+        let blobURL;
+
+        const workerCode = function () {
+            const innerIdsByOuterIds = {};
+
+            const methods = {
+                setTimeout: function (port, id, timeout) {
+                    innerIdsByOuterIds[id] = setTimeout(function () {
+                        port.postMessage(id);
+                        innerIdsByOuterIds[id] = null;
+                    }, timeout);
+                },
+
+                setInterval: function (port, id, timeout) {
+                    innerIdsByOuterIds[id] = setInterval(function () {
+                        port.postMessage(id);
+                    }, timeout);
+                },
+
+                clearTimeout: function (port, id) {
+                    clearTimeout(innerIdsByOuterIds[id]);
+                    innerIdsByOuterIds[id] = null;
+                },
+
+                clearInterval: function (port, id) {
+                    clearInterval(innerIdsByOuterIds[id]);
+                    innerIdsByOuterIds[id] = null;
+                }
+            };
+
+            function onMessage(port, event) {
+                var method = event.data[0];
+                var id = event.data[1];
+                var option = event.data[2];
+
+                if (methods[method]) {
+                    methods[method](port, id, option);
+                }
+            }
+
+            // For Dedicated Worker
+            this.onmessage = function (event) {
+                onMessage(self, event);
+            };
+
+            // For Shared Worker
+            this.onconnect = function (event) {
+                const port = event.ports[0];
+
+                port.onmessage = function (event) {
+                    onMessage(port, event);
+                };
+            };
+        }.toString();
+
+        try {
+            const blob = new Blob(['(', workerCode, ')()'], {type: 'application/javascript'});
+            blobURL = URL.createObjectURL(blob);
+        } catch (error) {
+            return null;
+        }
+        const insideBrowser = (typeof process === 'undefined');
+        try {
+            if (SharedWorker) {
+                worker = new SharedWorker(blobURL);
+               return worker.port;
+            } 
+        } catch (error)
+        {
+            if(insideBrowser) {
+                console.warn("SharedWorker not available");
+            }
+        }
+        try {
+            if (Worker) {
+                worker = new Worker(blobURL);
+                return worker;
+            }
+        } catch (error)
+        {
+            if(insideBrowser) {
+                console.warn("Worker not available");
+            }
+        }
+
+        return null;
+    }());
+
+    if (!workerPort) {
+        // In NextJS with SSR (Server Side Rendering) during rending in Node JS, the window object is undefined,
+        // the global object is used instead as it is the closest approximation of a browsers window object.
+        const bindContext = (typeof window === 'undefined')? global: window;
+
+        return {
+            setTimeout: setTimeout.bind(bindContext),
+            clearTimeout: clearTimeout.bind(bindContext),
+            setInterval: setInterval.bind(bindContext),
+            clearInterval: clearInterval.bind(bindContext)
+        };
+    }
+
+    const getId = (function () {
+        let currentId = 0;
+
+        return function () {
+            currentId++;
+            return currentId;
+        };
+    }());
+
+    const timeoutCallbacksById = {};
+    const intervalCallbacksById = {};
+
+    workerPort.onmessage = function (event) {
+        const id = event.data;
+
+        const timeoutCallback = timeoutCallbacksById[id];
+        if (timeoutCallback) {
+            timeoutCallback();
+            timeoutCallbacksById[id] = null;
+            return;
+        }
+
+        const intervalCallback = intervalCallbacksById[id];
+        if (intervalCallback) {
+            intervalCallback();
+        }
+    };
+
+    function setTimeoutWorker(callback, timeout) {
+        const id = getId();
+        workerPort.postMessage(['setTimeout', id, timeout]);
+        timeoutCallbacksById[id] = callback;
+        return id;
+    }
+
+    function clearTimeoutWorker(id) {
+        workerPort.postMessage(['clearTimeout', id]);
+        timeoutCallbacksById[id] = null;
+    }
+
+    function setIntervalWorker(callback, timeout) {
+        const id = getId();
+        workerPort.postMessage(['setInterval', id, timeout]);
+        intervalCallbacksById[id] = callback;
+        return id;
+    }
+
+    function clearIntervalWorker(id) {
+        workerPort.postMessage(['clearInterval', id]);
+        intervalCallbacksById[id] = null;
+    }
+
+    return {
+        setTimeout: setTimeoutWorker,
+        clearTimeout: clearTimeoutWorker,
+        setInterval: setIntervalWorker,
+        clearInterval: clearIntervalWorker
+    };
+}());
+
+export default timer;

package/src/override/AuthenticateError.component.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+import {style} from "./style";
+
+const AuthenticatingError:  ComponentType<any> = ({configurationName}) => (
+     <div className="oidc-authenticating" style={style}>
+        <div className="oidc-authenticating__container">
+          <h1 className="oidc-authenticating__title">Error authentication for {configurationName}</h1>
+          <p className="oidc-authenticating__content">An error occurred during authentication.</p>
+        </div>
+     </div>
+);
+
+export default AuthenticatingError;

package/src/override/Authenticating.component.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {PropsWithChildren} from "react";
+import {style} from "./style";
+
+const Authenticating :  PropsWithChildren<any> = ({configurationName}) => (
+      <div className="oidc-authenticating" style={style}>
+    <div className="oidc-authenticating__container">
+      <h1 className="oidc-authenticating__title">Authentication in progress for {configurationName}</h1>
+      <p className="oidc-authenticating__content">You will be redirected to the login page.</p>
+    </div>
+  </div>
+);
+
+export default Authenticating;

package/src/override/Callback.component.tsx

@@ -0,0 +1,13 @@
+import React, {ComponentType} from 'react';
+import {style} from "./style";
+
+export const CallBackSuccess: ComponentType<any> = ({configurationName}) =>  (<><div className="oidc-callback" style={style}>
+  <div className="oidc-callback__container">
+    <h1 className="oidc-callback__title">Authentication complete for {configurationName}</h1>
+    <p className="oidc-callback__content">You will be redirected to your application.</p>
+  </div>
+</div>
+<div>
+</div>
+</>
+);

package/src/override/Loading.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType } from "react";
+import {style} from "./style";
+
+const Loading :  ComponentType<any> = ({children, configurationName}) => (
+  <>
+      <span className="oidc-loading" style={style}>
+    Loading for {configurationName}
+  </span>
+      </>
+);
+
+export default Loading;

package/src/override/ServiceWorkerNotSupported.component.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {ComponentType} from "react";
+import {style} from "./style";
+
+const ServiceWorkerNotSupported :  ComponentType<any> = ({configurationName}) => (
+  <><div className="oidc-serviceworker" style={style}>
+    <div className="oidc-serviceworker__container">
+      <h1 className="oidc-serviceworker__title">Unable to authenticate on this browser for {configurationName}</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/override/SessionLost.component.tsx

@@ -0,0 +1,21 @@
+import React, {ComponentType} from 'react';
+import {style} from "./style"
+import {useOidc} from "../oidc";
+
+export const SessionLost: ComponentType<any> = ({configurationName}) => {
+    const { login} = useOidc(configurationName);
+
+    return (<>
+      <div className="oidc-session-lost" style={style}>
+        <div className="oidc-session-lost__container">
+          <h1 className="oidc-session-lost__title">Session timed out for {configurationName}</h1>
+          <p className="oidc-session-lost__content">
+              Your session has expired. Please re-authenticate.
+          </p>
+            <button type="button" className="btn btn-primary" onClick={() => login(null)}>Login</button>
+        </div>
+      </div>
+    </>)
+};
+
+export default SessionLost;

package/src/override/style.ts

@@ -0,0 +1,10 @@
+export const style = {
+    "color": "rgb(53,110,255)",
+    "backgroundColor": "rgb(255 255 255 / 88%)",
+    "position": "absolute",
+    "zIndex": 1000,
+    "top": "0px",
+    "bottom": "0px",
+    "right": "0px",
+    "left": "0px",
+};

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';