Web worker support for auth-next (#3413)

* Web worker support for auth-next

* PR feedback

* Cleanup build tree a bit

Author: avolkovi

packages-exp/auth-exp/demo/.eslintignore

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  extends: '../../../config/.eslintrc.js',
+  parserOptions: {
+    project: 'tsconfig.json',
+    // to make vscode-eslint work with monorepo
+    // https://github.com/typescript-eslint/typescript-eslint/issues/251#issuecomment-463943250
+    tsconfigRootDir: __dirname
+  },
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }]
+  }
+};

packages-exp/auth-exp/demo/.eslintrc.js

@@ -4,19 +4,20 @@
   "private": true,
   "description": "Demo for Auth TS SDK",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
-  "bundle": "dist/bundle.js",
-  "files": [
-    "dist"
-  ],
+  "bundle": "public/dist/index.js",
+  "worker": "public/dist/web-worker.js",
   "scripts": {
-    "build": "sh build.sh",
-    "demo": "sh build.sh && firebase serve",
+    "lint": "eslint -c .eslintrc.js '**/*.ts' --ignore-path '../../../.gitignore'",
+    "lint:fix": "eslint --fix -c .eslintrc.js '**/*.ts' --ignore-path '../../../.gitignore'",
+    "demo": "rollup -c && firebase serve",
+    "build": "rollup -c",
     "build:deps": "lerna run --scope @firebase/'{app-exp,auth-exp}' --include-dependencies build",
     "dev": "rollup -c -w"
   },
   "peerDependencies": {
     "@firebase/app-exp": "0.x",
     "@firebase/app-types-exp": "0.x",
+    "@firebase/auth-exp": "0.x",
     "@firebase/auth-types-exp": "0.x"
   },
   "dependencies": {

packages-exp/auth-exp/demo/build.sh

@@ -9,7 +9,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
             integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A=="
             crossorigin="anonymous"></script>
-    <script src="dist/bundle.js"></script>
+    <script src="dist/index.js"></script>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
           rel="stylesheet"
           integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="

packages-exp/auth-exp/demo/package.json

@@ -14,14 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import resolve from '@rollup/plugin-node-resolve';
 import strip from '@rollup/plugin-strip';
-import pkg from './package.json';
+import typescriptPlugin from 'rollup-plugin-typescript2';
+import typescript from 'typescript';
 
-const deps = Object.keys(
-  Object.assign({}, pkg.peerDependencies, pkg.dependencies)
-);
+import pkg from './package.json';
 
 /**
  * Common plugins for all builds
@@ -41,6 +39,26 @@ const es5Builds = [
     input: 'src/index.js',
     output: [{ file: pkg.bundle, format: 'esm', sourcemap: true }],
     plugins: commonPlugins
+  },
+  {
+    input: 'src/worker/index.ts',
+    output: [{ file: pkg.worker, format: 'esm', sourcemap: true }],
+    plugins: [
+      ...commonPlugins,
+      typescriptPlugin({
+        typescript,
+        tsconfigOverride: {
+          compilerOptions: {
+            lib: [
+              // TODO: remove this
+              'dom',
+              'es2015',
+              'webworker'
+            ]
+          }
+        }
+      })
+    ]
   }
 ];
 

packages-exp/auth-exp/demo/public/index.html

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const config: object;

packages-exp/auth-exp/demo/rollup.config.js

@@ -59,7 +59,7 @@ import {
   linkWithPopup,
   reauthenticateWithPopup,
   browserPopupRedirectResolver
-} from '@firebase/auth-exp';
+} from '@firebase/auth-exp/dist/index.browser';
 
 import { config } from './config';
 import {
@@ -79,6 +79,7 @@ let applicationVerifier = null;
 let multiFactorErrorResolver = null;
 let selectedMultiFactorHint = null;
 let recaptchaSize = 'normal';
+let webWorker = null;
 
 // The corresponding Font Awesome icons for each provider.
 const providersIcons = {
@@ -1565,20 +1566,27 @@ function checkDatabaseAuthAccess() {
   }
 }
 
-/** Runs all web worker tests if web workers are supported. */
+/**
+ * Runs various Firebase Auth tests in a web worker environment and confirms the
+ * expected behavior. This is useful for manual testing in different browsers.
+ * @param {string} googleIdToken The Google ID token to sign in with.
+ */
 function onRunWebWorkTests() {
-  alertNotImplemented();
-  // if (!webWorker) {
-  //   alertError('Error: Web workers are not supported in the current browser!');
-  //   return;
-  // }
-  // var onError = function(error) {
-  //   alertError('Error code: ' + error.code + ' message: ' + error.message);
-  // };
-  // auth.signInWithPopup(new GoogleAuthProvider())
-  //     .then(function(result) {
-  //       runWebWorkerTests(result.credential.idToken);
-  //     }, onError);
+  if (!webWorker) {
+    alertError('Error: Web workers are not supported in the current browser!');
+    return;
+  }
+  // auth.signInWithPopup(new GoogleAuthProvider()).then(
+  //   (result) => {
+  webWorker.postMessage({
+    type: 'RUN_TESTS'
+    // googleIdToken: result.credential.idToken
+  });
+  //   },
+  //   error => {
+  //     alertError('Error code: ' + error.code + ' message: ' + error.message);
+  //   }
+  // );
 }
 
 /** Runs service worker tests if supported. */
@@ -1702,21 +1710,20 @@ function initApp() {
 
   // Install servicerWorker if supported.
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker
-      .register('/service-worker.js', { scope: '/' })
-      .then(reg => {
-        // Registration worked.
-        console.log('Registration succeeded. Scope is ' + reg.scope);
-      })
-      .catch(error => {
-        // Registration failed.
-        console.log('Registration failed with ' + error.message);
-      });
+    // navigator.serviceWorker
+    //   .register('/service-worker.js', { scope: '/' })
+    //   .then(reg => {
+    //     // Registration worked.
+    //     console.log('Registration succeeded. Scope is ' + reg.scope);
+    //   })
+    //   .catch(error => {
+    //     // Registration failed.
+    //     console.log('Registration failed with ' + error.message);
+    //   });
   }
 
-  let webWorker = null;
   if (window.Worker) {
-    webWorker = new Worker('/web-worker.js');
+    webWorker = new Worker('/dist/web-worker.js');
     /**
      * Handles the incoming message from the web worker.
      * @param {!Object} e The message event received.
@@ -1756,24 +1763,6 @@ function initApp() {
     }
   }
 
-  /**
-   * Runs various Firebase Auth tests in a web worker environment and confirms the
-   * expected behavior. This is useful for manual testing in different browsers.
-   * @param {string} googleIdToken The Google ID token to sign in with.
-   */
-  function runWebWorkerTests(googleIdToken) {
-    if (webWorker) {
-      webWorker.postMessage({
-        type: 'RUN_TESTS',
-        googleIdToken
-      });
-    } else {
-      alertError(
-        'Error: Web workers are not supported in the current browser!'
-      );
-    }
-  }
-
   // We check for redirect result to refresh user's data.
   // TODO: redirect result
   // auth.getRedirectResult().then(function(response) {