[CORL-1148] Chrome Local Storage Issues (#2994)

* fix: moved storage access inside try/catch

* chore: version bump

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -31137,7 +31137,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

src/core/build/createWebpackConfig.ts

@@ -718,16 +718,6 @@ export default function createWebpackConfig(
             filename: "storyButton.html",
             template: paths.appEmbedStoryButtonHTML,
             inject: "head",
-          }),
-          new HtmlWebpackPlugin({
-            filename: "amp.html",
-            template: paths.appEmbedAMPHTML,
-            inject: "head",
-          }),
-          new HtmlWebpackPlugin({
-            filename: "storyAMP.html",
-            template: paths.appEmbedStoryAMPHTML,
-            inject: false,
           })
         ),
         ...ifBuild(

src/core/build/paths.ts

@@ -53,8 +53,6 @@ export default {
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
   appEmbedStoryHTML: resolveSrc("core/client/embed/story.html"),
   appEmbedStoryButtonHTML: resolveSrc("core/client/embed/storyButton.html"),
-  appEmbedAMPHTML: resolveSrc("core/client/embed/amp.html"),
-  appEmbedStoryAMPHTML: resolveSrc("core/client/embed/storyAMP.html"),
 
   appDistStatic: resolveApp("dist/static"),
   appPublic: resolveApp("public"),

src/core/client/admin/local/__snapshots__/initLocalState.spec.ts.snap

@@ -5,6 +5,7 @@ exports[`get access token from url 1`] = `
   \\"__id\\": \\"client:root.local\\",
   \\"__typename\\": \\"Local\\",
   \\"accessToken\\": \\"eyJraWQiOiI5NmM4MDY2YS1kOTg3LTQyODItODNmOS1kYTUxNjc5N2Y5ZmMiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzMWIyNjU5MS00ZTlhLTQzODgtYTdmZi1lMWJkYzVkOTdjY2UifQ==.\\",
+  \\"accessTokenExp\\": null,
   \\"accessTokenJTI\\": \\"31b26591-4e9a-4388-a7ff-e1bdc5d97cce\\",
   \\"redirectPath\\": null,
   \\"authView\\": \\"SIGN_IN\\",
@@ -24,6 +25,9 @@ exports[`init local state 1`] = `
   \\"client:root.local\\": {
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
+    \\"accessToken\\": null,
+    \\"accessTokenExp\\": null,
+    \\"accessTokenJTI\\": null,
     \\"redirectPath\\": null,
     \\"authView\\": \\"SIGN_IN\\",
     \\"authError\\": null

src/core/client/auth/local/__snapshots__/initLocalState.spec.ts.snap

@@ -5,6 +5,7 @@ exports[`get access token from url 1`] = `
   \\"__id\\": \\"client:root.local\\",
   \\"__typename\\": \\"Local\\",
   \\"accessToken\\": \\"eyJraWQiOiI5NmM4MDY2YS1kOTg3LTQyODItODNmOS1kYTUxNjc5N2Y5ZmMiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzMWIyNjU5MS00ZTlhLTQzODgtYTdmZi1lMWJkYzVkOTdjY2UifQ==.\\",
+  \\"accessTokenExp\\": null,
   \\"accessTokenJTI\\": \\"31b26591-4e9a-4388-a7ff-e1bdc5d97cce\\",
   \\"view\\": \\"SIGN_IN\\",
   \\"error\\": null
@@ -23,6 +24,9 @@ exports[`init local state 1`] = `
   \\"client:root.local\\": {
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
+    \\"accessToken\\": null,
+    \\"accessTokenExp\\": null,
+    \\"accessTokenJTI\\": null,
     \\"view\\": \\"SIGN_IN\\",
     \\"error\\": null
   }

src/core/client/embed/Coral.ts

@@ -18,7 +18,6 @@ export interface Config {
   enableDeprecatedEvents?: boolean;
   /** Allow setting className of body tag inside iframe */
   bodyClassName?: string;
-  amp?: boolean;
 }
 
 export function createStreamEmbed(config: Config): StreamEmbed {
@@ -33,7 +32,7 @@ export function createStreamEmbed(config: Config): StreamEmbed {
   return create({
     title: "Coral Embed Stream",
     storyID: config.storyID || query.storyID,
-    storyURL: config.storyURL || query.storyURL || resolveStoryURL(),
+    storyURL: config.storyURL || resolveStoryURL(),
     commentID: config.commentID || query.commentID,
     id: config.id || "coral-embed-stream",
     rootURL: config.rootURL || getLocationOrigin(),
@@ -42,6 +41,5 @@ export function createStreamEmbed(config: Config): StreamEmbed {
     accessToken: config.accessToken,
     bodyClassName: config.bodyClassName,
     enableDeprecatedEvents: config.enableDeprecatedEvents,
-    amp: config.amp,
   });
 }

src/core/client/embed/StreamEmbed.ts

@@ -35,7 +35,6 @@ export interface StreamEmbedConfig {
   accessToken?: string;
   bodyClassName?: string;
   enableDeprecatedEvents?: boolean;
-  amp?: boolean;
 }
 
 export class StreamEmbed {
@@ -138,7 +137,7 @@ export class StreamEmbed {
 
     const streamDecorators: ReadonlyArray<Decorator> = [
       withIOSSafariWidthWorkaround,
-      withAutoHeight(Boolean(this.config.amp)),
+      withAutoHeight,
       withClickEvent,
       withSetCommentID,
       withEventEmitter(

src/core/client/embed/amp.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Coral – AMP Embed Stream</title>
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
-    <script>
-      const CoralStreamEmbed = Coral.createStreamEmbed({
-        id: "coralStreamEmbed",
-        rootURL: "http://localhost:8080",
-        amp: true,
-      });
-      window.CoralStreamEmbed = CoralStreamEmbed;
-      CoralStreamEmbed.render();
-    </script>
-  </body>
-</html>

src/core/client/embed/decorators/withAutoHeight.ts

@@ -1,22 +1,12 @@
 import { Decorator } from "./types";
 
-const withAutoHeight: (amp: boolean) => Decorator = (amp) => (pym) => {
+const withAutoHeight: Decorator = (pym) => {
   // Resize parent iframe height when child height changes
   let cachedHeight: string;
   pym.onMessage("height", (height: string) => {
     if (height !== cachedHeight) {
       pym.iframe.style.height = `${height}px`;
       cachedHeight = height;
-      if (amp) {
-        window.parent.postMessage(
-          {
-            sentinel: "amp",
-            type: "embed-size",
-            height: Number.parseInt(height, 10) > 100 ? height : 100,
-          },
-          "*"
-        );
-      }
     }
   });
 };

src/core/client/embed/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Coral – Embed Stream</title>
+    <title>Coral 5.0 – Embed Stream</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -16,10 +16,9 @@
   <body>
     <p style="text-align: center">
       <a href="/admin">Admin</a> | <a href="/story.html">Story</a> |
-      <a href="/storyButton.html">Story With Button</a> |
-      <a href="/storyAMP.html"> AMP</a>
+      <a href="/storyButton.html">Story With Button</a>
     </p>
-    <h1 style="text-align: center">Coral – Embed Stream</h1>
+    <h1 style="text-align: center">Coral 5.0 – Embed Stream</h1>
     <div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
     <script>
       const CoralStreamEmbed = Coral.createStreamEmbed({

src/core/client/embed/story.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Coral – Embed Stream – Story</title>
+    <title>Coral 5.0 – Embed Stream – Story</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
@@ -16,10 +16,9 @@
   <body>
     <p style="text-align: center">
       <a href="/admin">Admin</a> | <a href="/">Default</a> |
-      <a href="/storyButton.html">Story With Button</a> |
-      <a href="/storyAMP.html"> AMP</a>
+      <a href="/storyButton.html">Story With Button</a>
     </p>
-    <h1 style="text-align: center">Coral – Story</h1>
+    <h1 style="text-align: center">Coral 5.0 – Story</h1>
     <p>
       <a href="#coralStreamEmbed"><span class="coral-count"></span></a>&nbsp;
     </p>

src/core/client/embed/storyAMP.html

@@ -1,34 +0,0 @@
-<!doctype html>
-<html amp lang="en">
-  <head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
-    <title>Coral AMP</title>
-    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-    <style amp-custom>
-      body {
-        margin: 0;
-        padding: 0 100px 50px 100px;
-      }
-    </style>
-  </head>
-  <body>
-    <p style="text-align: center">
-      <a href="/admin">Admin</a> | <a href="/">Default</a> | <a href="/story.html">Story</a> |
-      <a href="/storyButton.html">Story With Button</a>
-    </p>
-    <h1 style="text-align: center">Coral – AMP</h1>
-    <amp-iframe
-      width=600 height=140
-      layout="responsive"
-      sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
-      resizable
-      src="http://127.0.0.1:8080/amp.html?storyURL=http://localhost:8080/storyAMP.html">
-      <div placeholder></div>
-      <div overflow tabindex=0 role=button aria-label="Read more">Read more</div>
-    </amp-iframe>
-  </body>
-</html>

src/core/client/embed/storyButton.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Coral – Embed Stream – Story with Button</title>
+    <title>Coral 5.0 – Embed Stream – Story with Button</title>
     <meta charset="utf-8" />
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
@@ -16,10 +16,9 @@
   <body>
     <p style="text-align: center">
       <a href="/admin">Admin</a> | <a href="/">Default</a> |
-      <a href="/story.html">Story</a> |
-      <a href="/storyAMP.html"> AMP</a>
+      <a href="/story.html">Story</a>
     </p>
-    <h1 style="text-align: center">Coral – Story with Button</h1>
+    <h1 style="text-align: center">Coral 5.0 – Story with Button</h1>
     <p>
       <a href="#coralStreamEmbed"><span class="coral-count"></span></a>&nbsp;
     </p>

src/core/client/framework/lib/auth/auth.ts

@@ -5,11 +5,6 @@ import { Claims, computeExpiresIn, parseAccessTokenClaims } from "./helpers";
  */
 const ACCESS_TOKEN_KEY = "coral:v1:accessToken";
 
-/**
- * storage is the Storage used to retrieve/update/delete access tokens on.
- */
-const storage = localStorage;
-
 export interface AuthState {
   /**
    * accessToken is the access token issued by the server.
@@ -46,7 +41,7 @@ function parseAccessToken(accessToken: string) {
 export function retrieveAccessToken() {
   try {
     // Get the access token from storage.
-    const accessToken = storage.getItem(ACCESS_TOKEN_KEY);
+    const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
     if (!accessToken) {
       // Looks like the access token wasn't in storage.
       return;
@@ -66,7 +61,7 @@ export function retrieveAccessToken() {
 export function storeAccessToken(accessToken: string) {
   try {
     // Update the access token in storage.
-    storage.setItem(ACCESS_TOKEN_KEY, accessToken);
+    localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
   } catch (err) {
     // TODO: (wyattjoh) add error reporting around this error
     // eslint-disable-next-line no-console
@@ -79,7 +74,7 @@ export function storeAccessToken(accessToken: string) {
 
 export function deleteAccessToken() {
   try {
-    storage.removeItem(ACCESS_TOKEN_KEY);
+    localStorage.removeItem(ACCESS_TOKEN_KEY);
   } catch (err) {
     // TODO: (wyattjoh) add error reporting around this error
     // eslint-disable-next-line no-console

src/core/client/framework/lib/relay/localState.ts

@@ -38,10 +38,10 @@ export function initLocalBaseState(
     root.setLinkedRecord(local, "local");
 
     // Update the access token properties.
-    local.setValue(auth?.accessToken, "accessToken");
+    local.setValue(auth?.accessToken || null, "accessToken");
 
     // Update the claims.
-    local.setValue(auth?.claims.exp, "accessTokenExp");
-    local.setValue(auth?.claims.jti, "accessTokenJTI");
+    local.setValue(auth?.claims.exp || null, "accessTokenExp");
+    local.setValue(auth?.claims.jti || null, "accessTokenJTI");
   });
 }

src/core/client/stream/App/TabBar.tsx

@@ -6,7 +6,7 @@ import { GQLSTORY_MODE } from "coral-framework/schema";
 import CLASSES from "coral-stream/classes";
 import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
 
-type TabValue = "COMMENTS" | "PROFILE" | "CONFIGURE" | "%future added value";
+type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
 
 export interface Props {
   activeTab: TabValue;
@@ -52,12 +52,7 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
         </Tab>
       )}
       {props.showConfigureTab && (
-        <Tab
-          className={cn(CLASSES.tabBar.configure, {
-            [CLASSES.tabBar.activeTab]: props.activeTab === "CONFIGURE",
-          })}
-          tabID="CONFIGURE"
-        >
+        <Tab className={CLASSES.tabBar.configure} tabID="CONFIGURE">
           <MatchMedia gteWidth="sm">
             {(matches) =>
               matches ? (

src/core/client/stream/index.html

@@ -10,12 +10,7 @@
   <body>
     <script type="text/javascript">
       // This is only loaded in development, so include the React devtools hooks.
-      try {
-        window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      }
-      catch {
-        console.warn("React Devtools Global Hook not loaded")
-      }
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     </script>
     <div id="app"></div>
   </body>

src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap

@@ -12,6 +12,9 @@ exports[`init local state 1`] = `
   \\"client:root.local\\": {
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
+    \\"accessToken\\": null,
+    \\"accessTokenExp\\": null,
+    \\"accessTokenJTI\\": null,
     \\"commentsOrderBy\\": \\"CREATED_AT_DESC\\",
     \\"authPopup\\": {
       \\"__ref\\": \\"client:root.local.authPopup\\"

src/core/server/app/middleware/csp/tenant.ts

@@ -99,7 +99,7 @@ function generateContentSecurityPolicy(allowedOrigins: string[]) {
 
   // Only the domains that are allowed by the tenant may embed Coral.
   directives.frameAncestors =
-    allowedOrigins.length > 0 ? ["'self'", ...allowedOrigins] : ["'none'"];
+    allowedOrigins.length > 0 ? allowedOrigins : ["'none'"];
 
   // Build the directive.
   const directive = builder({ directives });

src/core/server/app/router/client.ts

@@ -17,11 +17,6 @@ import Entrypoints, { Entrypoint } from "../helpers/entrypoints";
 export interface ClientTargetHandlerOptions {
   defaultLocale: LanguageCode;
 
-  /**
-   * viewTemplate is the html template to use.
-   */
-  viewTemplate?: string;
-
   /**
    * mongo is used when trying to infer a site from the request.
    */
@@ -78,7 +73,6 @@ const clientHandler = ({
   entrypoint,
   enableCustomCSS,
   defaultLocale,
-  viewTemplate = "client",
 }: ClientTargetHandlerOptions): RequestHandler => (req, res, next) => {
   // Provide configuration to the frontend in the HTML.
   const config = {
@@ -92,7 +86,7 @@ const clientHandler = ({
   }
 
   res.render(
-    viewTemplate,
+    "client",
     { staticURI, entrypoint, enableCustomCSS, locale, config },
     (err, html) => {
       if (err) {
@@ -110,7 +104,10 @@ const clientHandler = ({
   );
 };
 
-function loadEntrypoints(manifestFile: string) {
+export function mountClientRoutes(
+  router: Router,
+  { staticURI, tenantCache, defaultLocale, mongo }: MountClientRouteOptions
+) {
   // TODO: (wyattjoh) figure out a better way of referencing paths.
   // Load the entrypoint manifest.
   const manifest = path.join(
@@ -122,17 +119,9 @@ function loadEntrypoints(manifestFile: string) {
     "..",
     "dist",
     "static",
-    manifestFile
+    "asset-manifest.json"
   );
-  return Entrypoints.fromFile(manifest);
-}
-
-export function mountClientRoutes(
-  router: Router,
-  { staticURI, tenantCache, defaultLocale, mongo }: MountClientRouteOptions
-) {
-  const manifest = "asset-manifest.json";
-  const entrypoints = loadEntrypoints(manifest);
+  const entrypoints = Entrypoints.fromFile(manifest);
   if (!entrypoints) {
     logger.error(
       { manifest },
@@ -140,17 +129,6 @@ export function mountClientRoutes(
     );
     return;
   }
-
-  const embedManifest = "embed-asset-manifest.json";
-  const embedEntrypoints = loadEntrypoints(embedManifest);
-  if (!embedEntrypoints) {
-    logger.error(
-      { manifest: embedManifest },
-      "could not load the generated manifest, client routes will remain un-mounted"
-    );
-    return;
-  }
-
   // Tenant identification middleware.
   router.use(
     tenantMiddleware({
@@ -160,16 +138,6 @@ export function mountClientRoutes(
   );
 
   // Add the embed targets.
-  router.use(
-    "/embed/stream/amp",
-    createClientTargetRouter({
-      staticURI,
-      entrypoint: embedEntrypoints.get("main"),
-      defaultLocale,
-      mongo,
-      viewTemplate: "amp",
-    })
-  );
   router.use(
     "/embed/stream",
     createClientTargetRouter({

src/core/server/app/views/amp.html

@@ -1,25 +0,0 @@
-{% import "macros.html" as macros %}
-{% extends "templates/base.html" %}
-
-{% block title %}Coral AMP{% endblock %}
-
-{% block css %}
-  <style>body { margin: 0; }</style>
-{% endblock %}
-
-{% block body %}
-  <div id='coralStreamEmbed'></div>
-  {% if entrypoint.js %}
-    {% for asset in entrypoint.js %}
-      {{ macros.js(asset.src, asset.integrity, staticURI) }}
-    {% endfor %}
-  {% endif %}
-  <script>
-    const CoralStreamEmbed = Coral.createStreamEmbed({
-      id: "coralStreamEmbed",
-      amp: true,
-    });
-    window.CoralStreamEmbed = CoralStreamEmbed;
-    CoralStreamEmbed.render();
-  </script>
-{% endblock %}