Mysky autologin stored settings and logout

package.json

@@ -43,6 +43,7 @@
     "testEnvironment": "jsdom"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "buffer": "^6.0.3",
     "confusables": "^1.0.0",
     "crypto-browserify": "^3.12.0",
@@ -72,6 +73,7 @@
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "autoprefixer": "^10.4.0",
+    "core-js": "^3.20.0",
     "eslint": "^8.5.0",
     "eslint-plugin-jsdoc": "^37.4.0",
     "husky": "^7.0.4",

scripts/ui.ts

@@ -12,8 +12,7 @@ import {
 import { MySky, SkynetClient } from "skynet-js";
 
 import { hashWithSalt } from "../src/crypto";
-import { login, register } from "../src/portal-account";
-import { checkStoredSeed, EMAIL_STORAGE_KEY, SEED_STORAGE_KEY } from "../src/mysky";
+import { checkStoredSeed, EMAIL_STORAGE_KEY, PORTAL_LOGIN_COMPLETE_SENTINEL_KEY, SEED_STORAGE_KEY } from "../src/mysky";
 import {
   getPermissionsProviderUrl,
   relativePermissionsDisplayUrl,
@@ -32,6 +31,9 @@ let parentConnection: Connection | null = null;
 
 // Set value of dev on load.
 let dev = false;
+/// #if ENV == 'dev'
+dev = true;
+/// #endif
 
 // ======
 // Events
@@ -65,10 +67,6 @@ window.onerror = function (error: any) {
 // TODO: Wrap in a try-catch block? Does onerror handler catch thrown errors?
 // Code that runs on page load.
 window.onload = () => {
-  /// #if ENV == 'dev'
-  dev = true;
-  /// #endif
-
   void init();
 };
 
@@ -117,6 +115,9 @@ async function requestLoginAccess(permissions: Permission[]): Promise<[boolean,
   // Save the seed and email in local storage.
   saveSeedAndEmail(seed, email);
 
+  // Wait for Main MySky to login successfully.
+  await waitForMySkyPortalLogin();
+
   // Pass in any request permissions and get a permissions response.
   const permissionsResponse = await getPermissions(seed, permissions);
 
@@ -156,12 +157,7 @@ async function checkBrowserSupported(): Promise<void> {
  * then we display the signin-connect page where the user may connect his email
  * on signin.
  *
- * 5. If we got the email, then we register/login to set the JWT cookie.
- *
- * 6. If the user provided a new email at some point, then we save it in user
- * settings, after having successfully connected to a portal account.
- *
- * (7. We return the seed and email and save them in storage in another
+ * (5. We return the seed and email and save them in storage in another
  * function, which triggers Main MySky's storage listener.)
  *
  * @returns - The seed and email.
@@ -208,16 +204,6 @@ async function getSeedAndEmail(): Promise<[Uint8Array, string | null]> {
     }
   }
 
-  // Register/login.
-  if (email) {
-    await connectToPortalAccount(seed, email);
-  }
-
-  // TODO: Save the new provided email in user settings.
-  if (emailProvidedByUser) {
-    await saveEmailInSettings();
-  }
-
   return [seed, email];
 }
 
@@ -280,39 +266,6 @@ async function getPermissions(seed: Uint8Array, permissions: Permission[]): Prom
   return permissionsResponse;
 }
 
-/**
- * Connects to a portal account by either registering or logging in to an
- * existing account. The resulting cookie will be set on the MySky domain and
- * takes effect in Main MySky immediate.
- *
- * NOTE: Main MySky will register "auto re-login"; we don't have to do that
- * here.
- *
- * @param seed - The user seed.
- * @param email - The user email.
- */
-async function connectToPortalAccount(seed: Uint8Array, email: string): Promise<void> {
-  // Register and get the JWT cookie.
-  //
-  // Make requests to login and register in parallel. At most one can succeed,
-  // and this saves a lot of time.
-  try {
-    await Promise.any([register(client, seed, email), login(client, seed, email)]);
-  } catch (e) {
-    throw new Error(`Could not register or login: ${e}`);
-  }
-}
-
-// TODO
-/**
- * If the email was provided by the user, save it in user settings.
- *
- * @returns - An empty promise.
- */
-async function saveEmailInSettings(): Promise<void> {
-  return;
-}
-
 /**
  * Gets the user's seed provider display URL if set, or the default.
  *
@@ -494,6 +447,26 @@ async function setupAndRunDisplay<T>(displayUrl: string, methodName: string, ...
     });
 }
 
+/**
+ * Waits for portal login on Main MySky to complete.
+ */
+async function waitForMySkyPortalLogin(): Promise<void> {
+  return new Promise((resolve, reject) =>
+    window.addEventListener("storage", async ({ key, newValue }: StorageEvent) => {
+      if (key !== PORTAL_LOGIN_COMPLETE_SENTINEL_KEY) {
+        return;
+      }
+
+      // Check for errors from Main MySky.
+      if (newValue !== "") {
+        reject(newValue);
+      }
+
+      resolve();
+    })
+  );
+}
+
 // =======
 // Helpers
 // =======
@@ -510,8 +483,9 @@ async function catchError(errorMsg: string): Promise<void> {
 
 /**
  * Stores the root seed and email in local storage. This triggers the storage
- * event listener in the main invisible MySky frame. Main MySky needs the email
- * so that it can login again when the JWT cookie expires.
+ * event listener in the main invisible MySky frame. This switches to the
+ * preferred portal, registers or logs in to the portal account and sets up
+ * login again when the JWT cookie expires. See `setUpStorageEventListener`.
  *
  * NOTE: If ENV == 'dev' the seed is salted before storage.
  *