Poll for expired session

internal/api/me.go

@@ -0,0 +1,49 @@
+package api
+
+import (
+	"fmt"
+	"net/http"
+
+	"github.com/hashicorp/go-hclog"
+)
+
+func MeHandler(
+	l hclog.Logger,
+) http.Handler {
+
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		errResp := func(httpCode int, userErrMsg, logErrMsg string, err error) {
+			l.Error(logErrMsg,
+				"method", r.Method,
+				"path", r.URL.Path,
+				"error", err,
+			)
+			errJSON := fmt.Sprintf(`{"error": "%s"}`, userErrMsg)
+			http.Error(w, errJSON, httpCode)
+		}
+
+		// Authorize request.
+		userEmail := r.Context().Value("userEmail").(string)
+		if userEmail == "" {
+			errResp(
+				http.StatusUnauthorized,
+				"No authorization information for request",
+				"no user email found in request context",
+				nil,
+			)
+			return
+		}
+
+		switch r.Method {
+		// The HEAD method is used to determine if the user is currently
+		// authenticated.
+		case "HEAD":
+			w.WriteHeader(http.StatusOK)
+			return
+
+		default:
+			w.WriteHeader(http.StatusMethodNotAllowed)
+			return
+		}
+	})
+}

internal/cmd/commands/server/server.go

@@ -266,6 +266,7 @@ func (c *Command) Run(args []string) int {
 			api.DraftsHandler(cfg, c.Log, algoSearch, algoWrite, goog, db)},
 		{"/api/v1/drafts/",
 			api.DraftsDocumentHandler(cfg, c.Log, algoSearch, algoWrite, goog)},
+		{"/api/v1/me", api.MeHandler(c.Log)},
 		{"/api/v1/me/subscriptions",
 			api.MeSubscriptionsHandler(cfg, c.Log, goog, db)},
 		{"/api/v1/people", api.PeopleDataHandler(cfg, c.Log, goog)},

web/app/components/notification.hbs

