Attempt to use linked Google account when loading documents.

This would hopefully have no effect if the user isn't logged into their
linked account (it would redirect to the default account, as before),
but would select the linked account if available, which could prevent
users from showing up anonymously.

imports/client/components/DocumentDisplay.tsx

@@ -1,3 +1,4 @@
+import type { Meteor } from "meteor/meteor";
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faFileAlt } from "@fortawesome/free-solid-svg-icons/faFileAlt";
 import { faTable } from "@fortawesome/free-solid-svg-icons/faTable";
@@ -9,6 +10,7 @@ import type { DocumentType } from "../../lib/models/Documents";
 interface DocumentDisplayProps {
   document: DocumentType;
   displayMode: "link" | "embed";
+  user: Meteor.User;
 }
 
 const StyledDeepLink = styled.a`
@@ -43,18 +45,25 @@ export const DocumentMessage = styled.span`
 const GoogleDocumentDisplay = ({
   document,
   displayMode,
+  user,
 }: DocumentDisplayProps) => {
   let url: string;
   let title: string;
   let icon: IconDefinition;
+  // If the user has linked their Google account, try to force usage of that specific account.
+  // Otherwise, they may open the document anonymously. If the user isn't signed in, they will be
+  // redirected to the default account in their browser session anyway.
+  const authUserParam = user.googleAccount
+    ? `authuser=${user.googleAccount}&`
+    : "";
   switch (document.value.type) {
     case "spreadsheet":
-      url = `https://docs.google.com/spreadsheets/d/${document.value.id}/edit?ui=2&rm=embedded&gid=0#gid=0`;
+      url = `https://docs.google.com/spreadsheets/d/${document.value.id}/edit?${authUserParam}ui=2&rm=embedded&gid=0#gid=0`;
       title = "Sheet";
       icon = faTable;
       break;
     case "document":
-      url = `https://docs.google.com/document/d/${document.value.id}/edit?ui=2&rm=embedded#gid=0`;
+      url = `https://docs.google.com/document/d/${document.value.id}/edit?${authUserParam}ui=2&rm=embedded#gid=0`;
       title = "Doc";
       icon = faFileAlt;
       break;
@@ -84,11 +93,19 @@ const GoogleDocumentDisplay = ({
   }
 };
 
-const DocumentDisplay = ({ document, displayMode }: DocumentDisplayProps) => {
+const DocumentDisplay = ({
+  document,
+  displayMode,
+  user,
+}: DocumentDisplayProps) => {
   switch (document.provider) {
     case "google":
       return (
-        <GoogleDocumentDisplay document={document} displayMode={displayMode} />
+        <GoogleDocumentDisplay
+          document={document}
+          displayMode={displayMode}
+          user={user}
+        />
       );
     default:
       return (

imports/client/components/PuzzlePage.tsx

@@ -915,12 +915,14 @@ const PuzzlePageMetadata = ({
   displayNames,
   document,
   isDesktop,
+  selfUser,
 }: {
   puzzle: PuzzleType;
   bookmarked: boolean;
   displayNames: Map<string, string>;
   document?: DocumentType;
   isDesktop: boolean;
+  selfUser: Meteor.User;
 }) => {
   const huntId = puzzle.hunt;
   const puzzleId = puzzle._id;
@@ -1044,7 +1046,7 @@ const PuzzlePageMetadata = ({
 
   const documentLink =
     document && !isDesktop ? (
-      <DocumentDisplay document={document} displayMode="link" />
+      <DocumentDisplay document={document} displayMode="link" user={selfUser} />
     ) : null;
 
   const editButton = canUpdate ? (
@@ -1749,14 +1751,26 @@ const PuzzleDocumentDiv = styled.div`
 `;
 
 const PuzzlePageMultiplayerDocument = React.memo(
-  ({ document }: { document?: DocumentType }) => {
+  ({
+    document,
+    selfUser,
+  }: {
+    document?: DocumentType;
+    selfUser: Meteor.User;
+  }) => {
     let inner = (
       <DocumentMessage>
         Attempting to load collaborative document...
       </DocumentMessage>
     );
     if (document) {
-      inner = <DocumentDisplay document={document} displayMode="embed" />;
+      inner = (
+        <DocumentDisplay
+          document={document}
+          displayMode="embed"
+          user={selfUser}
+        />
+      );
     }
 
     return <PuzzleDocumentDiv>{inner}</PuzzleDocumentDiv>;
@@ -2012,6 +2026,7 @@ const PuzzlePage = React.memo(() => {
       document={document}
       displayNames={displayNames}
       isDesktop={isDesktop}
+      selfUser={selfUser}
     />
   );
   const chat = (
@@ -2093,7 +2108,10 @@ const PuzzlePage = React.memo(() => {
             {chat}
             <PuzzleContent>
               {metadata}
-              <PuzzlePageMultiplayerDocument document={document} />
+              <PuzzlePageMultiplayerDocument
+                document={document}
+                selfUser={selfUser}
+              />
               {debugPane}
             </PuzzleContent>
           </SplitPanePlus>