From d2f4cf74b2fdf97d499d5210d0315591618edced Mon Sep 17 00:00:00 2001
From: kosciolek <45483493+kosciolek@users.noreply.github.com>
Date: Mon, 3 Jul 2023 23:50:48 +0200
Subject: [PATCH] WIP: delegate SW registration to the user

---
 packages/react/src/oidc/vanilla/initWorker.ts |  20 +--
 packages/react/src/oidc/vanilla/login.ts      |   4 +-
 packages/react/src/oidc/vanilla/logout.ts     |   2 +-
 packages/react/src/oidc/vanilla/oidc.ts       |  10 +-
 .../react/src/oidc/vanilla/renewTokens.ts     |   2 +-
 packages/react/src/oidc/vanilla/types.ts      |   1 +
 .../public/main-service-worker.js             |   7 +
 packages/vanilla-demo/src/index.tsx           | 128 +++++++++---------
 8 files changed, 85 insertions(+), 89 deletions(-)
 create mode 100644 packages/vanilla-demo/public/main-service-worker.js

diff --git a/packages/react/src/oidc/vanilla/initWorker.ts b/packages/react/src/oidc/vanilla/initWorker.ts
index d1e052dab..69461d711 100644
--- a/packages/react/src/oidc/vanilla/initWorker.ts
+++ b/packages/react/src/oidc/vanilla/initWorker.ts
@@ -151,7 +151,7 @@ const sendMessageAsync = (registration) => (data) => {
     });
 };
 
-export const initWorkerAsync = async(serviceWorkerRelativeUrl, configurationName) => {
+export const initWorkerAsync = async(serviceWorkerRelativeUrl, configurationName, noAutoRegister) => {
     if (typeof window === 'undefined' || typeof navigator === 'undefined' || !navigator.serviceWorker || !serviceWorkerRelativeUrl) {
         return null;
     }
@@ -175,8 +175,7 @@ export const initWorkerAsync = async(serviceWorkerRelativeUrl, configurationName
     if (excludeOs(operatingSystem)) {
         return null;
     }
-
-    const registration = await navigator.serviceWorker.register(serviceWorkerRelativeUrl);
+    const registration = await (noAutoRegister ? navigator.serviceWorker.getRegistration() : navigator.serviceWorker.register(serviceWorkerRelativeUrl));
 
     try {
         await navigator.serviceWorker.ready;
@@ -188,21 +187,6 @@ export const initWorkerAsync = async(serviceWorkerRelativeUrl, configurationName
         return await registration.unregister();
     };
 
-    registration.addEventListener('updatefound', () => {
-        const newWorker = registration.installing;
-        newWorker.addEventListener('statechange', () => {
-            switch (newWorker.state) {
-                case 'installed':
-                    if (navigator.serviceWorker.controller) {
-                        registration.unregister().then(() => {
-                            window.location.reload();
-                        });
-                    }
-                    break;
-            }
-        });
-    });
-
     const clearAsync = async (status) => {
         return sendMessageAsync(registration)({ type: 'clear', data: { status }, configurationName });
     };
diff --git a/packages/react/src/oidc/vanilla/login.ts b/packages/react/src/oidc/vanilla/login.ts
index f738b1791..8ad5a5701 100644
--- a/packages/react/src/oidc/vanilla/login.ts
+++ b/packages/react/src/oidc/vanilla/login.ts
@@ -38,7 +38,7 @@ export const defaultLoginAsync = (window, configurationName, configuration:OidcC
                 extraFinal.nonce = generateRandom(12);
             }
             const nonce = { nonce: extraFinal.nonce };
-            const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, configurationName);
+            const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, configurationName, configuration.service_worker_no_auto_register);
             const oidcServerConfiguration = await initAsync(configuration.authority, configuration.authority_configuration);
             let storage;
             if (serviceWorker) {
@@ -82,7 +82,7 @@ export const loginCallbackAsync = (oidc) => async (isSilentSignin = false) => {
         const oidcServerConfiguration = await oidc.initAsync(authority, configuration.authority_configuration);
         const queryParams = getParseQueryStringFromLocation(window.location.href);
         const sessionState = queryParams.session_state;
-        const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, oidc.configurationName);
+        const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, oidc.configurationName, configuration.service_worker_no_auto_register);
         let storage;
         let nonceData;
         let getLoginParams;
diff --git a/packages/react/src/oidc/vanilla/logout.ts b/packages/react/src/oidc/vanilla/logout.ts
index 76296ecfb..8b94b4460 100644
--- a/packages/react/src/oidc/vanilla/logout.ts
+++ b/packages/react/src/oidc/vanilla/logout.ts
@@ -15,7 +15,7 @@ export const destroyAsync = (oidc) => async (status) => {
     if (oidc.checkSessionIFrame) {
         oidc.checkSessionIFrame.stop();
     }
-    const serviceWorker = await initWorkerAsync(oidc.configuration.service_worker_relative_url, oidc.configurationName);
+    const serviceWorker = await initWorkerAsync(oidc.configuration.service_worker_relative_url, oidc.configurationName, oidc.configuration.service_worker_no_auto_register);
     if (!serviceWorker) {
         const session = initSession(oidc.configurationName, oidc.configuration.storage);
         await session.clearAsync(status);
diff --git a/packages/react/src/oidc/vanilla/oidc.ts b/packages/react/src/oidc/vanilla/oidc.ts
index 98d7037d4..1a0a255ea 100644
--- a/packages/react/src/oidc/vanilla/oidc.ts
+++ b/packages/react/src/oidc/vanilla/oidc.ts
@@ -201,7 +201,7 @@ Please checkout that you are using OIDC hook inside a <OidcProvider configuratio
                 });
             }
 
-            const serviceWorker = await initWorkerAsync(this.configuration.service_worker_relative_url, this.configurationName);
+            const serviceWorker = await initWorkerAsync(this.configuration.service_worker_relative_url, this.configurationName, this.configuration.service_worker_no_auto_register);
             const storage = serviceWorker ? window.localStorage : null;
             return await fetchFromIssuer(this.getFetch())(authority, this.configuration.authority_time_cache_wellknowurl_in_second ?? 60 * 60, storage, this.configuration.authority_timeout_wellknowurl_in_millisecond);
         };