@@ -1,14 +1,31 @@
 <div class="notifications-container">
   {{#each this.flashMessages.queue as |flash|}}
-    <FlashMessage @flash={{flash}} class="notification" as |component flash|>
+    <FlashMessage
+      data-test-flash-notification
+      @flash={{flash}}
+      class="notification"
+      as |component flash close|
+    >
       <Hds::Toast
         @color={{flash.type}}
         @icon={{flash.icon}}
-        @onDismiss={{this.dismiss}}
+        @onDismiss={{close}}
         as |T|
       >
-        <T.Title>{{flash.title}}</T.Title>
-        <T.Description>{{flash.message}}</T.Description>
+        <T.Title data-test-flash-notification-title>
+          {{flash.title}}
+        </T.Title>
+        <T.Description data-test-flash-notification-description>
+          {{flash.message}}
+        </T.Description>
+        {{#if (and flash.buttonText flash.buttonAction)}}
+          <T.Button
+            data-test-flash-notification-button
+            @text={{flash.buttonText}}
+            @icon={{flash.buttonIcon}}
+            {{on "click" flash.buttonAction}}
+          />
+        {{/if}}
       </Hds::Toast>
     </FlashMessage>
   {{/each}}

web/app/components/notification.ts

@@ -0,0 +1,7 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import FlashMessageService from "ember-cli-flash/services/flash-messages";
+
+export default class Notification extends Component {
+  @service declare flashMessages: FlashMessageService;
+}

web/app/routes/authenticated.ts

@@ -12,6 +12,7 @@ export default class AuthenticatedRoute extends Route {
 
   async afterModel(): Promise<void> {
     await this.authenticatedUser.loadInfo.perform();
+    void this.session.pollForExpiredAuth.perform();
   }
 
   async beforeModel(transition: any): Promise<void> {

web/app/services/fetch.ts

@@ -14,7 +14,7 @@ interface FetchOptions {
 export default class FetchService extends Service {
   @service declare session: SessionService;
 
-  async fetch(url: string, options: FetchOptions = {}) {
+  async fetch(url: string, options: FetchOptions = {}, isPollCall = false) {
     // Add the Google access token in a header (for auth) if the URL starts with
     // a frontslash, which will only target the application backend.
     if (Array.from(url)[0] == "/") {
@@ -27,7 +27,17 @@ export default class FetchService extends Service {
     try {
       const resp = await fetch(url, options);
 
+      this.session.pollResponseIs401 = resp.status === 401 && isPollCall;
+
       if (!resp.ok) {
+        if (resp.status === 401) {
+          if (isPollCall) {
+            // handle poll-call failures via the session service
+            return;
+          } else {
+            this.session.invalidate();
+          }
+        }
         throw new Error(`Bad response: ${resp.statusText}`);
       }
 

web/app/services/session.ts

@@ -2,11 +2,79 @@ import { inject as service } from "@ember/service";
 import RouterService from "@ember/routing/router-service";
 import EmberSimpleAuthSessionService from "ember-simple-auth/services/session";
 import window from "ember-window-mock";
+import { keepLatestTask } from "ember-concurrency";
+import FlashMessageService from "ember-cli-flash/services/flash-messages";
+import Ember from "ember";
+import { tracked } from "@glimmer/tracking";
+import simpleTimeout from "hermes/utils/simple-timeout";
+import FetchService from "./fetch";
 
 export const REDIRECT_LOCAL_STORAGE_KEY = "hermes.redirectTarget";
 
 export default class SessionService extends EmberSimpleAuthSessionService {
   @service declare router: RouterService;
+  @service declare fetch: FetchService;
+  @service declare session: SessionService;
+  @service declare flashMessages: FlashMessageService;
+
+  /**
+   * Whether the service should show a reauthentication message.
+   * True when the user has dismissed a previous re-auth message.
+   */
+  @tracked preventReauthenticationMessage = false;
+
+  @tracked tokenIsValid = true;
+  @tracked pollResponseIs401 = false;
+
+  /**
+   * A persistent task that periodically checks if the user's
+   * session has expired, and shows a flash message if it has.
+   * Kicked off by the Authenticated route.
+   */
+  pollForExpiredAuth = keepLatestTask(async () => {
+    await simpleTimeout(Ember.testing ? 100 : 10000);
+
+    this.fetch.fetch(
+      "/api/v1/me",
+      {
+        method: "HEAD",
+        headers: {
+          "Hermes-Google-Access-Token": this.data.authenticated.access_token,
+        },
+      },
+      true
+    );
+
+    let isLoggedIn = await this.requireAuthentication(null, () => {});
+
+    if (this.pollResponseIs401 || !isLoggedIn) {
+      this.tokenIsValid = false;
+    }
+
+    if (this.tokenIsValid) {
+      this.preventReauthenticationMessage = false;
+    } else if (!this.preventReauthenticationMessage) {
+      this.flashMessages.add({
+        title: "Login token expired",
+        message: "Please reauthenticate to keep using Hermes.",
+        type: "warning",
+        sticky: true,
+        destroyOnClick: false,
+        preventDuplicates: true,
+        buttonText: "Authenticate with Google",
+        buttonIcon: "google",
+        buttonAction: () => {
+          this.authenticate("authenticator:torii", "google-oauth2-bearer");
+          this.flashMessages.clearMessages();
+        },
+        onDestroy: () => {
+          this.preventReauthenticationMessage = true;
+        },
+      });
+    }
+
+    this.pollForExpiredAuth.perform();
+  });
 
   // ember-simple-auth only uses a cookie to track redirect target if you're using fastboot, otherwise it keeps track of the redirect target as a parameter on the session service. See the source here: https://github.com/mainmatter/ember-simple-auth/blob/a7e583cf4d04d6ebc96b198a8fa6dde7445abf0e/packages/ember-simple-auth/addon/-internals/routing.js#L33-L50
   //

web/app/styles/components/notification.scss

@@ -1,24 +1,24 @@
 .notifications-container {
-  @apply fixed;
-  z-index: 20;
-  bottom: 8px;
-  right: 8px;
+  @apply fixed z-20 bottom-6 right-6;
 }
 
-.notification {
-  // Animation example taken from: https://github.com/adopted-ember-addons/ember-cli-flash#animated-example
-  opacity: 0;
-
-  transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  margin: 16px;
-
-  &.active {
+@keyframes notificationIn {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
     opacity: 1;
-    @apply left-2;
+    transform: translateX(0);
+  }
+}
+
+.notification {
+  animation: notificationIn 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
+    forwards;
 
-    &.exiting {
-      opacity: 0;
-      @apply left-0;
-    }
+  &.exiting {
+    animation: notificationIn 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
+      reverse forwards;
   }
 }

web/app/utils/simple-timeout.ts

@@ -0,0 +1,14 @@
+/**
+ * A timeout function for polling tasks.
+ * Not registered with Ember's runloop
+ * (unlike ember-concurrency's timeout helper),
+ * so it doesn't hang in acceptance tests.
+ *
+ * See: https://ember-concurrency.com/docs/testing-debugging
+ */
+
+export default function simpleTimeout(timeout: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeout);
+  });
+}

web/mirage/config.ts

@@ -10,6 +10,22 @@ export default function (mirageConfig) {
     routes() {
       this.namespace = "api/v1";
 
+      /*************************************************************************
+       *
+       * HEAD requests
+       *
+       *************************************************************************/
+
+      this.head("/me", (schema, _request) => {
+        let isLoggedIn = schema.db.mes[0].isLoggedIn;
+
+        if (isLoggedIn) {
+          return new Response(200, {});
+        } else {
+          return new Response(401, {});
+        }
+      });
+
       /*************************************************************************
        *
        * POST requests
@@ -126,7 +142,7 @@ export default function (mirageConfig) {
        * Used by the AuthenticatedUserService to get the user's profile.
        */
       this.get("https://www.googleapis.com/userinfo/v2/me", (schema) => {
-        // If the test has explicitly set a user, return it.
+        // If the test has set a user, return it.
         if (schema.mes.first()) {
           return schema.mes.first().attrs;
         } else {