@@ -226,7 +226,7 @@ Please checkout that you are using OIDC hook inside a <OidcProvider configuratio
             try {
                 const configuration = this.configuration;
                 const oidcServerConfiguration = await this.initAsync(configuration.authority, configuration.authority_configuration);
-                serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, this.configurationName);
+                serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, this.configurationName, configuration.service_worker_no_auto_register);
                 if (serviceWorker) {
                     const { tokens } = await serviceWorker.initAsync(oidcServerConfiguration, 'tryKeepExistingSessionAsync', configuration);
                     if (tokens) {
@@ -326,7 +326,7 @@ Please checkout that you are using OIDC hook inside a <OidcProvider configuratio
             const parsedTokens = response.tokens;
             // @ts-ignore
             this.tokens = parsedTokens;
-            const serviceWorker = await initWorkerAsync(this.configuration.service_worker_relative_url, this.configurationName);
+            const serviceWorker = await initWorkerAsync(this.configuration.service_worker_relative_url, this.configurationName, this.configuration.service_worker_no_auto_register);
             if (!serviceWorker) {
                 const session = initSession(this.configurationName, this.configuration.storage);
                 session.setTokens(parsedTokens);
@@ -372,7 +372,7 @@ Please checkout that you are using OIDC hook inside a <OidcProvider configuratio
         const localsilentLoginAsync = async () => {
             try {
                 let loginParams;
-                const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, this.configurationName);
+                const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, this.configurationName, configuration.service_worker_no_auto_register);
                 if (serviceWorker) {
                     loginParams = serviceWorker.getLoginParams(this.configurationName);
                 } else {
@@ -496,7 +496,7 @@ Please checkout that you are using OIDC hook inside a <OidcProvider configuratio
         }
         let nonce = nullNonce;
         const oidcServerConfiguration = await this.initAsync(configuration.authority, configuration.authority_configuration);
-        const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, configurationName);
+        const serviceWorker = await initWorkerAsync(configuration.service_worker_relative_url, configurationName, configuration.service_worker_no_auto_register);
         if (serviceWorker) {
             const { status, tokens } = await serviceWorker.initAsync(oidcServerConfiguration, 'syncTokensAsync', configuration);
             if (status === 'LOGGED_OUT') {
diff --git a/packages/react/src/oidc/vanilla/renewTokens.ts b/packages/react/src/oidc/vanilla/renewTokens.ts
index a0e23d0c4..1a82a80aa 100644
--- a/packages/react/src/oidc/vanilla/renewTokens.ts
+++ b/packages/react/src/oidc/vanilla/renewTokens.ts
@@ -9,7 +9,7 @@ export async function renewTokensAndStartTimerAsync(oidc, refreshToken, forceRef
     const updateTokens = (tokens) => { oidc.tokens = tokens; };
     const { tokens, status } = await oidc.synchroniseTokensAsync(refreshToken, 0, forceRefresh, extras, updateTokens);
 
-    const serviceWorker = await initWorkerAsync(oidc.configuration.service_worker_relative_url, oidc.configurationName);
+    const serviceWorker = await initWorkerAsync(oidc.configuration.service_worker_relative_url, oidc.configurationName, oidc.configuration.service_worker_no_auto_register);
     if (!serviceWorker) {
         const session = initSession(oidc.configurationName, oidc.configuration.storage);
         await session.setTokens(oidc.tokens);
diff --git a/packages/react/src/oidc/vanilla/types.ts b/packages/react/src/oidc/vanilla/types.ts
index c2e46334b..41e5f9a9d 100644
--- a/packages/react/src/oidc/vanilla/types.ts
+++ b/packages/react/src/oidc/vanilla/types.ts
@@ -19,6 +19,7 @@ export type OidcConfiguration = {
     service_worker_relative_url?:string;
     service_worker_only?:boolean;
     service_worker_convert_all_requests_to_cors?:boolean;
+    service_worker_no_auto_register?: boolean;
     extras?:StringMap;
     token_request_extras?:StringMap;
     storage?: Storage;
diff --git a/packages/vanilla-demo/public/main-service-worker.js b/packages/vanilla-demo/public/main-service-worker.js
new file mode 100644
index 000000000..039998233
--- /dev/null
+++ b/packages/vanilla-demo/public/main-service-worker.js
@@ -0,0 +1,7 @@
+console.log('my worker registered');
+
+self.addEventListener('fetch', (e) => {
+  console.log('fetch', e.request.url);
+});
+
+importScripts('OidcServiceWorker.js');
diff --git a/packages/vanilla-demo/src/index.tsx b/packages/vanilla-demo/src/index.tsx
index 9d7744ea2..15203f25f 100644
--- a/packages/vanilla-demo/src/index.tsx
+++ b/packages/vanilla-demo/src/index.tsx
@@ -86,66 +86,70 @@ export const configuration = {
     // monitor_session: true,
 };
 
-const href = window.location.href;
-
-const vanillaOidc = VanillaOidc.getOrCreate(fetch)(configuration);
-
-console.log(href);
-
-
-vanillaOidc.tryKeepExistingSessionAsync().then(() => {
-    if(href.includes(configuration.redirect_uri)){
-        // @ts-ignore
-        element.innerHTML = `<div>
-            <h1>@axa-fr/vanilla-oidc demo</h1>
-            <h2>Loading callback</h2>
-        </div>`;
-        vanillaOidc.loginCallbackAsync().then(()=>{
-            router.getCustomHistory().replaceState("/");
-            // @ts-ignore
-            window.logout = () =>  vanillaOidc.logoutAsync();
-            let tokens = vanillaOidc.tokens;
-            // @ts-ignore
-            element.innerHTML = `<div>
-            <h1>@axa-fr/vanilla-oidc demo</h1>
-            <button onclick="window.logout()">Logout</button>
-            <h2>Authenticated</h2>
-            <pre>${JSON.stringify(tokens,null,'\t')}</pre>
-        </div>`
-        });
-        return
-    }
-
-    let tokens = vanillaOidc.tokens;
-
-    if(tokens){
-
-        // @ts-ignore
-        window.logout = () =>  vanillaOidc.logoutAsync();
-        // @ts-ignore
-        element.innerHTML = `<div>
-            <h1>@axa-fr/vanilla-oidc demo</h1>
-            <button onclick="window.logout()">Logout</button>
-            <h2>Authenticated</h2>
-            <pre>${JSON.stringify(tokens,null,'\t')}</pre>
-        </div>`
-        
-    }
-    else {
-        // @ts-ignore
-        window.login= () =>  {
-            // @ts-ignore
-            element.innerHTML = `<div>
-            <h1>@axa-fr/vanilla-oidc demo</h1>
-            <h2>Loading</h2>
-        </div>`;
-            vanillaOidc.loginAsync("/")
-        };
-        // @ts-ignore
-        element.innerHTML = `<div>
-            <h1>@axa-fr/vanilla-oidc demo</h1>
-            <button onclick="window.login()">Login</button>
-        </div>`
-    }
-})
+navigator.serviceWorker.register('main-service-worker.js')
+  // wip: let's wait 1s, to test what happens if our service worker loads earlier, before any axa-oidc stuff runs
+  .then(() => new Promise(r => setTimeout(r, 1000))).then(() => {
+  const href = window.location.href;
+
+  const vanillaOidc = VanillaOidc.getOrCreate(() => fetch)(configuration);
+  
+  console.log(href);
+  
+  
+  vanillaOidc.tryKeepExistingSessionAsync().then(() => {
+      if(href.includes(configuration.redirect_uri)){
+          // @ts-ignore
+          element.innerHTML = `<div>
+              <h1>@axa-fr/vanilla-oidc demo</h1>
+              <h2>Loading callback</h2>
+          </div>`;
+          vanillaOidc.loginCallbackAsync().then(()=>{
+              router.getCustomHistory().replaceState("/");
+              // @ts-ignore
+              window.logout = () =>  vanillaOidc.logoutAsync();
+              let tokens = vanillaOidc.tokens;
+              // @ts-ignore
+              element.innerHTML = `<div>
+              <h1>@axa-fr/vanilla-oidc demo</h1>
+              <button onclick="window.logout()">Logout</button>
+              <h2>Authenticated</h2>
+              <pre>${JSON.stringify(tokens,null,'\t')}</pre>
+          </div>`
+          });
+          return
+      }
+  
+      let tokens = vanillaOidc.tokens;
+  
+      if(tokens){
+  
+          // @ts-ignore
+          window.logout = () =>  vanillaOidc.logoutAsync();
+          // @ts-ignore
+          element.innerHTML = `<div>
+              <h1>@axa-fr/vanilla-oidc demo</h1>
+              <button onclick="window.logout()">Logout</button>
+              <h2>Authenticated</h2>
+              <pre>${JSON.stringify(tokens,null,'\t')}</pre>
+          </div>`
+          
+      }
+      else {
+          // @ts-ignore
+          window.login= () =>  {
+              // @ts-ignore
+              element.innerHTML = `<div>
+              <h1>@axa-fr/vanilla-oidc demo</h1>
+              <h2>Loading</h2>
+          </div>`;
+              vanillaOidc.loginAsync("/")
+          };
+          // @ts-ignore
+          element.innerHTML = `<div>
+              <h1>@axa-fr/vanilla-oidc demo</h1>
+              <button onclick="window.login()">Login</button>
+          </div>`
+      }
+  })
+});